代码之家 › 专栏 › 技术社区 › lonix

为客户和员工提供单独的角度应用程序

angular-cli angular

0

lonix · 技术社区 · 7 年前

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

它会大得多-员工相关代码比客户的代码大10倍
这是一个安全风险-我不想让客户推断我的系统在幕后做了什么(我想保护我的IP)

所以我可能需要两个应用程序——一个是给客户的,一个是给员工的。可能是共享代码的第三个。这是正确的方法吗?

如果是这样,我发现的建议是“弹出”和调整Webpack。 但最新的角度不允许这样。

因此,对于最近的Angular,我如何在同一个项目中设置两个相关的应用程序,以及第三个共享的lib?

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

我想要一个单一的git repo,我在vscode中工作。在内部,我有两个Angular应用程序(一个用于客户,另一个用于员工),第三个应用程序/项目/包/任何用于共享代码的应用程序。

仅仅限制对员工相关端点的访问是无稽之谈——尽管客户无法访问员工相关功能,因为他不是员工, 他仍然可以推断我的系统的特性,因为他可以看到支持它的代码 。因此需要单独的应用程序。

我的问题是如何用最新的角度来实现这一点,因为所有的资源都是针对旧版本的。

0 回复 | 直到 7 年前

1

Josef KatiÄ 7 年前

您可以创建一个新的工作区,其中包含单独的项目

ng new appName --createApplication=false

此命令将创建空工作区。然后您可以创建两个独立的应用程序并在它们之间共享代码。

ng g application customersApp 和 ng g application staffApp

现在你就有了 projects 文件夹,您可以单独运行应用程序。

ng serve customersApp --port 4200 或 ng serve staffApp --port 4201

您可以将共享代码放入Angular库中

ng g library sharedCode

它将向tsconfig.json添加路径然后你就可以在你的应用程序中使用模块和其他导出的东西了。

您还可以检查: angular 6 - best practice of sharing common code between projects

共享代码在那里解释得很好。

2

1

TheLebDev 7 年前

我不推荐这种方法。最好有两个单独的应用程序,或者按照@trichtriche的建议,使用权限。

但是,如果您坚持在同一个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,您有两个独立的应用程序,可以使用以下命令构建/提供这些应用程序: ng serve/build --app app1 和 ng serve/build --app app2

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

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

现在要构造代码,默认情况下,角度会给你
- app-routing.module.ts
- app.component.scss
- app.component.spec.ts
- app.component.ts
- app.module.ts 您必须用 app2 作为前缀。你的路线也会相应地走。