Angular 4 - 无法解析路由的子模块

Question

我正在使用Angular 4构建一个webapp.我有一个顶级路由模块和一个单独的路由模块,用于每个子模块(例如HomeModule).

这是我的顶级路由配置:

export const ROUTES: Routes = [
  {path: '', loadChildren: './home#HomeModule'},
  {path: '**', component: NotFoundComponent},
];

当我跑ng server,我得到一个奇怪的错误,home找不到该模块.该应用程序无法在浏览器中运行.

奇怪的部分如下:当文件被更改并且webpack重新编译项目时,一切正常并且路由工作.
该错误仅在我运行时出现ng serve.

这是我运行时遇到的错误ng serve,而不是因为文件更改而重新编译项目的错误:

ERROR in Error: Could not resolve module ./home relative to /path/to/my/project/src/app/app.module.ts
    at StaticSymbolResolver.getSymbolByModule (/path/to/my/project/node_modules/@angular/compiler/bundles/compiler.umd.js:31884:30)
    at StaticReflector.resolveExternalReference (/path/to/my/project/node_modules/@angular/compiler/bundles/compiler.umd.js:30350:62)
    at parseLazyRoute (/path/to/my/project/node_modules/@angular/compiler/bundles/compiler.umd.js:28616:55)
    at listLazyRoutes (/path/to/my/project/node_modules/@angular/compiler/bundles/compiler.umd.js:28578:36)
    at visitLazyRoute (/path/to/my/project/node_modules/@angular/compiler/bundles/compiler.umd.js:29995:47)
    at AotCompiler.listLazyRoutes (/path/to/my/project/node_modules/@angular/compiler/bundles/compiler.umd.js:29963:20)
    at AngularCompilerProgram.listLazyRoutes (/path/to/my/project/node_modules/@angular/compiler-cli/src/transformers/program.js:157:30)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/path/to/my/project/node_modules/@angular/compiler-cli/src/ngtools_api.js:44:36)
    at AngularCompilerPlugin._getLazyRoutesFromNgtools (/path/to/my/project/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:247:66)
    at Promise.resolve.then.then (/path/to/my/project/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:538:50)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

提前致谢.

Answer 1

我使用的是绝对路径约定:app/home#HomeModule它没有用.

然后我尝试了相对路径约定:./home#HomeModule它起作用了.

...在CLI中,延迟路由的路径应该与您所在的文件相对

资源

我按照这个教程,它使用绝对路径约定,它工作.

很想知道为什么不一致......

更新:

正如弗里德里希所说,要使用绝对路径使其工作,请更新src/tsconfig.app.json如下:

{
  ...,
  "compilerOptions": {
    ...,
    baseUrl: "./"
  }
}

Answer 2

我有同样的问题,上面的答案都没有对我有用,我找到的最终解决方案是在'#'之后使用模块的绝对路径和模块类名.

    export const ROUTES: Routes = [
       {path: '', loadChildren: 'src/app/pathToYourModule/home.module#HomeModule'},
       {path: '**', component: NotFoundComponent}
     ];

我从'src'开始路径,不要忘记从模块路径中删除'.ts'.

Answer 3

您必须从模块文件的引用中删除.ts后缀:{path:'',loadChildren:'app/pathToYourModule/home.module#HomeModule'},