Angular upgrade to version 7 lazy loaded module cannot be found

@filipesilva

Bug, feature request, or proposal:
After upgrading to angular 7, I received an error saying that the after login module is not being found to be loaded lazily.

What is the expected behavior?

To upgrade to angular 7 without changing anything in codes and scripts regarding module and routing files.

What is the current behavior?

Error at the console after clicking on Login, that the module is not found, despite that it was working in the previous version (Angular 6).

What are the steps to reproduce?

https://stackblitz.com/edit/angular-7-lazy-loading-soshba

Is there anything else we should know?

UPDATE On my question

I have added "BaseUrl": "./", to tsconfig.app.json and I got the following error:

error TS5023: Unknown compiler option 'BaseUrl'.

I think they mean in tsconfig.json and the baseUrl already added in.

END of Update

I updated my angular project to angular 7 using the following commands:

npm install @angular/animations@latest @angular/common@latest
    @angular/compiler@latest @angular/core@latest @angular/forms@latest 
    @angular/http@latest @angular/platform-browser@latest 
    @angular/platform-browser-dynamic@latest 
    @angular/platform-server@latest 
    @angular/router@latest --save

And:

npm install @angular-devkit/build-angular@latest 
@angular/compiler-cli@latest 
@angular/cli@latest 
@angular/language-service@latest --save-dev

And:

npm install core-js@latest zone.js@latest --save

And:

npm install @types/jasmine@latest @types/node@latest 
codelyzer@latest karma@latest karma-chrome-launcher@latest 
karma-cli@latest karma-jasmine@latest 
karma-jasmine-html-reporter@latest 
jasmine-core@latest jasmine-spec-reporter@latest 
protractor@latest tslint@latest --save-dev

And:

npm install typescript@latest --save-dev
npm install rxjs@latest rxjs-compat@latest --save

npm install rxjs-tslint@latest --save-dev

The resulting package.json is:

{
  "name": "angular",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.3",
    "@angular/animations": "^7.0.3",
    "@angular/cdk": "^7.0.3",
    "@angular/common": "^7.0.3",
    "@angular/compiler": "^7.0.3",
    "@angular/core": "^7.0.3",
    "@angular/flex-layout": "^7.0.0-beta.19",
    "@angular/forms": "^7.0.3",
    "@angular/http": "^7.0.3",
    "@angular/material": "^7.0.3",
    "@angular/material-moment-adapter": "^7.0.3",
    "@angular/platform-browser": "^7.0.3",
    "@angular/platform-browser-dynamic": "^7.0.3",
    "@angular/platform-server": "^7.0.3",
    "@angular/router": "^7.0.3",
    "angularx-qrcode": "^1.2.4",
    "bootstrap": "^4.1.3",
    "core-js": "^2.5.7",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "html2canvas": "^1.0.0-alpha.12",
    "jspdf": "^1.4.1",
    "moment": "^2.22.2",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "tether": "^1.4.4",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.10.5",
    "@angular/cli": "^7.0.5",
    "@angular/compiler-cli": "^7.0.3",
    "@angular/language-service": "^7.0.3",
    "@types/jasmine": "^2.8.11",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^10.12.3",
    "codelyzer": "^4.5.0",
    "jasmine-core": "^3.3.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^3.1.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^1.0.1",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "^1.1.2",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "^5.4.1",
    "rxjs-tslint": "^0.1.5",
    "ts-node": "~5.0.1",
    "tslint": "^5.11.0",
    "typescript": "^3.1.6",
    "webpack": "^4.25.1"
  }
}

On ng serve --port=8000 I am getting the following error:

core.js:12584 ERROR Error: Uncaught (in promise): Error: Cannot find
module '../app/dashboard/dashboard.module' Error: Cannot find module
'../app/dashboard/dashboard.module'
at $_lazy_route_resource lazy namespace object:5
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke
(zone.js:388)
at Object.onInvoke (core.js:14143)
at

It was working when I was using Angular 6, and i received it only after upgrading.

I tried the solution mentioned on github:

Efectively, there are three posible solutions:

a) Using relative path loadChildren: './...

b) Using absolute path starting with loadChildren: 'src/app/...

c) tsconfig.app.json --> BaseUrl: "./"

And neither of them worked for me.

Here is my startup routing file:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path:'',
    component: LoginComponent
  },
  {
    path: 'forgot',
    component: ForgotPasswordComponent
    //canActivate: [AuthGuardService]
  },
  {
    path:'dashboard',
    loadChildren: './app/dashboard/dashboard.module#DashboardModule'
    
  },
  {
    path: '**',
    redirectTo: 'login',
    pathMatch: 'full'
  }
];

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

Am I missing an upgrade or Angular 7 implies us to change routing urls for a specific new form?

Quoting another solution from the github answer which assume that the problem is from the form of baseUrl:

@filipesilva I saw your commit angular/devkit@33af719 The property has
moved from tsconfig.app.json to src/tsconfig.json file, but not it's
value ./, therefore newly generated v6 apps by CLI wont be able to
find lazy load modules with paths defined as lazy load documentation.

I suggest this change. It preserves baseUrl: "./" on tsconfig.json and
each project have its tsconfig.app.json that overwrites baseUrl
property. I hope this is aligned with the multiprojects approach and
tooling.

If you prefere to use relative url for loadChildren, It should be
updated on documentation and tutorial.

baseUrl not BaseUrl. It's case-sensitive.

baseUrl not BaseUrl. It's case-sensitive.

Okay fixed it in the tsconfig.app.ts but still having the same problem.

Same problem. The compiler has not generated chunk files for lazy modules.

Thanks for the issue, however, this is really hard to follow. Please create a new issue with minimal steps to reproduce. Linking to a StackBlitz without giving any steps to actually do doesn't tell us how to reproduce this issue.

Also, please don't include the a paste of commands. Instead, the reproduction should reproduce the issue directly.

If the above still produces the problem, please create a new issue including the actual steps to reproduce with the minimum required items.

Closing this issue as it doesn't comply with the template and is difficult to take action on.

I had the same issue. Try to load child module like this, this worked for me.
{ path : 'account/information', loadChildren: () => AccountInformationModule }

UPD: Sorry, this is not actually lazy loading. Need to find another solution.

I had the same issue. Try to load child module like this, this worked for me.
{ path : 'account/information', loadChildren: () => AccountInformationModule }

Not working in AOT.
I am getting the following error:
main.6bbb8e3847272062f17e.js:1 ERROR Error: Uncaught (in promise): Error: Runtime compiler is not loaded Error: Runtime compiler is not loaded at Ai (main.6bbb8e3847272062f17e.js:1) at t.compileModuleAsync (main.6bbb8e3847272062f17e.js:1) at e.project (main.6bbb8e3847272062f17e.js:1) at e._tryNext (main.6bbb8e3847272062f17e.js:1) at e._next (main.6bbb8e3847272062f17e.js:1) at e.next (main.6bbb8e3847272062f17e.js:1) at t._subscribe (main.6bbb8e3847272062f17e.js:1) at t._trySubscribe (main.6bbb8e3847272062f17e.js:1) at t.subscribe (main.6bbb8e3847272062f17e.js:1) at t.call (main.6bbb8e3847272062f17e.js:1) at Ai (main.6bbb8e3847272062f17e.js:1) at t.compileModuleAsync (main.6bbb8e3847272062f17e.js:1) at e.project (main.6bbb8e3847272062f17e.js:1) at e._tryNext (main.6bbb8e3847272062f17e.js:1) at e._next (main.6bbb8e3847272062f17e.js:1) at e.next (main.6bbb8e3847272062f17e.js:1) at t._subscribe (main.6bbb8e3847272062f17e.js:1) at t._trySubscribe (main.6bbb8e3847272062f17e.js:1) at t.subscribe (main.6bbb8e3847272062f17e.js:1) at t.call (main.6bbb8e3847272062f17e.js:1) at j (polyfills.71df7d5eaf99b7072328.js:1) at j (polyfills.71df7d5eaf99b7072328.js:1) at polyfills.71df7d5eaf99b7072328.js:1 at e.invokeTask (polyfills.71df7d5eaf99b7072328.js:1) at Object.onInvokeTask (main.6bbb8e3847272062f17e.js:1) at e.invokeTask (polyfills.71df7d5eaf99b7072328.js:1) at t.runTask (polyfills.71df7d5eaf99b7072328.js:1) at d (polyfills.71df7d5eaf99b7072328.js:1)

I had the same issue. Try to load child module like this, this worked for me.
{ path : 'account/information', loadChildren: () => AccountInformationModule }

UPD: Sorry, this is not actually lazy loading. Need to find another solution.

I've managed to fix this issue by deleting webpack from devDependencies and installing webpack globally.

I had the same issue. Try to load child module like this, this worked for me.
{ path : 'account/information', loadChildren: () => AccountInformationModule }

