子模块中缺少父模块路由 url
Missing parent module route url in child module
Angular 的新手并尝试在模块中构建我的代码。
我有一个管理模块响应
/admin
请求,现在我正在尝试将另一个子模块添加到 Admin 模块,称为 Portfolio Module。
这有效,除了我想要投资组合模块来响应
/admin/portfolio
请求。现在它响应
/portfolio
改为请求。
我在这里导入 PortfolioModule
admin.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminRoutingModule } from './admin-routing.module';
import { IndexComponent } from './shared/index/index.component';
import {PortfolioModule} from './portfolio/portfolio.module';
@NgModule({
declarations: [IndexComponent],
imports: [
CommonModule,
PortfolioModule,
AdminRoutingModule
]
})
export class AdminModule { }
认为我可能需要将 PortfolioModule 定义为子路由。在管理路线内。
admin-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IndexComponent } from './shared/index/index.component';
const routes: Routes = [
{
path: 'admin',
component: IndexComponent,
children: [
{
path: 'portfolio',
/*Maybe add Portfolio Module here?*/
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AdminRoutingModule { }
这是我的作品集模块,没什么特别的。
portfolio.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PortfolioRoutingModule } from './portfolio-routing.module';
import { IndexComponent } from './index/index.component';
import { CreateComponent } from './create/create.component';
import { ListComponent } from './list/list.component';
import { UpdateComponent } from './update/update.component';
@NgModule({
declarations: [IndexComponent, CreateComponent, ListComponent, UpdateComponent],
imports: [
CommonModule,
PortfolioRoutingModule
]
})
export class PortfolioModule { }
最后是我的组合路由,也许我在这里遗漏了一些东西,告诉它包含父路由。
投资组合-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IndexComponent } from './index/index.component';
import { ListComponent } from './list/list.component';
import { CreateComponent } from './create/create.component';
import { UpdateComponent } from './update/update.component';
const routes: Routes = [
{
path: 'portfolio',
component: IndexComponent,
children: [
{
path: 'list',
component: ListComponent
},
{
path: 'create',
component: CreateComponent
},
{
path: 'update',
component: UpdateComponent
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PortfolioRoutingModule { }
当你延迟加载时,模块路径的根应该在声明延迟加载模块的模块的路由中。
例如,path: 'portfolio'
将被声明为 admin-routing.module
中的路由,而 IndexComponent
的 portfolio-routing.module
将有一个空路径(path: ''
).此外,children
属性可能不是必需的,因为所有路由都在同一级别。
您的路由可能看起来像这样。
应用-routing.module
...
const routes: Routes = [
{
path: 'admin',
loadChildren: './admin/admin.module#AdminModule'
}
]
...
admin-routing.module
...
const routes: Routes = [
{
path: '',
component: AdminIndexComponent
},
{
path: 'portfolio',
loadChildren: './portfolio/portfolio.module#PortfolioModule'
}
]
...
投资组合-routing.module
...
const routes: Routes = [
{
path: '',
component: PortfolioIndexComponent
},
{
path: 'create',
component: PortfolioCreateComponent
}
]
...
我还在下面链接了这个示例的工作堆栈闪电战以及 angular 延迟加载功能模块的指南文档。
Angular 的新手并尝试在模块中构建我的代码。 我有一个管理模块响应
/admin
请求,现在我正在尝试将另一个子模块添加到 Admin 模块,称为 Portfolio Module。
这有效,除了我想要投资组合模块来响应
/admin/portfolio
请求。现在它响应
/portfolio
改为请求。
我在这里导入 PortfolioModule
admin.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminRoutingModule } from './admin-routing.module';
import { IndexComponent } from './shared/index/index.component';
import {PortfolioModule} from './portfolio/portfolio.module';
@NgModule({
declarations: [IndexComponent],
imports: [
CommonModule,
PortfolioModule,
AdminRoutingModule
]
})
export class AdminModule { }
认为我可能需要将 PortfolioModule 定义为子路由。在管理路线内。
admin-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IndexComponent } from './shared/index/index.component';
const routes: Routes = [
{
path: 'admin',
component: IndexComponent,
children: [
{
path: 'portfolio',
/*Maybe add Portfolio Module here?*/
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AdminRoutingModule { }
这是我的作品集模块,没什么特别的。
portfolio.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PortfolioRoutingModule } from './portfolio-routing.module';
import { IndexComponent } from './index/index.component';
import { CreateComponent } from './create/create.component';
import { ListComponent } from './list/list.component';
import { UpdateComponent } from './update/update.component';
@NgModule({
declarations: [IndexComponent, CreateComponent, ListComponent, UpdateComponent],
imports: [
CommonModule,
PortfolioRoutingModule
]
})
export class PortfolioModule { }
最后是我的组合路由,也许我在这里遗漏了一些东西,告诉它包含父路由。
投资组合-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IndexComponent } from './index/index.component';
import { ListComponent } from './list/list.component';
import { CreateComponent } from './create/create.component';
import { UpdateComponent } from './update/update.component';
const routes: Routes = [
{
path: 'portfolio',
component: IndexComponent,
children: [
{
path: 'list',
component: ListComponent
},
{
path: 'create',
component: CreateComponent
},
{
path: 'update',
component: UpdateComponent
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PortfolioRoutingModule { }
当你延迟加载时,模块路径的根应该在声明延迟加载模块的模块的路由中。
例如,path: 'portfolio'
将被声明为 admin-routing.module
中的路由,而 IndexComponent
的 portfolio-routing.module
将有一个空路径(path: ''
).此外,children
属性可能不是必需的,因为所有路由都在同一级别。
您的路由可能看起来像这样。
应用-routing.module
...
const routes: Routes = [
{
path: 'admin',
loadChildren: './admin/admin.module#AdminModule'
}
]
...
admin-routing.module
...
const routes: Routes = [
{
path: '',
component: AdminIndexComponent
},
{
path: 'portfolio',
loadChildren: './portfolio/portfolio.module#PortfolioModule'
}
]
...
投资组合-routing.module
...
const routes: Routes = [
{
path: '',
component: PortfolioIndexComponent
},
{
path: 'create',
component: PortfolioCreateComponent
}
]
...
我还在下面链接了这个示例的工作堆栈闪电战以及 angular 延迟加载功能模块的指南文档。