时间戳

首页 > 解决方案 > 为客户和员工提供单独的 Angular 应用程序

angular - 为客户和员工提供单独的 Angular 应用程序

问题描述

我不希望客户使用的 Angular 应用程序包含员工使用的所有内容：

所以我可能需要两个应用程序——一个给客户，一个给员工。也许三分之一用于共享代码。这是正确的方法吗？

如果是这样，我发现的建议是“弹出”并调整 webpack。但是最新的角度不允许这样做。

那么对于最新的角度，我如何在同一个项目中设置两个相关的应用程序，以及第三个共享库？

更新以避免下面评论中的论点

我想要一个 git repo，我在 vscode 中工作。在里面我有两个 Angular 应用程序（一个用于客户，一个用于员工）和第三个应用程序/项目/包/任何共享代码。

仅仅限制对员工相关端点的访问是荒谬的——尽管客户因为不是员工而无法访问员工相关的功能，但他仍然可以 INFER 我的系统的功能，因为他可以看到支持它的代码。因此需要单独的应用程序。

我的问题是如何使用最新的 Angular 来做到这一点，因为所有资源都适用于旧版本。

标签： angularangular-cli

解决方案

我不会推荐这种方法。拥有 2 个独立的应用程序，或者按照 @tricheriche 的建议，使用权限总是好的。

但是，如果您坚持在同一个 Angular 应用程序中构建两个“子应用程序”，则必须遵循以下步骤：

  • 您需要将两个应用程序都包含在您的 中.angular-cli.json，因此它看起来像这样：
"apps": [
    { "name":"app1",
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main-resolver.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css",
       "../node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },
    { "name":"app2",
      "root": "src",
      "outDir": "dist2",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main-luxury.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css",
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

这样，您就告诉您的 CLI 您有 2 个独立的应用程序，可以使用以下命令构建/提供这些应用程序： ng serve/build --app app1和ng serve/build --app app2

如果您要同时运行它们，请确保指定端口号，因为 Angular 默认在端口 4200 上为应用程序提供服务

所以要为他们服务，你必须 ng serve --app app1 ng serve --app app2 --port 4201

  • 现在来构建代码，默认情况下 angular 会给你
    • app-routing.module.ts
    • app.component.scss
    • app.component.spec.ts
    • app.component.ts
    • app.module.ts 您必须复制这些相同的类app2作为前缀。您的路线将相应地进行。

推荐阅读