Angular-cli: AOT build produces applications unable to lazy load modules

[slmyers]

angular-cli: 1.0.0-beta.16
node: 6.0.0
os: linux x64

reproduction repo can be found here

The log given by the failure.

main.cfeed71….bundle.js:547 EXCEPTION: Uncaught (in promise): Error: Cannot find module 
'app/lazy/lazy.module.ngfactory'.

It seems that aot option can not build project that lazily loads modules. I would hope that one could use the patterns in the official documentation -- which I believe I'm doing -- and use the -- aot option to compile your app easily. I would appreciate any clarification as to whether this is an issue with the CLI or with the compiler. Thanks.

[slmyers]

update

I think the LazyModule may not have been compiled, because there is a 0.map but no 0.chunk.js in the dist folder.

[Delagen]

2112 seems aot process does not polished.

I issue No module factory available for dependency type: ContextElementDependency for lazyRoutes dependencies

[coryrylan]

I have this same issue as well. I dont have a repo to show yet but I get the same error as above.
I ran ng build --prod --aot. Also one thing to note my outDir is set to dist/build instead of the default path.

angular-cli: 1.0.0-beta.16
node: 6.4.0
os: win32 x64

main.166efb8….bundle.js:1494 Unhandled Promise rejection: Cannot find module 'app/account/account.module.ngfactory'. ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot find module 'app/account/account.module.ngfactory'.(…) Error: Cannot find module 'app/account/account.module.ngfactory'.

[achimha]

I have the same problem and also don't see compiled code for the lazy modules, only the .ngfactory.ts file.

[filipesilva]

In beta.16 the --aot flag was still experimental. Can you repro in beta.17?

[Delagen]

@filipesilva the same error. No changes in the main function in beta16->beta17 upgrade as I specified in https://github.com/angular/angular-cli/issues/2112#issuecomment-252343829
You can get source from @tianyangj comment
The only changes is NgcWebpackPlugin -> AotPlugin rename and some cleanup in plugin arguments.

[achimha]

With b17 I still don't get the lazy route modules compiled by ng build --prod --aot. There isn't even an ngfactory file, just a main bundle. For some reason the loadChildren does not trigger the compilation.

I have a file app/src/lazy/lazy.routes.ts:

export const lazyRoutes: Routes = [
    {
        path: 'signup',
        loadChildren: 'app/lazy/signup/signup.module#SignupModule'
    }
];

This route definition is part of the main route definition in app/app-routing.module.ts:

const routes: Routes = [
    {
        path: '',
        component: FrontpageComponent
    },
    {
        path: 'login',
        component: LoginComponent
    },
    ...lazyRoutes,
    {
        path: '**',
        component: NotFoundComponent
    },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: []
})
export class FrontendRoutingModule {
}

I tried changing the loadChildren paths to be relative but then the JIT version throws as well, it has to start with app/.

[tomwanzek]

Just tested a project with beta.17. Build/serve without --aot work without issues w.r.t. lazy-loading, regardless of whether prod is used or not.

When I use ng serve --aot:
Upon initial load the error message below appears in chrome debugger:

While the initial screens seem to work regardless, hitting the lazy-loaded route throws an error, because the module ngFactory cannot be found.

One additional note, when I build with --aot the code chunk is not generated for the lazy route in the dist folder, however, there is a map file which seems to correspond to it.

[mattlewis92]

This error is also present in the demo app - webpack builds the project ok, but as soon as you click the lazy link, this error is thrown:

Uncaught (in promise): Error: Cannot find module './lazy.module.ngfactory'.

[drejohnson]

I get the error HomeModule is not an NgModule when using ng build --prod --aot on beta.17. Using just ng build --prod works fine.

home.module.ts

const HomeRoutes: Routes = [
  {
    path: '',
    component: HomeComponent,
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(HomeRoutes)
  ],
  declarations: [HomeComponent]
})
export class HomeModule { }

app.module.ts

