gulp serve:dist does not inject angular dependencies on generator-angular-fullstack 3.7.4

[lechip]

• [x] I understand that GitHub issues are not for tech support, but for questions specific to this generator, bug reports, and feature requests.

Item	Version
generator-angular-fullstack	3.7.4
Node	4.4.7
npm	3.10.7
Operating System	Ubuntu 15.10

Item	Answer
Transpiler	Babel
Markup	HTML
CSS	SCSS
Router	ui-router
Client Tests	Jasmine
DB	MongoDB
Auth	Y

Good day everyone.

I created an app using the Angular Full-Stack Generator version 3.7.4.

I can add dependencies normally using bower and then register on the applications main (and only) module like this:

angular.module('myapp', ['uiGmapgoogle-maps', 'ngMaterial']);

Which works fine when in development, i.e. using gulp serve.

However, when I want to generate the dist files with gulp serve:dist and start the app I always get an error like this:

Uncaught Error: [$injector:modulerr] Failed to instantiate module myapp due to:
Error: [$injector:modulerr] Failed to instantiate module ngMaterial due to:
Error: [$injector:nomod] Module 'ngMaterial' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

I haven't been able to identify what part of the task gulp serve:dist causes the problem, since it persist even when I disable the uglify() plugin.

Any help would be greatly appreciated.

[Awk34]

Are you including the ngMaterial JS file in the scripts section of your index.html? Maybe post your index.html..

[lechip]

this is actually what ends up on my scripts section index.html after the build: (doesnt bower take care of putting the depencencies in the vendor.js file?)

    <!--[if lt IE 9]> <script src="bower_components/es5-shim/es5-shim.js"></script> <script src="bower_components/json3/lib/json3.min.js"></script> <![endif]-->
    <script src="app/vendor-5233ec1208.js"></script>
    <script src="app/app-564b05740a.js"></script>

[lechip]

And just in case, this is the index.html BEFORE build (i.e. working on dev mode):

<!--[if lt IE 9]> <script src="bower_components/es5-shim/es5-shim.js"></script> <script src="bower_components/json3/lib/json3.min.js"></script> <![endif]-->
    <!-- build:js({client,node_modules}) app/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <script src="bower_components/lodash/lodash.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="bower_components/angular-validation-match/dist/angular-validation-match.min.js"></script>
    <script src="bower_components/angular-simple-logger/dist/angular-simple-logger.js"></script>
    <script src="bower_components/markerclustererplus/src/markerclusterer.js"></script>
    <script src="bower_components/google-maps-utility-library-v3-markerwithlabel/dist/markerwithlabel.js"></script>
    <script src="bower_components/google-maps-utility-library-v3-infobox/dist/infobox.js"></script>
    <script src="bower_components/google-maps-utility-library-v3-keydragzoom/dist/keydragzoom.js"></script>
    <script src="bower_components/js-rich-marker/src/richmarker.js"></script>
    <script src="bower_components/angular-google-maps/dist/angular-google-maps.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-aria/angular-aria.js"></script>
    <script src="bower_components/angular-messages/angular-messages.js"></script>
    <script src="bower_components/angular-material/angular-material.js"></script>
    <script src="bower_components/angular-youtube-mb/src/angular-youtube-embed.js"></script>
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:js(.tmp) app/app.js -->
    <script src="app/app.js"></script>
    <!-- injector:js -->
    <script src="app/admin/admin.module.js"></script>
    <script src="components/auth/auth.module.js"></script>
    <script src="components/util/util.module.js"></script>
    <script src="app/account/account.js"></script>
    <script src="app/account/login/login.controller.js"></script>
    <script src="app/account/settings/settings.controller.js"></script>
    <script src="app/account/signup/signup.controller.js"></script>
    <script src="app/addVideo/addVideo.js"></script>
    <script src="app/addVideo/addvideo.controller.js"></script>
    <script src="app/admin/admin.controller.js"></script>
    <script src="app/admin/admin.router.js"></script>
    <script src="app/app.constant.js"></script>
    <script src="app/editVideo/editVideo.controller.js"></script>
    <script src="app/editVideo/editVideo.js"></script>
    <script src="app/home/home.controller.js"></script>
    <script src="app/home/home.js"></script>
    <script src="app/main/main.controller.js"></script>
    <script src="app/main/main.js"></script>
    <script src="app/mapControlVideo/mapControlVideo.controller.js"></script>
    <script src="app/mapOptionsService/mapOptionsService.service.js"></script>
    <script src="app/videoService/videoService.service.js"></script>
    <script src="components/auth/auth.service.js"></script>
    <script src="components/auth/interceptor.service.js"></script>
    <script src="components/auth/router.decorator.js"></script>
    <script src="components/auth/user.service.js"></script>
    <script src="components/footer/footer.directive.js"></script>
    <script src="components/modal/modal.service.js"></script>
    <script src="components/mongoose-error/mongoose-error.directive.js"></script>
    <script src="components/navbar/navbar.controller.js"></script>
    <script src="components/navbar/navbar.directive.js"></script>
    <script src="components/oauth-buttons/oauth-buttons.controller.js"></script>
    <script src="components/oauth-buttons/oauth-buttons.directive.js"></script>
    <script src="components/sidenav/sidenav.component.js"></script>
    <script src="components/sidenav/sidenav.controller.js"></script>
    <script src="components/util/util.service.js"></script>
    <!-- endinjector -->
    <!-- endbuild -->

Should i be looking at something in particular on the gulpfile or something? I've spent already 3 months trying to figure out what is going on to no avail :(.

[gzuzkstro]

I'm facing the same issue. How should I add angular dependencies?

[lechip]

Still facing the same issue, anyone knows how to solve this?

[honkskillet]

Anyone figure this out?

[svs]

I moved whichever module it was complaining about up the stack to below the script src="angular.js" line and it worked eventually. Hope this helps

[anandgargate]

@lechip is it solved? I am facing same issue.

[lechip]

I do not know, I have not tried the solutions here and will be migrating the codebase to angular2

[hboylan]

The project uses webpack. Tried adding angular-ui-grid to the list of vendors in webpack.make.js, but still says the module is missing on import. #2237