angular6 - 如何在 ANGULAR 6 的多级延迟加载中设置路由器

Question

我是 Angular 新手，正在编写我的第一个 角度 应用。
我希望这个“应用程序”具有三种布局:Public、Mumber 和 Admin。
我创建了如下项目:

|-src
|-app
    |-public(module)
        |-home(module)
            |-pages(foler)
                |-index(component folder)
                    |-index.component.ts(like a controler include the selector of article-list component and product-list component, inject article service and product service)
            |-components
                |-article-list(component folder)
                    |-article-list.component.css
                    |-article-list.component.html
                    |-article-list.component.ts
                |-product-list(component folder)
                    |-product-list.component.css
                    |-product-list.component.html
                    |-product-list.component.ts
            |-home-routing.module.ts
            |-home.component.ts
            |-home.module.ts
        |-article(module)
            |-pages(folder)
                |-index(component folder)
                    |-index.component.ts(like a controler include the selector of article-list component, inject article service)
                |-list-by-category(component folder)
                    |-list-by-category.component.ts(like a controler loop category and include the selector of article-list component, inject article service)
                |-detail(component folder)
                    |-detail.component.ts(like a controler include the selector of article-detail component, inject article service)
            |-components(folder)
                |-article-list(component folder)
                    |-article-list.component.css
                    |-article-list.component.html
                    |-article-list.component.ts
                |-article-detail(component folder)
                    |-article-detail.component.css
                    |-article-detail.component.html
                    |-article-detail.component.ts
            |-article-routing.module.ts
            |-article.component.ts
            |-article.module.ts
        |-product(module)
            |-pages(folder)
                |-index(component folder)
                    |-index.component.ts(like a controler include the selector of product-list component, inject product service)
                |-list-by-category(component folder)
                    |-list-by-category.component.ts(like a controler loop category and include the selector of product-list component, inject product service)
                |-detail(component folder)
                    |-detail.component.ts(like a controler include the selector of product-detail component, inject product service)
            |-components(folder)
                |-product-list(component folder)
                    |-product-list.component.css
                    |-product-list.component.html
                    |-product-list.component.ts
                |-product-detail(component folder)
                    |-product-detail.component.css
                    |-product-detail.component.html
                    |-product-detail.component.ts
            |-product-routing.module.ts
            |-product.component.ts
            |-product.module.ts
        |-shared(folder)
            |-components
                |-header(component folder)
                |-footer(component folder)
            |-services
                |-article.service.ts
                |-product.service.ts
            |-models
                |-article-list-item.ts
                |-article-detail.ts
                |-product-list-item.ts
                |-product-detail.ts
        |-public-routing.module.ts
        |-public.component.ts
        |-public.module.ts
    |-member(module)
        |-blog(module)
            |-pages
            |-components
            |-blog-routing.module.ts
            |-blog.component.ts
            |-blog.module.ts
        |-album(module)
            |-pages
            |-components
            |-album-routing.module.ts
            |-album.component.ts
            |-album.module.ts
        |-shared(folder)
            |-components
            |-services
            |-models
        |-member-routing.module.ts
        |-member.component.ts
        |-member.module.ts
    |-admin(module)
        |-dashboard(module, like the home module in public module)
        |-article(module)
            |-pages
            |-components
            |-article-routing.module.ts
            |-article.component.ts
            |-article.module.ts
        |-product(module)
            |-pages
            |-components
            |-product-routing.module.ts
            |-product.component.ts
            |-product.module.ts
        |-shared(folder)
            |-components
            |-services
            |-models
        |-admin-routing.module.ts
        |-admin.component.ts
        |-admin.module.ts
    |-app-routing.module.ts
    |-app.components.ts
    |-app.module.ts
index.html
....

希望 网址 像:

公众号:

http://localhost:4200 --公共(public)主页

http://localhost:4200/articles --文章首页

http://localhost:4200/articles/category/1 --文章列表

http://localhost:4200/article/12 --文章详情