export const Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: 'app/home/home.module#HomeModule' },
  { path: 'about', loadChildren: 'app/about/about.module#AboutModule' }
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(Routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

[Rosseyn]

Using lazy routes, v1.0.0-beta-16 wouldn't let me compile, but beta-17 completed successfully.
I'm able to serve dev with great improvement in speed, but can't ng serve --prod --aot after ng build --prod --aot and still have the app fully load. Currently it only loads as far as the initial Loading... splash, and doesn't go any further, no errors in console.

[tony-fanbeat]

Any updates on this issue?

We have a large app that was originally written against beta-17. I recently moved it over to the Angular2 release and hooked up the ng compiler to take advantage of AoT compilation, but as of now I haven't found a way to leverage both AoT and lazy loading. As mentioned above, it will compile fine but when navigating to the lazy route it throws an error that 'lazy.module.ngfactory' could not be found

AoT is a killer feature and made a noticeable difference in our boot time, but at this point our --prod build still send down ~2.2mb all at once and we would love to cut that down by lazy loading some of our lesser-used routes

[MrCroft]

Same thing here, as @drejohnson is experiencing...

ng build --aot fails with: "LazyModule is not an NgModule"

Created an app with ng new and then just added a lazy loaded module: https://github.com/MrCroft/lazy

ng build --aot fails with: "LazyModule is not an NgModule" if I don't use export default in the lazy module, or it fails with "can't find symbol LazyModule exported from module D:/wamp/www/lazy/src/app/lazy/lazy.module.ts" if I do have export default

angular-cli: 1.0.0-beta.18
Angular: 2.1.0
node: 6.9.1
os: win32 x64

[tomwanzek]

I just upgraded the project I tested with beta.17 to beta.18. As mentioned above, I am encountering the same failure modes:

• project build and serve are fine _without_ --aot (regardless of dev or prod)
• project compiles without errors _with_ --aot. However, the chunks for the lazy modules are not emitted in js. There is, oddly enough, again a partial 0.map without any corresponding js file.

[naveedahmed1]

Any update on this?

[MrCroft]

Very strange... I've just tried ng build --aot with cli beta.18 on the last 3 releases of Angular:
With Angular 2.1.0 I get: Cannot read property 'parse' of undefined
With Angular 2.1.1 I get: this.compiler.compileModules is not a function
With Angular 2.1.2 I get: Cannot read property 'transitiveModules' of undefined

This is unrelated to lazy loading (doesn't matter if I have a lazy module or not). Aot used to work just fine without lazy loading at least.
Just ng new and then:

1. change angular version in package.json (strict version, no ~ or ^)
2. delete node_modules/@angular
3. npm cache clean (maybe not necessary, but it's kind of a reflex already)
4. npm install
5. ng build --aot

In fact, even on the same example I gave in my post above (https://github.com/MrCroft/lazy) with the same Angular version (2.1.0) and same node/cli versions, I don't get LazyModule is not an NgModule anymore :| I now get Cannot read property 'parse' of undefined. Without changing anything, except uninstalling/installing different versions of Angular before going back to 2.1.0 again (but removed node_modules/@angular and running npm cache clean every time).

angular-cli: 1.0.0-beta.18
node: 6.9.1
os: win32 x64

Full logs:
Angular 2.1.0:

D:\wamp\www\my-app> ng build --aot
can't resolve module @angular/core/src/di/opaque_token from D:\wamp\www\my-app\src\index.ts
Cannot read property 'parse' of undefined
TypeError: Cannot read property 'parse' of undefined
    at ReflectorHost.normalizeAssetUrl (D:\Users\iminar\Dev\angular\modules\@angular\compiler-cli\src\reflector_host.ts:70:28)
    at ReflectorHost.findDeclaration (D:\Users\iminar\Dev\angular\modules\@angular\compiler-cli\src\reflector_host.ts:175:27)
    at StaticReflector.initializeConversionMap (D:\Users\iminar\Dev\angular\modules\@angular\compiler-cli\src\static_reflector.ts:184:34)
    at new StaticReflector (D:\Users\iminar\Dev\angular\modules\@angular\compiler-cli\src\static_reflector.ts:72:57)
    at AotPlugin._setupOptions (D:\wamp\www\my-app\node_modules\@ngtools\webpack\src\plugin.js:122:27)
    at new AotPlugin (D:\wamp\www\my-app\node_modules\@ngtools\webpack\src\plugin.js:34:14)
    at Object.exports.getWebpackAotConfigPartial (D:\wamp\www\my-app\node_modules\angular-cli\models\webpack-build-typescript.js:57:13)
    at new NgCliWebpackConfig (D:\wamp\www\my-app\node_modules\angular-cli\models\webpack-config.js:18:42)
    at Class.run (D:\wamp\www\my-app\node_modules\angular-cli\tasks\build-webpack.js:17:22)
    at Class.run (D:\wamp\www\my-app\node_modules\angular-cli\commands\build.js:50:26)
    at Class.<anonymous> (D:\wamp\www\my-app\node_modules\angular-cli\lib\models\command.js:152:17)
    at tryCatch (D:\wamp\www\my-app\node_modules\rsvp\dist\lib\rsvp\-internal.js:215:12)
    at invokeCallback (D:\wamp\www\my-app\node_modules\rsvp\dist\lib\rsvp\-internal.js:230:13)
    at D:\wamp\www\my-app\node_modules\rsvp\dist\lib\rsvp\then.js:29:16
    at flush (D:\wamp\www\my-app\node_modules\rsvp\dist\lib\rsvp\asap.js:85:5)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

Angular 2.1.1:

D:\wamp\www\my-app> ng build --aot
  0% compilingthis.compiler.compileModules is not a function
TypeError: this.compiler.compileModules is not a function
    at CodeGenerator.codegen (D:\Users\iminar\Dev\angular\modules\@angular\compiler-cli\src\codegen.ts:71:26)
    at AotPlugin._make (D:\wamp\www\my-app\node_modules\@ngtools\webpack\src\plugin.js:186:43)
    at Compiler.<anonymous> (D:\wamp\www\my-app\node_modules\@ngtools\webpack\src\plugin.js:151:75)
    at Compiler.applyPluginsParallel (D:\wamp\www\my-app\node_modules\tapable\lib\Tapable.js:156:14)
    at Compiler.<anonymous> (D:\wamp\www\my-app\node_modules\webpack\lib\Compiler.js:463:8)
    at Compiler.applyPluginsAsync (D:\wamp\www\my-app\node_modules\tapable\lib\Tapable.js:73:70)
    at Compiler.compile (D:\wamp\www\my-app\node_modules\webpack\lib\Compiler.js:456:7)
    at Compiler.<anonymous> (D:\wamp\www\my-app\node_modules\webpack\lib\Compiler.js:219:10)
    at Compiler.readRecords (D:\wamp\www\my-app\node_modules\webpack\lib\Compiler.js:367:10)
    at Compiler.<anonymous> (D:\wamp\www\my-app\node_modules\webpack\lib\Compiler.js:216:9)
    at next (D:\wamp\www\my-app\node_modules\tapable\lib\Tapable.js:81:11)
    at Compiler.<anonymous> (D:\wamp\www\my-app\node_modules\webpack\lib\CachePlugin.js:34:58)
    at Compiler.applyPluginsAsync (D:\wamp\www\my-app\node_modules\tapable\lib\Tapable.js:85:13)
    at Compiler.<anonymous> (D:\wamp\www\my-app\node_modules\webpack\lib\Compiler.js:213:8)
    at next (D:\wamp\www\my-app\node_modules\tapable\lib\Tapable.js:81:11)
    at Compiler.<anonymous> (D:\wamp\www\my-app\node_modules\webpack\lib\node\NodeEnvironmentPlugin.js:23:3)
    at Compiler.applyPluginsAsync (D:\wamp\www\my-app\node_modules\tapable\lib\Tapable.js:85:13)
    at Compiler.run (D:\wamp\www\my-app\node_modules\webpack\lib\Compiler.js:210:7)
    at D:\wamp\www\my-app\node_modules\angular-cli\tasks\build-webpack.js:26:29
    at Class.run (D:\wamp\www\my-app\node_modules\angular-cli\tasks\build-webpack.js:25:16)
    at Class.run (D:\wamp\www\my-app\node_modules\angular-cli\commands\build.js:50:26)
    at Class.<anonymous> (D:\wamp\www\my-app\node_modules\angular-cli\lib\models\command.js:152:17)
    at tryCatch (D:\wamp\www\my-app\node_modules\rsvp\dist\lib\rsvp\-internal.js:215:12)
    at invokeCallback (D:\wamp\www\my-app\node_modules\rsvp\dist\lib\rsvp\-internal.js:230:13)
    at D:\wamp\www\my-app\node_modules\rsvp\dist\lib\rsvp\then.js:29:16
    at flush (D:\wamp\www\my-app\node_modules\rsvp\dist\lib\rsvp\asap.js:85:5)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

Angular 2.1.2:

D:\wamp\www\my-app> ng build --aot
  0% compilingCannot read property 'transitiveModules' of undefined
TypeError: Cannot read property 'transitiveModules' of undefined
    at D:\wamp\www\my-app\node_modules\@angular\compiler\bundles\compiler.umd.js:13042:22
    at Array.forEach (native)
    at analyzeNgModules (D:\wamp\www\my-app\node_modules\@angular\compiler\bundles\compiler.umd.js:13041:24)
    at OfflineCompiler.compileModules (D:\wamp\www\my-app\node_modules\@angular\compiler\bundles\compiler.umd.js:13115:20)
    at CodeGenerator.codegen (D:\Users\iminar\Dev\angular\modules\@angular\compiler-cli\src\codegen.ts:71:26)
    at AotPlugin._make (D:\wamp\www\my-app\node_modules\@ngtools\webpack\src\plugin.js:186:43)
    at Compiler.<anonymous> (D:\wamp\www\my-app\node_modules\@ngtools\webpack\src\plugin.js:151:75)
    at Compiler.applyPluginsParallel (D:\wamp\www\my-app\node_modules\tapable\lib\Tapable.js:156:14)
    at Compiler.<anonymous> (D:\wamp\www\my-app\node_modules\webpack\lib\Compiler.js:463:8)
    at Compiler.applyPluginsAsync (D:\wamp\www\my-app\node_modules\tapable\lib\Tapable.js:73:70)
    at Compiler.compile (D:\wamp\www\my-app\node_modules\webpack\lib\Compiler.js:456:7)
    at Compiler.<anonymous> (D:\wamp\www\my-app\node_modules\webpack\lib\Compiler.js:219:10)
    at Compiler.readRecords (D:\wamp\www\my-app\node_modules\webpack\lib\Compiler.js:367:10)
    at Compiler.<anonymous> (D:\wamp\www\my-app\node_modules\webpack\lib\Compiler.js:216:9)
    at next (D:\wamp\www\my-app\node_modules\tapable\lib\Tapable.js:81:11)
    at Compiler.<anonymous> (D:\wamp\www\my-app\node_modules\webpack\lib\CachePlugin.js:34:58)
    at Compiler.applyPluginsAsync (D:\wamp\www\my-app\node_modules\tapable\lib\Tapable.js:85:13)
    at Compiler.<anonymous> (D:\wamp\www\my-app\node_modules\webpack\lib\Compiler.js:213:8)
    at next (D:\wamp\www\my-app\node_modules\tapable\lib\Tapable.js:81:11)
    at Compiler.<anonymous> (D:\wamp\www\my-app\node_modules\webpack\lib\node\NodeEnvironmentPlugin.js:23:3)
    at Compiler.applyPluginsAsync (D:\wamp\www\my-app\node_modules\tapable\lib\Tapable.js:85:13)
    at Compiler.run (D:\wamp\www\my-app\node_modules\webpack\lib\Compiler.js:210:7)
    at D:\wamp\www\my-app\node_modules\angular-cli\tasks\build-webpack.js:26:29
    at Class.run (D:\wamp\www\my-app\node_modules\angular-cli\tasks\build-webpack.js:25:16)
    at Class.run (D:\wamp\www\my-app\node_modules\angular-cli\commands\build.js:50:26)
    at Class.<anonymous> (D:\wamp\www\my-app\node_modules\angular-cli\lib\models\command.js:152:17)
    at tryCatch (D:\wamp\www\my-app\node_modules\rsvp\dist\lib\rsvp\-internal.js:215:12)
    at invokeCallback (D:\wamp\www\my-app\node_modules\rsvp\dist\lib\rsvp\-internal.js:230:13)
    at D:\wamp\www\my-app\node_modules\rsvp\dist\lib\rsvp\then.js:29:16
    at flush (D:\wamp\www\my-app\node_modules\rsvp\dist\lib\rsvp\asap.js:85:5)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

Not sure what's with that D:\Users\iminar path in each of the above logs :)

[Delagen]

@MrCroft transitiveModules is the options of codegen function, if options does not provided then it undefined and cause this error
source code from compiler-cli part
https://github.com/angular/angular/blob/master/modules/%40angular/compiler-cli/src/main.ts#L23

[MrCroft]

@Delagen Nobody said anything about doing anything else other than pass the --aot flag.
Shouldn't ng new + ng build --aot simply just work?... Since I didn't do anything custom myself and there's no 3rd party involved or anything else... Just a minimum app, the one generated by the cli.

[sgybas]

I have created a new project using angular-cli beta.19-3 and just added a lazy route to reproduce the problem: https://github.com/sgybas/angular-cli-2452

ng serve works fine, ng serve --aot does not. The browser console shows
Error: Cannot find module './lazy/lazy.module.ngfactory'.

ng build --prod works fine, two bundles are created. ng build --prod --aot creates the main bundle but the second chunk is not created.

Is there anything I can do to help resolve the issue?

[achimha]

Could the maintainers provide us with some feedback regarding the AOT/lazy issues please? It'd be very helpful to know what we should expect.

[filipesilva]

@achimha all I can say is that we're working as fast as possible to get it fixed. It's our top priority atm really.

[naveedahmed1]

@filipesilva can you please confirm, when fixed should it also help overcome the memory errors that we encounter when compiling large project without lazy loading? Such the one referenced here https://github.com/angular/angular/issues/12184

[tony-fanbeat]

Thanks for the update @achimha. I'm sure this is no small issue to work on and look forward to being able to leverage both AoT and lazy loading in our production app

[unsafecode]

Is there a way to leverage lazy-load routes with AoT today? I'm using @ngtools/webpack and lazy routes are not recognized unless I also use angular2-router-loader. In this case, components are not precompiled anyway...

[JohannesRudolph]

A big shout out to @hansl and @filipesilva for making this work in angular-cli 1.0.0-beta.20-4. I have our app lazy load with AOT now. You guys rock! I appreciate all the effort that goes into fixing the tooling so that angular devs can focus on building applications, not build infrastructure 👍

[ctrl-brk]

I'm still getting AppModule is not an NgModule in beta.20-4 using ng build -prod -aot

[Dunos]

Me too (well, not AppModule but the lazy module name instead), dunno how to solve it

[MrCroft]

Yes, same thing here MyLazyLoadedModule is not and NgModule when trying ng build --prod --aot
Repo here: https://github.com/MrCroft/lazy - ignore all the "angular-cli beta.18" commits; package.json and angular-cli.json are updated accordingly (for angular-cli 1.0.0-beta.20-4, respectively Angular 2.2.1)

@angular: 2.2.1
angular-cli: 1.0.0-beta.20-4
node: 6.9.1
os: win32 x64

[naveedahmed1]

I can confirm Lazyloading with AoT (ng build --aot --prod) is working properly in latest release of Angular-Cli

Those having issues could try creating routing module and add to imports of AppModule.

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

@NgModule({
    imports: [
        RouterModule.forRoot([
            { path: '', loadChildren: 'app/home/home.module#HomeModule' },
            { path: 'lazyLoadedFeature', loadChildren: 'app/lazyLoadedFeature/lazy-loaded-feature.module#LazyLoadedFeatureModule' },
        ]
        )
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule { }

In Lazy loaded module define its routing as a separate module and import in the child module.

import { FeatureListComponent } from './feature-list.component';
import { FeatureDetailsComponent } from './feature-details.component';

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: '', component: FeatureListComponent,
                children: [
                    { path: 'details/:id', component: FeatureDetailsComponent },
                ]
            }
        ])
    ],
    exports: [
        RouterModule
    ]
})
export class LazyLoadedFeatureRoutingModule { }

[MrCroft]

@naveedahmed1
I've tried your suggestion on 2 apps: a bigger app, with multiple lazy loaded modules... and in the repo I gave the link to as an example ( https://github.com/MrCroft/lazy )
First case (the bigger app):
After having created routing modules, ng build --aot doesn't throw errors anymore during the build process.
But when browsing through the app, as soon as I try to access a link that needs to load a lazy module, I get this thrown in my browser's console:
EXCEPTION: Uncaught (in promise): Error: Cannot find module 'app/user/user.module.ngfactory'.
Error: Cannot find module 'app/user/user.module.ngfactory'.

Second case (the repo I gave the link to):
Very strange, I'm still getting the same error on build: LazyModule is not an NgModule... I've checked and double-checked, I can't find anything missing.

[naveedahmed1]

Make sure you are using latest version of cli. Can you try generating a new project using latest version of cli, then copy code in your src folder to the new project's src folder, compile and check if it works.

[MrCroft]

@naveedahmed1
My bad... I didn't think there was any difference between previous version and the latest (except only under the hood, but didn't think there would be any in the actual files generated initially). I did an ng init now, overwrote all the files and then put back from history whatever needed to have my old app back. The simple one (the repo) worked right away!
For the larger app - I also had to delete the entire node_modules folder, not just angular and angular-cli (like I did with the small test app). But it works now! Both work.
Thank you!

