Angular: изменение templateUrl и styleUrls для NG serve и Deploy

Question

У меня есть базовый код, который я внедряю для многих клиентов с индивидуальным стилем и шаблоном для каждого. для каждого компонента у меня есть такая конфигурация:

@Component({
    selector: 'app-header',
    templateUrl: './customer1.header.component.html',
    styleUrls: ['./customer1.header.component.scss']
})

Каждый раз, когда мне приходится работать с другим клиентом, я должен вручную изменять templateUrl / styleUrls для каждого компонента.

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

Я хотел бы установить переменную окружения, чтобы задать шаблон клиента и использовать его при запуске ng serve или при развертывании кода для определенного c клиента.

Answer 1

Когда angular компилируется, он превращает templateUrl и styleUrls в код. Поэтому невозможно будет изменить их во время выполнения так, как вы это делаете.

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

Одним из решений может быть

Используя функцию fileReplacements из angular cli, вы можете создать файл для каждого клиента.

// customers/customer.customer1.ts
export const customer = {
  customerName: 'Customer 1'
}

и в вашем angular. json вы добавляете конфигурацию для каждого клиента

// angular.json
"myappname": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "configurations": {
            "customer1": {
              "fileReplacements": [
                {
                  "replace": "apps/myappname/src/customers/customer.ts",
                  "with": "apps/myappname/src/customers/customer.customer1.ts"
                }
              ]
            },

, затем при сборке вы можете установить конфигурацию

ng build --configuration="production,customer1"

Другое решение

создать компонент заголовка для каждого клиента и лениво загружать их используя ngComponentOutlet https://netbasal.com/welcome-to-the-ivy-league-lazy-loading-components-in-angular-v9-e76f0ee2854a