以角度正确实施管理面板

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

见proxy.conf.json：

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

最后你有这样的东西

.

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