[jvitor83]

@MrCroft and @naveedahmed1, the key change was the

    "baseUrl": "",

inside the tsconfig.json.
The packages updates + this line solve the LazyModule is not an NgModule error at build.

[maxime1992]

I can confirm that I've just upgraded to angular-cli 1.0.0-beta.21 and lazy loading is working with AOT <3 ! Big shout out for the team :) !!

[maxime1992]

I found a problem when running --prod without --aot : Lazy loaded modules are no longer lazy loaded. Am I the only one to have that problem ? https://github.com/angular/angular-cli/issues/3267

[tomwanzek]

@maxime1992 my lazy loading works fine with ng serve --prod with beta.21. Unfortunately, I can only partially validate with --aot. It compiles and serves the first lazy route without issues :smile: Then I run into the first @Effect custom decorator which is stripped out due to #2799 :cry:

Theory of Constraints in action :wink:

[maxime1992]

Hi @tomwanzek ! Today is your lucky day :)
I had exactly the same problem and I made a fork (like 5h ago) of angular-cli that doesn't strip out decorators! Just take a look at the end of #2799 ;) I tried it and it's working fine for me. I also added a bundle size comparison and it's way better than I could imagine. Only +7kb on main bundle. I thought keeping decorators would have a huge impact on bundle size but it's not that bad actually. Plus, I'll give a try to rollup now that AOT is working well and hopefully I'll get even better results!

