Генерация отдельного файла сборки для определенного компонента в angular 7

Question

Я собираюсь разработать очень большое приложение с использованием Angular 7 Framework.

Я создал пустое угловое рабочее пространство, используя

 ng new angular-app --create-application=false

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

 ng generate application app-one

 ng generate application app-two

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

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

И используйте каждый из отдельно собранных js-файлов, чтобы использовать каждый компонент в качестве веб-компонента.

Пожалуйста, прочитайте то, что я уже пытался получить лучшую идею.

Я попробовал следующие шаги:

1. Создайте репозиторий с префиксом custom для пользовательских угловых элементов:

   ng новое имя приложения --prefix custom

2. Добавьте пакет угловых элементов:

   ng add @ angular / elements

3. Создайте пользовательский компонентный элемент с инкапсуляцией как родной / эмулированный / без необходимости:

   ng g компонент my-component --inline-style --inline-template -v Собственный

4. Определите пользовательский элемент в app.modulte.ts

    import  { Injector} from '@angular/core';
       import  { createCustomElement } from '@angular/elements';
        ...
        export class AppModule {
            constructor(private injector : Injector){
            const el = createCustomElement(MyComponent, {injector : this.injector});
            customElements.define('my-component',el);
    }
            ngDoBootstrap(){ }
        }

5. Установите пакет ngx-build-plus для сборки одного пакета (например, для угловых элементов):

   npm я ngx-build-plus

6. Обновите раздел разработчика приложения в файле angular.json так, чтобы он указывал на ngx-build-plus:

   "builder": "ngx-build-plus: build",

7. Добавьте скрипт в package.json для запуска builder:

   "build: ngx": "ng build --prod --output-hashing none --single-bundle true"

8. Если необходимо, объедините scripts.js и main.js в созданной папке dist, создав файл js "concat_ngx.js":

     const fs = require('fs-extra');
        const concat = require('concat');
        (async function build() {
            const files = [
                './dist/<your_project>/scripts.js',
                './dist/<your_project>/main.js',
            ]
            await fs.ensureDir('elements_ngx')
            await concat(files, 'elements_ngx/combined-script.js');
        })()   

7. Запустите файл, чтобы получить один JS-файл:

   узел concat_ngx.js

8. Используйте файл js в любом проекте Angular/Other, чтобы использовать созданный пользовательский компонент.

Но проблема здесь заключается в том, что мне приходится каждый раз менять компонент начальной загрузки в app-module.ts

Мне нужен был автоматический способ изменения начальной загрузки в app-module.ts во время выполнения.

Но проблема здесь заключается в том, что мне приходится каждый раз менять компонент начальной загрузки в app-module.ts

Мне нужен был автоматический способ изменения начальной загрузки в app-module.ts во время выполнения.

Answer 1

В Angular 7 добавьте загрузку по умолчанию или автоматическую загрузку:-

Это стандартный способ начальной загрузки приложения angtraps и main.ts.

platformBrowserDynamic().bootstrapModule(AppModule);

Для получения дополнительной информации см. Здесь:- https://medium.com/learnwithrahul/ways-of-bootstrapping-angular-applications-d379f594f604

Answer 2

Объявите standalone:true в компоненте:

          @Component({
      standalone: true,
      selector: 'app-tour-list',
      templateUrl: './tour-list.component.html',
      styleUrls: ['./tour-list.component.css']
    })

Используйте маршрутизацию следующим образом:

          { path: 'TourList', loadComponent: () => import('./components/tour/tour-list/tour-list.component').then(m => m.TourListComponent) },

Answer 3

      ng serve -o app-one
или же

      ng serve -o app-two

Для получения дополнительной информации см. здесь https://medium.com/@klauskpm/change-the-default-angular-project-27da8fca8721