Отдельные приложения Angular для клиентов и персонала

Question

Я не хочу, чтобы угловое приложение, используемое клиентами, включало в себя все, что используется персоналом:

• Было бы намного больше - код, связанный с персоналом, в 10 раз больше, чем для клиентов
• Это угроза безопасности - я не хочу, чтобы клиенты выводили, что моя система делает за кулисами (я хочу защитить свой IP)

Так что мне, вероятно, нужны два приложения - одно для клиентов, а другое для персонала. Возможно третий для общего кода. Это правильный подход?

Если так, то совет, который я нашел, состоит в том, чтобы «извлечь» и настроить веб-пакет. Но последний угол не позволяет этого.

Итак, для последней версии, как мне настроить два связанных приложения в одном проекте с третьей общей библиотекой?

---

ОБНОВЛЕНИЕ , чтобы избежать аргументов в комментариях ниже

Мне нужен один репозиторий git, над которым я работаю в vscode. Внутри у меня есть два угловых приложения (одно для клиентов и одно для персонала) и третье приложение / проект / пакет / что угодно для общего кода.

Простое ограничение доступа к конечным точкам, связанным с персоналом, не имеет смысла - хотя клиент не может получить доступ к функциям, связанным с персоналом, потому что он не является сотрудником, он все еще может ПОЛУЧИТЬ функции моей системы, потому что он может видеть код это поддерживает . Таким образом, потребность в отдельных приложениях.

У меня был вопрос, как это сделать с последней версией, потому что все ресурсы для более старых версий.

Answer 1

Я бы не рекомендовал такой подход.Всегда хорошо иметь либо 2 отдельных приложения, либо, как рекомендовано @trichetriche, использовать разрешения.

Однако, если вы настаиваете на создании двух «подприложений» в одном приложении 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

• Теперь, чтобы структурироватькод, по умолчанию угловой даст вам
  • app-routing.module.ts
  • app.component.scss
  • app.component.spec.ts
  • app.component.ts
  • app.module.ts Вам придется повторить эти же классы с app2 в качестве префикса.И ваши маршруты пойдут соответственно.

Answer 2

Вы можете создать новое рабочее пространство с разделенными проектами внутри

ng new appName --createApplication=false

Эта команда создаст пустое рабочее пространство.Затем вы можете создать два отдельных приложения и обмениваться между ними кодом.

ng g application customersApp и ng g application staffApp

Теперь у вас будет папка projects в вашем рабочем пространстве, и вы сможете запускать приложения отдельно.

ng serve customersApp --port 4200 или ng serve staffApp --port 4201

Вы можете поместить общий код в угловую библиотеку

ng g library sharedCode

Это добавит путь к tsconfig.json Тогда вы сможете использовать модули и другие экспортированные вещи в своих приложениях

Вы также можете проверить: angular 6 - лучшая практика совместного использования общего кода между проектами

Общий код там объяснен хорошо.