[unsafecode]

HTH, I set up a demo repo to summarize how to make lazy routes work with @ngtools/webpack

https://github.com/unsafecode/ng2-aot

[born2net]

I am also getting the same error of:

Error: No module factory available for dependency type: ContextElementDependency

and also using lazy loaded modules...
any ideas?

angular-cli: 1.0.0-beta.26
node: 6.9.4
os: win32 x64
@angular/common: 2.4.5
@angular/compiler: 2.4.5
@angular/core: 2.4.5
@angular/forms: 2.4.5
@angular/http: 2.4.5
@angular/language-service: 2.4.5
@angular/platform-browser: 2.4.5
@angular/platform-browser-dynamic: 2.4.5
@angular/router: 3.2.1
@angular/compiler-cli: 2.4.5

Regards,

Checkout the Ultimate Angular 2 Boorstrap App: @ http://ng2.javascriptninja.io
Source@ https://github.com/born2net/ng2Boilerplate

[filipesilva]

@born2net I haven't seen that ContextElementDependency error in a few months now, I didn't think we had it anymore.

Can you open a new issue with a repo I can debug in?

[born2net]

I cleared node_modules, rebuilt project and some clean ups and now gone, so ok so far
thanks,
Sean

[imVinayPandya]

i have faced same issue but i solved it by doing following 2 things:

