Angular Load routes from API $$_lazy_route_resource lazy recursive error

Question

I am getting the error: Cannot find module

'src/app/settings/settings.module'.
    at eval (eval at ./src/$$_lazy_route_resource lazy recursive

When trying to add lazy loaded modules from my api. What makes this difficult for me to debug is the fact that when I tried this on StackBlitz, It seems to work just fine. Here is a link to my project: Dynamic routes from API However, When I move the project out of StackBlitz and re-create it on my pc, I get the error.

It is important to mention that when I posted my routes that come from the API below, you will see that they include 'src' before 'app' for the lazy loaded module(settings.module) this is done only because StackBlitz has a nested 'src' folder. Also, If you try to export my project, you will need to add the directory 'src' to the 'main' property of the angular-cli.json file. I am not sure how this may be affecting the modules. I have been at this for days, and any help would be greatly appreciated.

I am using a service like so:

import {
  Injectable,
  Compiler,
  NgModuleFactory,
  NgModuleFactoryLoader,
  Injector,
  NgModuleRef,
} from '@angular/core';
import { Router } from '@angular/router';
import { ApiRoute } from '../models/apiroutes.interface';

@Injectable()
export class ModuleFactoryLoader {
  private moduleRef: NgModuleRef<any>;
  constructor(
    private loader: NgModuleFactoryLoader,
    private injector: Injector,
    private router: Router,
  ) {
  }

  load(apiRoute: ApiRoute): void {
    this.loader.load(apiRoute.loadChildren).then(moduleFactory => {
      this.moduleRef = moduleFactory.create(this.injector).instance;
      this.router.config.unshift({
        path: apiRoute.path,
        loadChildren: apiRoute.loadChildren,
      });
      console.debug('moduleRef', this.moduleRef);
    }).catch(err => {
        console.error('error loading module', err);
      });
  }
}

and My routes that come from my (mock) api are:

[
{
path: "test",
component: "TestComponent",
data: {
icon: "check"
}
},
{
path: "settings",
loadChildren: "src/app/settings/settings.module#SettingsModule"
},
{
path: "home",
component: "HomeComponent",
data: {
icon: "home"
}
},
{
path: "self-service",
component: "RouteSelfServiceComponent",
data: {
icon: "build"
}
}
]

The version of Angular running on my pc is:

Angular CLI: 6.0.8 Node: 8.9.1 OS: win32 x64 Angular: ...

Package Version ------------------------------------------------------ @angular-devkit/architect 0.6.8 @angular-devkit/core 0.6.8 @angular-devkit/schematics 0.6.8 @schematics/angular 0.6.8 @schematics/update 0.6.8 rxjs 6.2.1 typescript 2.7.2

package.json:

{
  "name": "angular-template",
  "description": "",
  "homepage": "https://stackblitz.com/edit/angular-dynamic-components-and-routes",
  "dependencies": {
    "@angular/animations": "6.0.5",
    "@angular/cdk": "6.3.0",
    "@angular/common": "6.0.0",
    "@angular/compiler": "6.0.0",
    "@angular/core": "6.0.0",
    "@angular/forms": "6.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "6.3.0",
    "@angular/platform-browser": "6.0.0",
    "@angular/platform-browser-dynamic": "6.0.0",
    "@angular/router": "6.0.0",
    "core-js": "2.5.5",
    "file-system": "2.2.2",
    "fs": "0.0.2",
    "path": "0.12.7",
    "rxjs": "6.1.0",
    "util": "0.11.0",
    "zone.js": "0.8.26"
  },
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "^6.0.8",
    "@angular/compiler-cli": "^1.7.4",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "angular-router-loader": "^0.8.5",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.4.2"
  }
}

Here is the error produced(error ONLY on local. no problems on StackBlitz):

Which version of Angular you have on your PC ? Is it upgraded ? — Nery Ortez, Jul 13 '18 at 04:27
https://stackoverflow.com/questions/48947314/lazy-load-angular-5-error-lazy-route-resource-lazy-recursive/49859686#49859686 — Radonirina Maminiaina, Jul 13 '18 at 13:02
Could you update your question with Angular version + angular-cli version? — Radonirina Maminiaina, Jul 13 '18 at 13:03
I have updated the link and made sure it works, I also added the angular pand pc version that I am using. Thank you for the assistance. — Kevin192291, Jul 13 '18 at 13:38
Thanks man! I feel like this makes sense to do from a testing standpoint as it is easy to move the data from staging to prod and with no code changes. — Kevin192291, Jul 19 '18 at 13:42

Guerric P · Answer 1 · 2018-07-13T16:59:43.027

You can't do what you want to achieve with Angular CLI, because the Angular CLI build doesn't compile modules that are not referenced.

When building your project, there is no JS chunk associated with the SettingsModule, except when we define a route before runtime.

I've found a demo project that does what you try to do here but it doesn't use the Angular CLI build, it uses tsc && concurrently \"tsc -w\" \"http-server . -c-1 \" instead.

And I don't know which build pipeline StackBlitz uses, but it's certainly not the Angular CLI.

You can try the typescript compilation only, but it won't solve the problem for an AOT production build and you'll be forced to use your own custom build

Antonio · Accepted Answer · 2018-07-19T14:40:52.517

I managed to make it work in local, Here it is what I did:

ng new myFirstApp

then I copied the app folder in the newly angular 6 project and I renamed angular-cli.json into angular.json

As in router-loader.service.ts I could not make it work the API_ENDPOINTS I copied the content

 of([
    {
      "path": "test",
      "component": "TestComponent",
      "data": {
        "icon": "check"
      }
    },
    {
      "path": "settings",
      "loadChildren": "src/app/settings/settings.module#SettingsModule"
    },
    {
      "path": "home",
      "component": "HomeComponent",
      "data": {
        "icon": "home"
      }
    },
    {
      "path": "self-service",
      "component": "RouteSelfServiceComponent",
      "data": {
        "icon": "build"
      }
    }
  ])
.toPromise()...

I pushed it on github

https://github.com/antoniocasino/dynamicly-load-modules

This looks great, I added a param to the constructor of the message component and it broke, I think something is still a bit wacky with the injector but I am sure that can be figured out quite quickly. Thanks for the awesome response! — Kevin192291, Jul 19 '18 at 17:22

Angular Load routes from API $$_lazy_route_resource lazy recursive error

2 Answers2