[英]Angular 5 feature modules nested routing
I'm building a web application that contains several feature modules (for modularity). 我正在构建一个包含多个功能模块的Web应用程序(用于模块化)。 I'm having a hard time getting the routing to work. 我很难让路由工作。 I currently have 2 modules, a root module and a login module. 我目前有2个模块,一个根模块和一个登录模块。 The login module contains a few components: 登录模块包含一些组件:
App.module.ts App.module.ts
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {LoginModule} from './login/login.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
LoginModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
App-routing.module.ts APP-routing.module.ts
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
const routes: Routes = [
{
path: 'login',
loadChildren: './login/login-routing.module#LoginRoutingModule'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes,
{enableTracing: true}
)],
exports: [RouterModule]
})
export class AppRoutingModule {}
login-routing.module.ts 登录-routing.module.ts
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {LoginBaseComponent} from '../login/login-base/login-base.component';
const routes: Routes = [
{
path: '',
component: LoginBaseComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class LoginRoutingModule {}
When I test the routing by visiting the /login url, I get redirected to the app root with the following error in the console: 当我通过访问/ login url测试路由时,我被重定向到应用程序根目录,并在控制台中出现以下错误:
ERROR Error: Uncaught (in promise): TypeError: __webpack_require__.e is not a function
TypeError: __webpack_require__.e is not a function
at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), <anonymous>:19:29)
I'm stuck, I have no clue how to proceed. 我被卡住了,我不知道如何继续。
Any ideas will be greatly appreciated! 任何想法将不胜感激!
Remove all imports of your Lazy Loaded Module from you root module. 从根模块中删除所有导入的延迟加载模块。
App.module.ts App.module.ts
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
You also want to load your LoginModule
not the login router module 您还想加载LoginModule
而不是登录路由器模块
App-routing.module.ts APP-routing.module.ts
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
const routes: Routes = [
{
path: 'login',
loadChildren: './login/login.module#LoginModule'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes,
{enableTracing: true}
)],
exports: [RouterModule]
})
export class AppRoutingModule {}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.