簡述

要進入到首頁之前，哪些模塊跟路由需要先設定。

檔案結構

-src
  |-app
    |-app.component.css
    |-app.component.html
    |-app.component.ts
    ...
    |-core
       ...
       |-core-routing.module.ts
       |-core.module.ts
    |-model
        |-data
            |-admin.ts
            |-...
        |-base.ts
        |-tab.ts
    |-cms
       |-admin
            |-...
       |-customer
            |-...
       |-index
            |-...
       |-order
            |-...
       |-product
            |-...
       |-user
            |-...
    |-cms-resolve.ts
    |-cms-routing.ts      

實作

(一) CoreModule

首先記得在模塊註冊相關。

@NgModule({
  imports: [SharedModule, TabModule, CoreRoutingModule],
  exports: [CoreComponent],
  declarations: [CoreComponent, MenuComponent],
  providers: [CoreService]
})
export class CoreModule {
  constructor(
    @Optional()
    @SkipSelf()
    parentModule: CoreModule
  ) {
    throwIfAlreadyLoaded(parentModule, "CoreModule");
  }
}

function throwIfAlreadyLoaded(parentModule: any, moduleName: string) {
  if (parentModule) {
    throw new Error(
      `${moduleName} has already been loaded`
    );
  }
}

此CoreModule宣告自己是單例模式，如果CoreModule不存在就會新創一個，
已經有的話就會用原本的。

(二) CoreRoutingModule

const routes: Routes = [
  {
    path: "cms",
    component: CoreComponent,
    canActivate: [GuardService],
    children: CmsRouting
  },
  { path: "", redirectTo: "cms", pathMatch: "full" }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: [CmsResolver]
})
export class CoreRoutingModule {}

(三) CmsRouting

import { Routes } from "@angular/router";
export const CmsRouting: Routes = [
  {
    path: "index",
    loadChildren: "src/app/cms/index/index.module#IndexModule"
  },
  {
    path: "user",
    loadChildren: "src/app/cms/user/user.module#UserModule"
  },
  {
    path: "admin",
    loadChildren: "src/app/cms/admin/admin.module#AdminModule"
  },
  {
    path: "customer",
    loadChildren: "src/app/cms/customer/customer.module#CustomerModule"
  },
  {
    path: "product",
    loadChildren: "src/app/cms/product/product.module#ProductModule"
  },
  {
    path: "order",
    loadChildren: "src/app/cms/order/order.module#OrderModule"
  }
];

(四) Base

import { IModel } from "./data";

export interface IPage {
  pageIndex: number;
  pageSize: number;
  length: number;
}

export interface IData {
  res: IModel | IModel[];
  errorcode: number;
}

• IPage物件會相對應 Angular Materia 的分頁物件。

(五) IndexModule

先簡單測試可以到首頁。

檔案結構：

-src
  |-app
    |-cms
      |-index
        |-index-routing.module.ts
        |-index.component.css
        |-index.component.html
        |-index.component.ts
        |-index.module.ts

index.component.html：

<span>hello</span>

index-routing.module.ts：

const routes: Routes = [
  {
    path: '',
    component: IndexComponent,
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class IndexRoutingModule {}

index.module.ts：

@NgModule({
  imports: [SharedModule, IndexRoutingModule],
  declarations: [IndexComponent],
  exports: [IndexComponent],
  providers: []
})
export class IndexModule {}

範例碼

https://stackblitz.com/edit/ngcms-corecomp

Start

一開始會跳出提示視窗顯示fail為正常，
請先從範例專案裡下載或是複製db.json到本地端，
並下指令：

json-server db.json

json-server開啟成功後請連結此網址：
https://ngcms-corecomp.stackblitz.io/cms?token=bc6e113d26ce620066237d5e43f14690