Angular 5 Update breaks lazy loading of modules

Question

We have just upgraded our application from Angular 4 to Angular 5.2.6 The application was built with Angular CLI and CLI recently updated to 1.6.8.

Our application uses lazy loading for some modules. This used to work perfectly with Angular 4, but we are now seeing some strange behaviour.

The application is split into two areas (modules) on of which is 'admin'. The admin module is then also split into modules, one of which is loaded synchronously, the rest lazy.

The issue is with the lazy loaded module: UsersModule.

const routes: Routes = [
  {
    path: 'admin',
    redirectTo: '/admin/requests',
    pathMatch: 'full'
  },
  {
    path: 'admin',
    component: AdminComponent,
    canActivate: [AuthAdminGuard],
    children: [
      {
        path: 'requests',
        // syncrhronous because we always hit this route first
        loadChildren: () => RequestsModule, 
        data: { title: 'Requests' }
      },
      {
        path: 'users',
        loadChildren: './users/users.module#UsersModule',
        data: { title: 'Users' }
      },

When the application is built a chunk is created for the users module.

When the user navigates to the 'admin.users' path the application loads the chunk into the head of the page and it is available in the browser source explorer.

BUT the application does not load the module, instead an error is displayed in the console.

Error: Cannot find 'UsersModule' in './users/users.module'

BUT if we remove the module name #UsersModule

I.e. if the module routing is updated from

   {
        path: 'users',
        loadChildren: './users/users.module#UsersModule',
        data: { title: 'Users' }
      },

to

  {
            path: 'users',
            loadChildren: './users/users.module',
            data: { title: 'Users' }
          },

The application reloads and now users module is loaded correctly...??

But if we first start with this configuration, no chunk is created for users module...???

NOTE Lazy loaded modules are NOT Imported into parent module.

EDIT Package.json

 "dependencies": {
    "@agm/core": "^1.0.0-beta.2",
    "@angular-devkit/core": "^0.4.2",
    "@angular/animations": "^5.2.6",
    "@angular/common": "^5.2.6",
    "@angular/compiler": "^5.2.6",
    "@angular/core": "^5.2.6",
    "@angular/forms": "^5.2.6",
    "@angular/http": "^5.2.6",
    "@angular/platform-browser": "^5.2.6",
    "@angular/platform-browser-dynamic": "^5.2.6",
    "@angular/platform-server": "^5.2.6",
    "@angular/router": "^5.2.6",
    "@cloudinary/angular-5.x": "^1.0.1",
    "@google-cloud/storage": "^1.3.0",
    "@types/google-maps": "^3.2.0",
    "@types/googlemaps": "^3.26.14",
    "@types/underscore": "^1.8.1",
    "angularfire2": "4.0.0-rc.1",
    "cloudinary": "^1.9.0",
    "cloudinary-core": "^2.3.0",
    "core-js": "^2.4.1",
    "firebase": "4.1.2",
    "material-design-lite": "^1.3.0",
    "raven-js": "^3.16.1",
    "rxjs": "^5.5.6",
    "underscore": "^1.8.3",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.7.3",
    "@angular/compiler-cli": "^5.2.6",
    "@types/jasmine": "^2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "^2.0.1",
    "cpx": "^1.5.0",
    "ejs": "^2.5.6",
    "husky": "^0.15.0-rc.8",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "onchange": "^3.3.0",
    "prettier": "1.10.2",
    "pretty-quick": "^1.4.1",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "2.4.2"
  }

This is a bit of a guess. Try changing your `loadChildren` path from `'./users/users.module#UsersModule'` to `'app/users/users.module#UsersModule'` (app in front). I know this shouldn't matter, but it could be worth a try. — R. Richards, Mar 11 '18 at 02:40
Can you show your package.json file?. Did you have a look here too? https://github.com/gdi2290/angular-starter/issues/1936 — David, Mar 11 '18 at 07:17
Yes, have looked through that. We are currently not ejected though (cli) and would prefer to stay that way if possible. — Kildareflare, Mar 11 '18 at 19:59

score 0 · Answer 1 · answered Mar 11 '18 at 23:12

0

Make sure that you are not import UsersModule in Parent Module. If you are using lazy loading then import is unnecessary and will cause problems.

answered Mar 11 '18 at 23:12

DiPix

5,755
15
61
108

score 0 · Answer 2 · answered Mar 12 '18 at 01:42

This is a known issue with Angular CLI v1.7.x. I hope it's being worked on, but there are several bug reports found at the official GitHub repo (eg. Issue #9825).

I'm not sure if you are having problems with the dev server or the production build, but I personally have trouble loading the dev server using ng serve. However, I was able to fix this using ng serve --aot. My production build works fine (ng build --prod). This Stack Overflow post was where I found the solution.

score 0 · Answer 3 · answered Mar 28 '18 at 15:25

0

I had the same error, this was because the BrowserModule was declared in the main module and in the one that i wanted to lazy loading.

answered Mar 28 '18 at 15:25

Joffrey Hernandez

1,809
3
21
39

Angular 5 Update breaks lazy loading of modules

3 Answers3