Как настроить роутер на несколько уровней ленивой загрузки ANGULAR 6

Question

Я новичок в Angular и пишу свое первое 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
....

Я надеюсь URLs как:

• Public:
• http://localhost:4200 -общественный дом
• http://localhost:4200/articles - домашний товар
• http://localhost:4200/articles/category/1 - список статей
• http://localhost:4200/article/12 - статья подробно
• Участник:
• http://localhost:4200/member/memberId - главная страница
• http://localhost:4200/member/memberId/blogs - список блогов
• http://localhost:4200/member/memberId/blog/blogId - подробности блога
• admin:

....

Содержимое файла 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'
  }
]

}

Содержимое article-routing.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:

ОШИБКА в Дублированном пути в loadChildren обнаружено: «./article/article.module#ArticleModule» используется в 2 loadChildren

Я думаю, что я должен создать модуль public-article в public и модуль admin-article в admin, правильно?

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