Могу ли я динамически загрузить строку HTML как шаблон компонента и полностью скомпилировать ее в Angular 7?

Question

Итак, я прочитал это: https://angular.io/guide/dynamic-component-loader

Я пытаюсь загрузить страницы описания продукта из базы данных i18n.Давайте определим REST Server, который, например, запрос:

{ product: "stick", lang: "en" }

вернет:

{ content:
   "<div class="wrap">
        <h1>English translation title</h1>
        <span>Some text</span>
        <app-image-component some-component-bindings="..."></app-image-component>
    </div>"
  css:
   ".wrap { rules }"
}

Мои вопросы:

• (на основе ссылки учебника) Я знаю Angularпозволяет извлекать объекты данных и вставлять их в предопределенный HTML-шаблон.Позволяет ли вставлять весь шаблон (весь HTML, а не только значения данных)?
• Разрешено ли использование пользовательских css?Я знаю, что css (или sass) скомпилирован в Angular-специфическую "штуку" - можно ли это сделать при загрузке?А как насчет встроенного css?
• Если 1-й возможен - будет ли он также компилировать угловые объекты (например, определяемые приложением компоненты, такие как app-image-component)?

Цель - дать администратору(из приложения) возможность составлять страницы контента продукта, которые могут использовать заранее определенные компоненты, заполненные данными.

Это то, что я пытаюсь сделать хорошо поддерживаемым, или это будет очень сложно (с некоторыми странными приемами)

Answer 1

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

Вы можете создать целое приложение AOT, а затем динамически загрузить модуль, который использует библиотеку угловых компиляторов.Это сохраняет базу приложения небольшим (вы используете приложение + несколько КБ для обработки динамической загрузки) и загружает компилятор при необходимости, который весит что-то около 300 КБ.

После build --prod и gzip он уменьшается до менее 80 КБ только для компилятора,Это то, с чем вы можете жить, если вы планируете иметь полностью динамические страницы.

Я не буду писать здесь код, но:

См. «Создание компонентов на лету»

https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e

Мини-приложение (требуется уточнение для динамических модулей):

https://stackblitz.com/edit/mlc-app-init-zyns9l

4.hash.js - это динамически загружаемый чанк с компилятором.

РЕДАКТИРОВАТЬ

Дополнительная очень важная ссылка:

https://github.com/angular/angular-cli/issues/9306#issuecomment-435404174

Угловые уронят ваши декораторы (все с @), когда он компилируется (AOT).Если вы хотите сохранить их для JIT-части вашего приложения, вам нужно реэкспортировать их (всех, кого вы используете).По сути, вы хотите отбросить их везде, где компилируется AOT, но сохранить их в подмодуле (с отложенной загрузкой), сделав реэкспорт, который предотвращает их удаление в angular, а затем упаковать их в компоновку, что приведет к невозможности компиляциискомпилируйте их в формате JIT (поскольку для этого они нужны).