How to set router in multiple levels lazy loading of ANGULAR 6

Question

I am new to Angular and writing my first Angular application. I want this 'app' have three layouts : Public , Mumber and Admin. I created project like:

|-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
....

I hope URLs like:

Public:
http://localhost:4200 --public home
http://localhost:4200/articles --article home
http://localhost:4200/articles/category/1 --article list
http://localhost:4200/article/12 --article detail
Member:
http://localhost:4200/member/memberId --member home
http://localhost:4200/member/memberId/blogs --blog list
http://localhost:4200/member/memberId/blog/blogId --blog detail
admin:

....

Contents of 'app-routing.module.ts':

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

contents of public-routing.module.ts

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

}

Contents of article-routing.module.ts

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

But questions is coming: the actually result is

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

I think the question is the contents of public-routing.module.ts, how can i change it? Another question: when i config routing of public-routing.module.ts and admin-routing.module.ts the angular cli throw:

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

I think i should generate public-article module in public and admin-article module in admin, is it right?

user_8864728 · Answer

Project architecture:-

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

Little change:-

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

Each Module has- .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

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 { }

Any other Modules:-

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

Any Module.ts

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

article.component.html

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