1
votes

I'm working with Angular in the MEAN stack and I'm trying to integrate Angular but I keep running into this errors.

Uncaught SyntaxError: Unexpected token < Error: [ng:areq] Argument 'CompanyCtrl' is not a function, got undefined

Here are my files:

index.html

<!DOCTYPE html>
<html ng-app="dashboard">
  <head>
    <meta charset="utf-8">
    <title>TappShops - Dashboard</title>
    <base href="/">
    <!-- inject:css -->
    <!-- endinject -->

    <script src="../lib/angular/angular.js"></script>
    <script src="../lib/angular-route/angular-route.js"></script>
    <script src="../lib/angular-resource/angular-resource.js"></script>
    <script src="../app/js/app.js"></script>

    <!-- inject:js -->
    <script src="features/company/company.controller.js"></script>
    <!-- endinject -->
  </head>

  <body>
    <div ng-controller="CompanyCtrl as company">
      {{company.test}}
    </div>
  </body>
</html>

app.js

(function() {
  'use strict';

  angular
    .module('dashboard', [
      'ngRoute',
      'ngResource'
    ])
})();

company.controller.js

(function() {
  'use strict';

  angular
    .module('dashboard')
    .controller('CompanyCtrl', CompanyCtrl);

  CompanyCtrl.$inject = [
  ];

  function CompanyCtrl() {
    var vm = this;

    vm.test = "Hello World!";
  };

})();

Thanks in advance for any help. :)

1
Are you certain there's no other errors in the stack before this one? Because that all looks valid.Lex
Is the path to company.controller.js correct? I notice it is absent the leading ../ that all of your other paths have.Lex
That's beside the point but why work with module.controller? It is considered an obsolete practice (some would say bad practice). Instead use directives/components, each has its own controller.yccteam
@Lex I added the leading leading ../ but the error is still appearing and before that error there is a Uncaught SyntaxError: Unexpected token <. And I was following John Papa's angular guide to learn, will look into that, thanks!clockhouse
Again, is the path correct? What is the directory structure of your site? Just throwing ../ on there won't resolve the issue if your directory structure is, for example, /app/js/features/company/.... Ignore yccteam, what you're doing is actually standard practice for Angular 1.x.Lex

1 Answers

2
votes

Okay so the problem was path to my controller.

I had:

<script src="features/company/company.controller.js"></script>

When it should have been:

<script src="app/features/company/company.controller.js"></script>