angular - 正确的管理面板实现 Angular

Question

我刚刚完成了使用 Angular 4 创建的应用程序的前端部分。我现在正在创建一个管理面板，它将有一个单独的登录页面和两个或三个组件。起初我创建了一个新模块，并使用路由器创建了一些"/admin" 路由。问题是应用程序组件具有我不需要的 header 。使用 *ngIf 来检查当前的 URL 似乎太偏僻了。为管理页面简单地创建第二个 Angular 应用程序 是否更好？什么是最好的方法？

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路径下的admin项目，参见base tag .这是必需的，因为在构建之后您将拥有两个不同的应用程序，并且它们不能同时通过相同的路径提供服务
• 我们有两个端口:4200 和 4201 用于同时运行应用程序，如果您同时运行这两个应用程序，则使用代理服务来自 4200 的 /admin/ 部分

请参阅 proxy.conf.json:

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

最后你有这样的东西

.

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