角度正确的管理面板实现

Question

我刚刚完成了我正在使用 Angular 4 创建的应用程序的前端部分。我现在正在创建一个管理面板，该面板将具有一个单独的登录页面和两个或三个组件。一开始我创建了一个新模块并使用路由器创建了一些"/admin"路由。问题是应用程序组件有 我不需要的标题。使用 *ngIf 检查当前 URL 似乎太过贫民窟了。为管理页面简单创建第二个角度应用程序会更好吗？最好的方法是什么？

Answer 1

这个问题相当广泛，但我会尝试用多个应用程序来涵盖这个案例。

拥有多个应用的​​优势：

• 管理应用程序通常很重，用户的应用程序通常非常优化。所以将代码分成两个应用程序真的很有帮助：客户端只是不加载管理模块
• 您只能运行管理员或客户端应用程序 - 当项目变得足够繁重时，这确实可以节省时间
• 共享模块可以获得不同的全局配置，因为它们在不同的应用程序中引导。所以这更灵活

缺点：

• 初始配置步骤需要一些知识和时间投入

对于 angular-cli，您可以使用以下方法。在 .angular-cli.json 中创建两个应用程序（参见 json schema）。你应该有类似的东西

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "..."
  },
  "apps": [
    {
      "name": "default",
      "root": "src",
      "outDir": "ci/dist-default",
      "assets": [...],
      "index": "index.html",
      "main": "main-default.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [...],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },
    {
      "name": "admin",
      "root": "src",
      "outDir": "ci/dist-admin",
      "assets": [...],
      "index": "index.html",
      "main": "main-admin.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [...],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  ...
}

为管理面板创建您的app-admin.module.ts 和app-admin.component.ts，这主要是复制粘贴您的原始模块。然后你需要创建另一个main-admin.ts 文件来导入app-admin.module.ts。

最好为 app1 和 app2 设置两个单独的文件夹。

就是这样！现在您有两个应用程序可以在一个项目中使用相同的代码库。

那么是时候调整你的 package.json 脚本了：

  "scripts": {
    "ng": "ng",
    "start-admin": "ng serve --proxy-config=proxy.conf.json --app=admin --base-href=/admin/ --port=4201",
    "start-default": "ng serve --proxy-config=proxy.conf.json --app=default",
    "start": "concurrently --kill-others 'npm run start-default' 'npm run start-admin'",
    "build-admin": "ng build --app=admin --base-href=/admin/",
    "build-default": "ng build --app=default",
    "build": "concurrently 'npm run build-default' 'npm run build-admin'",
    "build-prod": "concurrently 'npm run build-default -- -prod' 'npm run build-admin -- -prod'"
  },

一些解释：

• app参数使用app名称构建
• base-href 用于定位/admin 路径下的管理项目，参见base tag。这是必需的，因为在构建之后，您将拥有两个不同的应用，并且它们不能同时由同一路径提供服务
• 我们有两个端口：4200 和 4201 用于同时运行应用程序，如果您同时运行这两个应用程序，则使用代理服务 4200 中的 /admin/ 部分

参见 proxy.conf.json：

{
  "/admin": {
    "target": "http://localhost:4201",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {
      "^/admin": ""
    }
  },
  "...": "..."
}

最后你有这样的东西

.

这需要一些技巧和对代理的理解。此外，您还需要使用 /admin 路径的相同代理设置来配置您的实时服务器。然而它真的很值得，我用了很长一段时间，不能说它是一个糟糕的解决方案

Answer 2

只需将application-nav-header 移动到单独的组件中。

• application.component.html

<alert-component></alert-component> <!-- Place there what is shared between `public` and `admin` --> <router-outlet></router-outlet>

• public.component.html

<public-nav-header-component></public-nav-header-component> <!-- NavHeader that customers can see --> <router-outlet></router-outlet>

• admin.component.html

<admin-nav-header-component></admin-nav-header-component> <!-- AdminNavHeader --> <router-outlet></router-outlet>

• application.routes.ts

[ {path: "/", component: PublicComponent}, {path: "/admin", component: AdminComponent} ]

• admin.routes.ts

[ {path: "/login", component: LoginComponent}, {path: "/user-listing", component: UserListingComponent} ]

• public.routes.ts - 将您当前的 application.routes 移至此处