Lazy loading of modules giving error

[ilivestrong]

Hi,

I have upgraded to the latest version of Angular CLI - 1.5.4 and Angular 5. I am not able to workout a simple app, which lazily load modules.

Strangely, if I comment some code, the app gets recompiled and works perfectly. Even if I uncomment, what I commented before, it runs smoothly without any error. But if I stop npm and restart my app, I face same issue again.

Is it something at build time?

Angular-CLI - 1.5.4

<!--
ERROR in Error: Could not resolve module src/feature-module-one/feature1.module relative to E:/Build Learn Conquer/tests/testAOTModules/src/app/app.module.ts
    at StaticSymbolResolver.getSymbolByModule (E:\Build Learn Conquer\tests\testAOTModules\node_modules\@angular\compiler\bundles\compiler.umd.js:31884:30)
    at StaticReflector.resolveExternalReference (E:\Build Learn Conquer\tests\testAOTModules\node_modules\@angular\compiler\bundles\compiler.umd.js:30350:62)
    at parseLazyRoute (E:\Build Learn Conquer\tests\testAOTModules\node_modules\@angular\compiler\bundles\compiler.umd.js:28616:55)
    at listLazyRoutes (E:\Build Learn Conquer\tests\testAOTModules\node_modules\@angular\compiler\bundles\compiler.umd.js:28578:36)
    at visitLazyRoute (E:\Build Learn Conquer\tests\testAOTModules\node_modules\@angular\compiler\bundles\compiler.umd.js:29995:47)
    at AotCompiler.listLazyRoutes (E:\Build Learn Conquer\tests\testAOTModules\node_modules\@angular\compiler\bundles\compiler.umd.js:29963:20)
    at AngularCompilerProgram.listLazyRoutes (E:\Build Learn Conquer\tests\testAOTModules\node_modules\@angular\compiler-cli\src\transformers\program.js:157:30)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (E:\Build Learn Conquer\tests\testAOTModules\node_modules\@angular\compiler-cli\src\ngtools_api.js:44:36)
    at AngularCompilerPlugin._getLazyRoutesFromNgtools (E:\Build Learn Conquer\tests\testAOTModules\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:247:66)
    at Promise.resolve.then.then (E:\Build Learn Conquer\tests\testAOTModules\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:538:50)
    at process._tickCallback (internal/process/next_tick.js:103:7)

webpack: Failed to compile.
-->

Repro steps

• Lazily load an angular module
• ng serve

Observed behavior

<!-- Normally this includes a stack trace and some more information. -->

Desired behavior

Mention any other details that might be useful (optional)

[elvisbegovic]

Can you maybe reproduce here https://stackblitz.com/edit/angular-gitter-pdkcvh or give more infos about your routes ?

[ilivestrong]

routes defined in app.module.ts

const appRoutes: Routes = [
    { path: "**", component: NotFound404, pathMatch: 'full' },
     { path: 'expense', loadChildren: 'src/expense/expense.module#ExpenseModule' },
     { path: 'user', loadChildren: 'src/user/user.module#UserModule' }
];

routes defined in featured module:

export const expenseRoutes: Routes = [

    { path: 'expense', component: ExpenseGroupComponent },
    { path: 'expense/:id', component: ExpenseGroupComponent },
    { path: 'expensesheet', component: ExpenseSheetComponent },
    { path: 'expensesheet/:id', component: ExpenseSheetComponent }
];

[ilivestrong]

@istiti - Also, I tried the same stuff on the link you provided, it worked without any compilation error. Not sure what I messed up on my system.

[filipesilva]

Can you try using relative paths? At the moment you're using full paths from the project root and that isn't really supported.

[ilivestrong]

@filipesilva - It was working fine with full paths from the project root. It's only after my angular upgrade to 5, things broke.

Please see the attached .rar file of my small app(please run npm install to install all dependencies). May be you get better idea of what is the culprit.

Thanks.

EPManager.zip

[filipesilva]

I understand that the absolute paths might have been working but I don't think it was ever the intention. Did you try with relative paths?

[Mage111]

I'm using relative paths, and also have the same issue after upgrading to angular 5

[Greatshock]

+1

[Yura13]

I have the same error after upgrading to angular 5.

ERROR in Error: Could not resolve module app/admin/admin.module.ts relative to C:/Projects/mean-app/src/app/app-routing.module.ts
    at StaticSymbolResolver.getSymbolByModule (C:\Projects\mean-app\node_modules\@angular\compiler\bundles\compiler.umd.js:29765:30)
    at StaticReflector.resolveExternalReference (C:\Projects\mean-app\node_modules\@angular\compiler\bundles\compiler.umd.js:31610:62)
    at parseLazyRoute (C:\Projects\mean-app\node_modules\@angular\compiler\bundles\compiler.umd.js:29049:55)
    at listLazyRoutes (C:\Projects\mean-app\node_modules\@angular\compiler\bundles\compiler.umd.js:29011:36)
    at visitLazyRoute (C:\Projects\mean-app\node_modules\@angular\compiler\bundles\compiler.umd.js:31175:47)
    at AotCompiler.listLazyRoutes (C:\Projects\mean-app\node_modules\@angular\compiler\bundles\compiler.umd.js:31143:20)
    at AngularCompilerProgram.listLazyRoutes (C:\Projects\mean-app\node_modules\@angular\compiler-cli\src\transformers\program.js:156:30)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\Projects\mean-app\node_modules\@angular\compiler-cli\src\ngtools_api.js:44:36)
    at AngularCompilerPlugin._getLazyRoutesFromNgtools (C:\Projects\mean-app\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:248:66)
    at Promise.resolve.then.then (C:\Projects\mean-app\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:571:50)
    at process._tickCallback (internal/process/next_tick.js:109:7)

Here is src/app/app-routing.module.ts:

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent, canActivate: [LoginGuard] },
  { path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule', canLoad: [AdminGuard] },
  { path: '**', redirectTo: '' }
];

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

Build will finish successfully if delete this line:
{ path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule', canLoad: [AdminGuard] }

Also changing to relative path didn't help.

[Yura13]

I found the reason of this error.
You should change all lazyload modules in your application like this example (remove .ts):
admin.module.ts#AdminModule => admin.module#AdminModule
If you change only one parent lazyload module (but not syntax of child lazyload modules), you have the same error related to parent module:
Could not resolve module app/admin/admin.module.ts relative to C:/Projects/mean-app/src/app/app-routing.module.ts

But I have a question:
Why after any changes and recompile (not stop and typing ng serve) application will start and work?
I think the error message needs to show in this case also.

[PrashanthAvasarala]

https://stackoverflow.com/questions/47601637/angular-4-could-not-resolve-submodule-for-for-routing
We have a solution here