Not working in AOT.
I am getting the following error:
main.6bbb8e3847272062f17e.js:1 ERROR Error: Uncaught (in promise): Error: Runtime compiler is not loaded Error: Runtime compiler is not loaded at Ai (main.6bbb8e3847272062f17e.js:1) at t.compileModuleAsync (main.6bbb8e3847272062f17e.js:1) at e.project (main.6bbb8e3847272062f17e.js:1) at e._tryNext (main.6bbb8e3847272062f17e.js:1) at e._next (main.6bbb8e3847272062f17e.js:1) at e.next (main.6bbb8e3847272062f17e.js:1) at t._subscribe (main.6bbb8e3847272062f17e.js:1) at t._trySubscribe (main.6bbb8e3847272062f17e.js:1) at t.subscribe (main.6bbb8e3847272062f17e.js:1) at t.call (main.6bbb8e3847272062f17e.js:1) at Ai (main.6bbb8e3847272062f17e.js:1) at t.compileModuleAsync (main.6bbb8e3847272062f17e.js:1) at e.project (main.6bbb8e3847272062f17e.js:1) at e._tryNext (main.6bbb8e3847272062f17e.js:1) at e._next (main.6bbb8e3847272062f17e.js:1) at e.next (main.6bbb8e3847272062f17e.js:1) at t._subscribe (main.6bbb8e3847272062f17e.js:1) at t._trySubscribe (main.6bbb8e3847272062f17e.js:1) at t.subscribe (main.6bbb8e3847272062f17e.js:1) at t.call (main.6bbb8e3847272062f17e.js:1) at j (polyfills.71df7d5eaf99b7072328.js:1) at j (polyfills.71df7d5eaf99b7072328.js:1) at polyfills.71df7d5eaf99b7072328.js:1 at e.invokeTask (polyfills.71df7d5eaf99b7072328.js:1) at Object.onInvokeTask (main.6bbb8e3847272062f17e.js:1) at e.invokeTask (polyfills.71df7d5eaf99b7072328.js:1) at t.runTask (polyfills.71df7d5eaf99b7072328.js:1) at d (polyfills.71df7d5eaf99b7072328.js:1)

This solution worked for me: angular/angular-cli#9680 (comment)

I had a similar issue, for me what worked as turning off enableIvy. I set up the router as specified in this

in tsconfig.json I enabled ivy via

  "angularCompilerOptions": {
    "enableIvy": true
  }

and I believe that for the Ivy compiler, the way you set up lazy loaded modules in your router modules is different. After commenting out this out, the route with the lazy loaded module worked as expected.

I believe I have also come across this issue.
I do not have ivy enabled, but I have just explicitly turned it off.

I also saw the thread and the options

a) Using relative path loadChildren: './...
b) Using absolute path starting with loadChildren: 'src/app/...
c) tsconfig.app.json --> BaseUrl: "./"

"a" was already being done.
"c" didn't net me any real results, even with baseUrl: "./"

I can see in the chrome dev tools that my routes are 100% loading from the wrong place. Did you ever get this resolved. Do you have any ideas?

I had the same issue and it turns out to be that Angular 7 is malfunctioning for lazy loading if a function is directly used as value for useValue in the providers in app.module.ts.

providers: [ { provide: SOMETHING, useValue: { property_name: () => alert(), }, },]

The fix is straightforward. Convert the above to be

const alertValue = { property_name: () => alert(), }; providers: [ { provide: SOMETHING, useValue: alertValue, },]

Having this same issue. I upgraded from 6 to 7 right after it came out. Everything works fine as long as I exclude "enableIvy": true. If ivy is enabled it fails to resolve lazy loaded modules.

The error Message is: zone.js:192 Uncaught Error: Cannot find module './pos/pos-app.module'

The relevant bit of router code is:

  {
    loadChildren: './pos/pos-app.module#PosAppModule',
    path: 'pos',
    canActivate: [PosDeviceGuardService],
  },

I've tried

setting baseUrl in tsconfig.json
setting baseUrl in tsconfig.app.json
different alternative path prefixes in the router ../, ./src/app/, ./src/, ./app/, etc

I have zero providers with useValue outside of spec files, and none that use a function.

No luck. Everything still works perfectly if I just disable ivy, but that's not exactly a "fix" just a way to avoid the broken code path.

No luck. Everything still works perfectly if I just disable ivy, but that's not exactly a "fix" just a way to avoid the broken code path.

I've solved this issue by the following steps:

update global angular-cli npm i -g @angular/cli@latest
create pure ng project ng new sample
take dependency there and replace in the necessary project
reinstall node_modules with new dependencies

I don't know why but it worked for me

No luck. Everything still works perfectly if I just disable ivy, but that's not exactly a "fix" just a way to avoid the broken code path.

I've solved this issue by the following steps:

update global angular-cli npm i -g @angular/cli@latest

create pure ng project ng new sample

take dependency there and replace in the necessary project

reinstall node_modules with new dependencies

I do't now why but it worked for me

This is because ivy is not activated in the sample app.

Update, had to turn off Ivy for lazyloading, still not working.

Take a look to the Ivy dev progress by benbraou:
https://is-angular-ivy-ready.firebaseapp.com/#/status

