Friday, 13 July 2018

Angular Load routes from API $$_lazy_route_resource lazy recursive error

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"
}
}
]



from Angular Load routes from API $$_lazy_route_resource lazy recursive error

No comments:

Post a Comment