i have added ./ as prefix of html and css in every component file.

i am also using lazy loaded modules, so was exporting module class as default i removed default from
export default class AdminModule
and i have added

{ path: 'dashboard', loadChildren: 'app/admin/dashboard/dashboard.module#DashboardModule' },

and its working for me.

[IAMtheIAM]

No solution???

[Rosseyn]

This has been fixed for quite some time now. Update angular and angular
cli. Don't have to mess with the generator anymore either.

On Wed, Aug 9, 2017, 11:27 AM IAMtheIAM [e-mail] wrote:

No solution???

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/2452#issuecomment-321341278,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAS3eYSr13dV5cBRaUIPMVppVJMno041ks5sWfoKgaJpZM4KLlyv
.

[wbhob]

I'm experiencing a regression with Angular 5.0.0-rc.9 and CLI v1.5.0-rc.8

[Rosseyn]

Could you give more info?

Are you getting an error? Is it completing without issue but not lazy
loading?

One thing you do need to make sure of when lazy loading prod builds now is
to include @Component({ moduleId: module.id }) in all of your components.

On Tue, Oct 31, 2017, 9:24 PM Wilson Hobbs [e-mail] wrote:

I'm experiencing a regression with Angular 5.0.0-rc.9 and CLI v1.5.0-rc.8

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/2452#issuecomment-340974772,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAS3ebnrWR_YnXnxWzGSN7FkIV3qyoQbks5sx_JrgaJpZM4KLlyv
.

