頁面架構

外掛頁面於 webpack-exposes.config.js 內的設定為單一module進入點，所以管理者、使用者與手機端共只有 3 個進入點、3 份module檔案，且名稱固定，僅在專案內檔案位置可自行定義。

webpack-exposes.config.js

const exposes = {
  web: {
    // ./PageAdmin 名稱固定，為管理者端進入點
    './PageAdmin': './src/app/web/pages/admin/admin.module.ts',
    // ./PageUser 名稱固定，為使用者端進入點
    './PageUser': './src/app/web/pages/user/user.module.ts',
  },
  app: {
    // ./Page 名稱固定，為手機端進入點
    './Page': './src/app/mobile/pages/page.module.ts',
  }
};

檔案位置可以任意搬動，也可修改檔案名稱，但檔案內的module名稱不可更動 - 管理者端須為AdminModule - 使用者端須為UserModule - 手機端為PageModule

進入點設置方式

以UserModule為例，在空路由的情況下，即 /user/plugin/[codePath] 會自動導至 lobby 大廳頁面。

user.module.ts

import { LobbyPage } from "./lobby.page";
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";

@NgModule({
  imports: [
    RouterModule.forChild([
      { path: "", redirectTo: "lobby", pathMatch: "full" },
      { path: "lobby", component: LobbyPage },
    ]),
  ],
  declarations: [LobbyPage],
})
export class UserModule {}