成员(member):

http://localhost:4200/member/memberId --成员(member)首页

http://localhost:4200/member/memberId/blogs --博客列表

http://localhost:4200/member/memberId/blog/blogId --博客详情

管理员:

……

'app-routing.module.ts' 的内容:

{
    path: 'member',
    loadChildren: './member/member.module#MemberModule'
  },
  {
    path: 'admin',
    loadChildren: './admin/admin.module#AdminModule'
  },
  {
    path:'',
    loadChildren:'./public/public.module#PublicModule'
  }

public-routing.module.ts 的内容

{
path: '',
component: PublicComponent,
children: [
  {
    path: 'article',
    loadChildren: './article/article.module#ArticleModule'
  },
  {
    path: 'product',
    loadChildren: './product/product.module#ProductModule'
  }
]

}

的内容|文章路由.module.ts

{
    path: 'category/:id',
    component: ListByCategoryComponent
  },
  {
    path: 'article/:id',
    component: DetailComponent
  },
  {
    path: '',
    component: IndexComponent
  }

但问题来了:
实际结果是

public:
http://localhost:4200 --public home
http://localhost:4200/article --article home
http://localhost:4200/article/category/1 --article list
http://localhost:4200/article/12 --article detail

我认为问题是 public-routing.module.ts 的内容，我该如何更改它？
另一个问题:当我配置 public-routing.module.ts 和 admin-routing.module.ts 的路由时，角度 cli 抛出:

ERROR in Duplicated path in loadChildren detected: "./article/article.module#ArticleModule" is used in 2 loadChildren

我想我应该在 public 中生成 public-article 模块，在 admin 中生成 admin-article 模块，对吗？

Answer 1

项目架构:-

app Module > Public Module > Home Module > Article Module etc:--
           > Member Module > Blog Module  > Album Module etc:--
           > Admin Module  > dashboard Module > Product Module etc:-

变化不大:-

app Module> LayoutModule >   
                        > Public Module > Home Module > Article Module etc:
                        > Member Module > Blog Module  > Album Module etc:--
                        > Admin Module  > dashboard Module > Product Module etc:-

每个模块都有- .ts,.html,.spec,.scss,.routing, .module files in Project architecture
app.routing.ts

import { NgModule, ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
export const routes: Routes = [
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: 'error',
  }
];
export const Routing: ModuleWithProviders = RouterModule.forRoot(routes, { useHash: true });

app.component.html

<router-outlet></router-outlet>

app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MainLayoutModule ,
    Routing,
    GrowlModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

MainLayout.routing.ts

export const routes: Routes = [
    {
        path: '',
        component: MainLayoutComponent,
        children: [
            { path: '', redirectTo: 'public', pathMatch: 'full' },
            { path: 'public', loadChildren: './public/public.module#PublicModule' },
            { path: 'home', loadChildren: './home/home.module#HomeModule' },
             { path: 'article', loadChildren: './article/article.module#articleModule' },
            { path: 'memeber', loadChildren: './memeber/memeber.module#memeberModule' },
            '
            '
            '
            '    
        ]
    }
];
export const PrgRouting = RouterModule.forChild(routes);

MainLayout.module.ts

@NgModule({
  imports: [
    CommonModule,
    PrgRouting,
  ],
  declarations: [
    MainLayoutComponent,
  ],
  providers: []
})
export class MainLayoutModule { }

任何其他模块:-

export const routes: Routes = [
    {
        path: '',
        component: ArticleComponent,
        children: [
            { path: 'pages', component: PagesComponent },
             { path: 'mucomponent', component: MyComponent }
        ]
    }
];
export const routing = RouterModule.forChild(routes);

任何 Module.ts

@NgModule({
  imports: [
    CommonModule,
    routing,
    SharedModule
  ],
  declarations: [ArticleComponent]
})
export class ArticleModule { }

article.component.html

<router-outlet></router-outlet>

引用:- https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html