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

问题描述

我正在使用Angular 4构建一个Web应用.我有一个顶级路由模块，并且每个子模块(例如HomeModule)都有一个单独的路由模块.

I'm building a webapp with Angular 4. I have a top-level routing module and a separate routing module for each submodule (e.g. HomeModule).

这是我的顶级路由配置:

This is my top-level routing configuration:

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

运行ng server时，出现一个奇怪的错误，找不到模块home.该应用程序无法在浏览器中运行.

When I run ng server, I get a strange error, that module home was not found. The app does not work in the browser.

以下是一个奇怪的部分:更改文件并webpack重新编译项目时，一切正常，并且路由也正常.
该错误仅在我运行ng serve时出现.

The strange part is the following: When a file is changed and webpack recompiles the project, everything works just fine and the routing works.
The error does only appear when I'm running ng serve.

这是我在运行ng serve时遇到的错误，而不是由于文件更改而重新编译项目时出现的错误:

This is the error I get when I'm running ng serve, not when the project is recompiled because of a file change:

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)

谢谢.

推荐答案

我使用的是绝对路径约定:app/home#HomeModule，它不起作用.

I was using the absolute path convention: app/home#HomeModule and it wasn't working.

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

I then tried the relative path convention: ./home#HomeModule and it worked.

来源

我遵循了这个教程，它使用了绝对路径约定和它奏效了.

I followed this Tutorial and it used the absolute path convention and it worked.

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

Would love to know why the inconsistency...

更新:

如 Friedrich所述，使用绝对路径可以使其正常工作，更新src/tsconfig.app.json如下:

As Friedrich mentioned, to make it work using an Absolute Path, update src/tsconfig.app.json as follows:

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

这篇关于Angular 4-无法解析子模块进行路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！