Angular 来自API$$\u lazy\u route\u资源的角度加载路由延迟递归错误

我收到错误：找不到模块

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

尝试从我的api添加延迟加载的模块时。 让我难以调试的是，当我在StackBlitz上尝试此功能时，它似乎工作得很好。 以下是指向我的项目的链接： 然而，当我将项目移出StackBlitz并在我的pc上重新创建它时，我得到了错误

值得一提的是，当我发布来自下面API的路由时，您将看到它们在延迟加载模块（settings.module）的“app”之前包含“src”。之所以这样做，是因为StackBlitz有一个嵌套的“src”文件夹。此外，如果尝试导出我的项目，则需要将目录“src”添加到angular-cli.json文件的“main”属性中。我不确定这会对模块造成什么影响。 我已经在这里工作了好几天，如果有任何帮助，我将不胜感激

我正在使用这样的服务：

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);
      });
  }
}

我的电脑上Angular running的版本为：

Angular CLI:6.0.8节点：8.9.1操作系统：win32 x64 Angular:

软件包版本 ------------------------------------------------------@angular devkit/architect 0.6.8@angular devkit/core 0.6.8 @角度devkit/schematics 0.6.8@schematics/angular 0.6.8 @示意图/更新0.6.8 rxjs 6.2.1 打字稿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"
  }
}

以下是产生的错误（仅本地错误。StackBlitz没有问题）：

---

由于Angular CLI构建不会编译未引用的模块，因此无法使用Angular CLI实现您想要实现的功能

构建项目时，除了在运行时之前定义路由时，没有与设置模块相关联的JS块

我发现了一个演示项目，它完成了您尝试执行的操作，但它没有使用Angular CLI构建，而是使用了

tsc&&concurrent\'tsc-w\'httpserver.-c-1\'

我不知道StackBlitz使用哪种构建管道，但肯定不是Angular CLI

---

您只能尝试typescript编译，但它无法解决AOT生产版本的问题，您将被迫使用自己的自定义版本， 这就是我所做的：

ng new myFirstApp

然后，我复制了新angular 6项目中的app文件夹，并将angular-cli.json重命名为angular.json

正如在router-loader.service.ts中一样，我无法使其在复制内容的API_端点上工作

 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()...

我把它推到github上

---

stackblitz链接已断开，您的电脑上有哪个版本的Angular？它升级了吗？你能用Angular版本+Angular cli版本更新你的问题吗？动态路由/组件演示非常酷。这看起来很棒，我在消息组件的构造函数中添加了一个参数，结果它坏了。我认为注入器仍然有点古怪，但我相信可以很快解决。谢谢你的回复！

 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()...