Question

我是Angular的新手，正在编写我的第一个 Angular 应用程序。我希望此“应用”具有三种布局：Public，Mumb和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
....

我希望 URL 如：

公共：
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-博客详细信息
管理员：

....

“ 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中生成public-article模块，在admin中生成admin-article模块，对吗？

Answer 1

项目架构：-

    const luisApplication = {
        applicationId: luisConfig.appId,
        endpointKey: luisConfig.subscriptionKey || luisConfig.authoringKey,
        endpoint: luisConfig.getEndpoint()
    };

    // Create configuration for LuisRecognizer's runtime behavior.
    const luisPredictionOptions = {
        includeAllIntents: true,
        log: true,
        staging: false
    };

this.luisRecognizer = new LuisRecognizer(luisApplication, luisPredictionOptions , true);

变化不大：-

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

app.routing.ts

.ts,.html,.spec,.scss,.routing, .module files in Project architecture

app.component.html

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

<router-outlet></router-outlet>

MainLayout.routing.ts

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

MainLayout.module.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);

其他任何模块：-

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

任何Module.ts

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

article.component.html

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

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

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

1 个答案: