Angular 4 - 无法解析路由的子模块 [英] Angular 4 - Could not resolve submodule for routing
问题描述
我正在使用 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.
然后我尝试了 relative 路径约定:./home#HomeModule
,它成功了.
I then tried the relative path convention: ./home#HomeModule
and it worked.
...在 CLI 中,惰性路由的路径应该是相对于您所在文件的路径
... in the CLI, the paths to lazy routes should be relative from the file you're in
我遵循了这个 Tutorial 并使用了绝对路径约定和成功了.
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 - 无法解析路由的子模块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!