Having 3 modules that are lazy loaded. The ProjectsModule and AdminModule works perfectly.
It seems like the issue is only with the MapsModule.

I've also tried setting the baseUrl with no success and ivy is off. Any suggestions?

Angular : 7.2.3
Typescript : 3.1.1
Angular-cli : 7.3.0

Update
In my case it appears that the issue was with one of the sub modules (npm package) imported to the MapsModule.
Solving the issue with the sub module fixed the issue for me.

Don't know if this is the same problem but for anyone experiencing what we were experiencing over here:

We were building an array of children routes to put into multiple spots in our router. This way you could access a user's profile for example from multiple routes.

The act of building the array of multiple routes was ending up at the "Module not found" error SOMETIMES, but not all the time. (Thinking race condition)

We fixed this by making a constant of the shared children routes and combining them with the tab specific routes. Example:

const subRoutes = [
  {
    path: 'u/:user_id',
    loadChildren: '../user-detailed/user-detailed.module#UserDetailedPageModule'
  }
];

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'users',
        children: [
              { path: '', loadChildren: './tab-users/tab-users.module#TabUsersPageModule' }, 
              ...subRoutes
             ]
      }
    ]
  }
];

Hi,
After upgrading Angular 5 to Angular 7, lazy loading doesn't work, but following change works.

From
loadChildren: './pages/profile/profile.module#ProfileModule'
to
loadChildren: () => ProfileModule

Is it correct? Is it lazy loading?
EDIT: Found the solution from https://stackoverflow.com/a/53128336

EDIT2: Sorry, I didn't read above comments, this change is not lazy module feature. I reverted back.
I think, code is ok, problem related to "@angular-devkit/build-angular". I give you screenshot:

You see here there is no any lazy module chunk file.

However, after ctrl + s (save) on the routing file, lazy loading works. Very Strange Behaviour! Screenshot:

Hi,
I experienced strange issues using the Lazy Loading as described in the guide, I mean the import syntax so I decided to use the './path/to/module#ModuleName' one.
With the default tsconfig.json no modules chunks generated in prod build (with aot).
Changing tsconfig.json as below did the trick

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "module": "es2015", 
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "importHelpers": true,
    "target": "es2015",
    "lib": [
      "es2018",
      "dom"
    ] 
  }
}

IMHO the issue come from the module loader you choose not the code syntax.
Digging deeper, webpack may be the source of the issue

Webpack lazy loading
As described at the bottom of the page an extra link is provided related to es2015.

In order to eagerly load modules with a function reference when AOT enabled for Angular 7, you need to create an NgFactory module as you can see from this PR - #13909.

A working solution for me was creating a clone of my module and adding .ngfactory postfix to the filename and also adding NgFactory postfix to the module class name.

import { FirstPageModuleNgFactory } from '../pages/first-page.module.ngfactory';
import { SecondPageModuleNgFactory } from '../pages/second-page.module.ngfactory';

export function loadFirstPageModule() {
    return FirstPageModuleNgFactory;
}

export function loadSecondPageModule() {
    return SecondPageModuleNgFactory;
}

const routes: Routes = [
    {
        path: '',
        component: HomePageComponent,
        children: [
            {
                path: '',
                redirectTo: 'first',
                pathMatch: 'full',
            },
            {
                path: 'first',
                loadChildren: loadFirstPageModule,
            },
            {
                path: 'second',
                loadChildren: loadSecondPageModule,
            },
        ],
    },
];

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.}

Navigation Menu

Repository navigation

Angular upgrade to version 7 lazy loaded module cannot be found #27023

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

Is there anything else we should know?

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Angular upgrade to version 7 lazy loaded module cannot be found #27023

Description

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

Is there anything else we should know?

Activity

sarunint commented on Nov 9, 2018

alim90 commented on Nov 9, 2018

AlexWalkerson commented on Nov 13, 2018

jasonaden commented on Nov 13, 2018

vherever commented on Nov 14, 2018

mujicajuancarlos commented on Nov 14, 2018

vherever commented on Nov 14, 2018

vherever commented on Nov 14, 2018

tomtrung commented on Nov 15, 2018

PikaChokeMe commented on Dec 10, 2018

JiahaoShan commented on Dec 19, 2018

itslenny commented on Dec 20, 2018

AlexWalkerson commented on Dec 20, 2018

riorudo commented on Jan 21, 2019

luigi198 commented on Feb 1, 2019

kadosh1000 commented on Feb 6, 2019

saggio89 commented on May 8, 2019

ceyhunn commented on May 10, 2019

pierre-fromager commented on Jun 29, 2019

onderceylan commented on Jul 25, 2019

angular-automatic-lock-bot commented on Sep 15, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions