Angular 4 - 无法解析用于路由的子模块
Angular 4 - Could not resolve submodule for routing
我正在用 Angular 4 构建一个网络应用程序。我有一个顶级路由模块和每个子模块(例如 HomeModule)的单独路由模块。
这是我的顶级路由配置:
export const ROUTES: Routes = [
{path: '', loadChildren: './home#HomeModule'},
{path: '**', component: NotFoundComponent},
];
当我 运行 ng server
时,我得到一个奇怪的错误,找不到模块 home
。该应用程序无法在浏览器中运行。
奇怪的部分如下:当文件被更改并且 webpack 重新编译项目时,一切正常并且路由正常。
该错误仅在我 运行ning 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)
提前致谢。
尝试使用模块的绝对路径和模块文件名,如下所示:
export const ROUTES: Routes = [
{path: '', loadChildren: 'app/pathToYourModule/home.module.ts#HomeModule'},
{path: '**', component: NotFoundComponent},
];
我使用的是绝对路径约定:app/home#HomeModule
但它没有工作。
然后我尝试了 relative 路径约定:./home#HomeModule
并且成功了。
... in the CLI, the paths to lazy routes should be relative from the file you're in
我遵循了这个 Tutorial 并且它使用了绝对路径约定并且有效。
很想知道为什么不一致...
更新:
与 一样,要使其使用绝对路径工作,请按如下方式更新 src/tsconfig.app.json
:
{
...,
"compilerOptions": {
...,
baseUrl: "./"
}
}
您必须从对模块文件的引用中删除 .ts 后缀:
{路径:'',loadChildren:'app/pathToYourModule/home.module#HomeModule'},
我遇到了同样的问题,上面的 none 答案对我有用,我找到的最终解决方案是使用模块的绝对路径和模块 class 名称后的“#” .
export const ROUTES: Routes = [
{path: '', loadChildren: 'src/app/pathToYourModule/home.module#HomeModule'},
{path: '**', component: NotFoundComponent}
];
我从 'src' 开始路径,不要忘记从模块路径中删除“.ts”。
我遇到过类似的问题并通过从模块名称中删除扩展名 并添加相对路径.[=12 来解决=]
引发错误的代码:
const routes: Routes = [
{
path: 'settings',
loadChildren: 'app/setting/setting.module.ts#SettingsModule'
}
];
工作代码:
const routes: Routes = [
{
path: 'settings',
loadChildren: './setting/setting.module#SettingsModule'
}
];
希望对您有所帮助!
注意: 在 Angular 版本上 - 7.0.0
我遇到了这个问题,我只是忘了在文件名中添加 .module
。
我有这个:
const routes: Routes = [
/* ... */
{
path: 'page-not-found',
loadChildren: './modules/page-not-found/page-not-found#PageNotFoundModule' // <- page-not-found missing .module
},
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: '**',
redirectTo: 'page-not-found'
}
];
应该是:
const routes: Routes = [
/* ... */
{
path: 'page-not-found',
loadChildren: './modules/page-not-found/page-not-found.module#PageNotFoundModule'
},
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: '**',
redirectTo: 'page-not-found'
}
];
对于那些找不到解决方案的人,只需从 loadChildren 行中删除“.ts”扩展名即可。
{path: '', loadChildren: './home.ts#HomeModule'},
至
{path: '', loadChildren: './home#HomeModule'},
更新
从 Angular 8+ 开始,延迟加载模块有了新的语法,这是我 运行 查看旧代码示例的问题。
之前:
const routes: Routes = [
{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' }
];
截至 Angular 8+:
const routes: Routes = [
{
path: 'dashboard',
loadChildren: () =>
import('./dashboard/dashboard.module').then(m => m.DashboardModule)
}
];
Michael Hoffmann explains here
Since Angular 8 we can use the browser’s built-in dynamic imports to load JavaScript modules asynchronous in Angular. A lazy-loaded module can be defined in the routing configuration using the new import(...) syntax for loadChildren:
我有一个类似的问题,花了几天时间才解决,但我最终回去重新检查每个 statement/path 的结构。以下是我之前的内容:
{
path: 'payments',
loadChildren: './pages/service-payments/service-payments.module#ServicePaymentsPageModule'
}
然后我将路径更改如下:
{
path: 'payments',
loadChildren: '../service-payments/service-payments.module#ServicePaymentsPageModule'
}
希望对以后的人有所帮助。
我正在用 Angular 4 构建一个网络应用程序。我有一个顶级路由模块和每个子模块(例如 HomeModule)的单独路由模块。
这是我的顶级路由配置:
export const ROUTES: Routes = [
{path: '', loadChildren: './home#HomeModule'},
{path: '**', component: NotFoundComponent},
];
当我 运行 ng server
时,我得到一个奇怪的错误,找不到模块 home
。该应用程序无法在浏览器中运行。
奇怪的部分如下:当文件被更改并且 webpack 重新编译项目时,一切正常并且路由正常。
该错误仅在我 运行ning 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)
提前致谢。
尝试使用模块的绝对路径和模块文件名,如下所示:
export const ROUTES: Routes = [
{path: '', loadChildren: 'app/pathToYourModule/home.module.ts#HomeModule'},
{path: '**', component: NotFoundComponent},
];
我使用的是绝对路径约定:app/home#HomeModule
但它没有工作。
然后我尝试了 relative 路径约定:./home#HomeModule
并且成功了。
... in the CLI, the paths to lazy routes should be relative from the file you're in
我遵循了这个 Tutorial 并且它使用了绝对路径约定并且有效。
很想知道为什么不一致...
更新:
与 src/tsconfig.app.json
:
{
...,
"compilerOptions": {
...,
baseUrl: "./"
}
}
您必须从对模块文件的引用中删除 .ts 后缀: {路径:'',loadChildren:'app/pathToYourModule/home.module#HomeModule'},
我遇到了同样的问题,上面的 none 答案对我有用,我找到的最终解决方案是使用模块的绝对路径和模块 class 名称后的“#” .
export const ROUTES: Routes = [
{path: '', loadChildren: 'src/app/pathToYourModule/home.module#HomeModule'},
{path: '**', component: NotFoundComponent}
];
我从 'src' 开始路径,不要忘记从模块路径中删除“.ts”。
我遇到过类似的问题并通过从模块名称中删除扩展名 并添加相对路径.[=12 来解决=]
引发错误的代码:
const routes: Routes = [
{
path: 'settings',
loadChildren: 'app/setting/setting.module.ts#SettingsModule'
}
];
工作代码:
const routes: Routes = [
{
path: 'settings',
loadChildren: './setting/setting.module#SettingsModule'
}
];
希望对您有所帮助!
注意: 在 Angular 版本上 - 7.0.0
我遇到了这个问题,我只是忘了在文件名中添加 .module
。
我有这个:
const routes: Routes = [
/* ... */
{
path: 'page-not-found',
loadChildren: './modules/page-not-found/page-not-found#PageNotFoundModule' // <- page-not-found missing .module
},
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: '**',
redirectTo: 'page-not-found'
}
];
应该是:
const routes: Routes = [
/* ... */
{
path: 'page-not-found',
loadChildren: './modules/page-not-found/page-not-found.module#PageNotFoundModule'
},
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: '**',
redirectTo: 'page-not-found'
}
];
对于那些找不到解决方案的人,只需从 loadChildren 行中删除“.ts”扩展名即可。
{path: '', loadChildren: './home.ts#HomeModule'},
至
{path: '', loadChildren: './home#HomeModule'},
更新
从 Angular 8+ 开始,延迟加载模块有了新的语法,这是我 运行 查看旧代码示例的问题。
之前:
const routes: Routes = [
{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' }
];
截至 Angular 8+:
const routes: Routes = [
{
path: 'dashboard',
loadChildren: () =>
import('./dashboard/dashboard.module').then(m => m.DashboardModule)
}
];
Michael Hoffmann explains here
Since Angular 8 we can use the browser’s built-in dynamic imports to load JavaScript modules asynchronous in Angular. A lazy-loaded module can be defined in the routing configuration using the new import(...) syntax for loadChildren:
我有一个类似的问题,花了几天时间才解决,但我最终回去重新检查每个 statement/path 的结构。以下是我之前的内容:
{
path: 'payments',
loadChildren: './pages/service-payments/service-payments.module#ServicePaymentsPageModule'
}
然后我将路径更改如下:
{
path: 'payments',
loadChildren: '../service-payments/service-payments.module#ServicePaymentsPageModule'
}
希望对以后的人有所帮助。