Как условно скомпилировать окружающий шаблон в Angular - PullRequest
Новая
       7

Как условно скомпилировать окружающий шаблон в Angular

0 голосов
/ 18 мая 2018

У меня есть приложение Angular 5 с несколькими средами (dev, qa, customer1, customer2 и т. Д.).Используя environment.xxx.ts, я получаю переменные конфигурации во время выполнения без проблем.Однако я не могу условно включить шаблон во время компиляции.То есть я хотел бы иметь что-то подобное: 

@Component({
    selector: 'app-hello',
    templateUrl: `hello.component.${environment.client}.html`
})

, где environment.client предоставляется environment.customer1.ts.

Может быть, это более важный вопрос - как я могу управлять шаблоном или таблицей стилей в метаданных Компонента.

ПРИМЕЧАНИЕ 1 : я понимаю, что скоро мы получим средство визуализации Ivy, которое позволитобъединить компиляторы AOT и JIT;но я не пытаюсь загрузить шаблон динамически - только скомпилируйте нужный шаблон в зависимости от среды.

ПРИМЕЧАНИЕ 2 : я пробовал dotenv, но, похоже, он работает так же: он дает мне контроль над переменными окружения во время выполнения , но не помогает выбрать правильный файл для компиляции.

1 Ответ

0 голосов
/ 12 декабря 2018

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

У меня есть модуль (customer-components.module.ts), который решает, какие клиентские компоненты включены в зависимости от условий. 

const customerComponents = [CustomerModule];
const defaultComponents = [DefaultModule];

// I just realised functions are not working in aot
// not the best way if there are lots of customers which is the case for us. 
// i will see if i can find a nicer way to decide on the components. but the mechanisim works

const exports = env.customer === 'customer1' ? customerComponents : defaultComponents; 

 @NgModule({
  imports: [
    CustomerModule,
    DefaultModule,
    CommonModule
  ],
  declarations: [],
  exports: getExports()
})
export class CustomerComponentsModule {}

Все специфичные для клиента компоненты объединены в одном клиенте.модуль.В этом примере клиентский модуль может только объявить и экспортировать компонент navigation.component.Модуль по умолчанию объявляет и экспортирует те же компоненты.Важным является тот факт, что селекторы в каждом компоненте идентичны.Это означает, что в обоих модулях: клиентском модуле и модуле по умолчанию там компонент навигации имеет одинаковый селектор (app-navigation).

Теперь я могу импортировать клиентский модуль везде, где я хочу, например, вприложение-модуль.и использовать в app.component.html, а среда указывает, какой компонент навигации экспортируется и используется в app.component.

...