[wbhob]

Woah what is that @Rosseyn I have never seen the moduleId thing

[Rosseyn]

It's been around for a long while but doesn't seem to show up much in
documentation. Recently set up a new project and after enabling lazy load,
had to find this out the hard way for myself.

Does it solve the issue you're encountering?

On Tue, Oct 31, 2017, 9:45 PM Wilson Hobbs [e-mail] wrote:

Woah what is that @Rosseyn https://github.com/rosseyn I have never seen
the moduleId thing

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/2452#issuecomment-340976937,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAS3eRBbMFmfM6nTcb4rNQPp5e8kYFbDks5sx_dOgaJpZM4KLlyv
.

[andresmino]

Hi all! Do you have any update on this issue? I've tried all workaround suggested but none of those worked for me.

[wbhob]

In Angular v5, what I've found is you can't terminate the file name with .ts.

So if your RoutingModule is AuthRoutingModule in ./auth/auth-routing.module.ts, your loadChildren would be './auth/auth-routing.module#AuthRoutingModule.

[michaelkrone]

When updating to from Angular 4 to Angular 5 i kept getting

ERROR in Error: Could not resolve module [module path] relative to [routing module path]

for lazy loaded modules. Removing the .ts suffix as @wbhob suggested works.

[ctaepper]

@wbhob you are my hero! was that mentioned anywhere in breaking changes???

[MrCroft]

I had no idea it ever worked with the extension. I've never put the extension, as far as I can remember (at least since they've moved the CLI to webpack, so way back before even ending v2 releases and moving to Angular v4 I think).
As for the "deprecation", I don't remember even seeing an example using the extension in the official docs, so there would be no deprecation to be mentioned.
But I could be wrong, if my memory isn't as good as I think it is.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}