Загружать новые модули динамически во время выполнения с помощью Angular CLI и Angular 5

Ответ 1

У меня была та же проблема. Насколько я понимаю до сих пор:

Webpack помещает все ресурсы в пакет и заменяет все System.import на __webpack_require__. Поэтому, если вы хотите динамически загружать модуль во время выполнения с помощью SystemJsNgModuleLoader, загрузчик будет искать модуль в комплекте. Если модуль не существует в комплекте, вы получите сообщение об ошибке. Webpack не будет запрашивать сервер для этого модуля. Это проблема для нас, так как мы хотим загрузить модуль, который мы не знаем во время сборки/компиляции. Нам нужен загрузчик, который будет загружать модуль для нас во время выполнения (ленивый и динамический). В моем примере я использую SystemJS и Angular 6/CLI.

• Установить SystemJS: npm install systemjs -save
• Добавьте его в angular.json: "scripts": [ "node_modules/systemjs/dist/system.src.js" ]

app.component.ts

import { Compiler, Component, Injector, ViewChild, ViewContainerRef } from '@angular/core';

import * as AngularCommon from '@angular/common';
import * as AngularCore from '@angular/core';

declare var SystemJS;

@Component({
  selector: 'app-root',
  template: '<button (click)="load()">Load</button><ng-container #vc></ng-container>'
})
export class AppComponent {
  @ViewChild('vc', {read: ViewContainerRef}) vc;

  constructor(private compiler: Compiler, 
              private injector: Injector) {
  }

  load() {
    // register the modules that we already loaded so that no HTTP request is made
    // in my case, the modules are already available in my bundle (bundled by webpack)
    SystemJS.set('@angular/core', SystemJS.newModule(AngularCore));
    SystemJS.set('@angular/common', SystemJS.newModule(AngularCommon));

    // now, import the new module
    SystemJS.import('my-dynamic.component.js').then((module) => {
      this.compiler.compileModuleAndAllComponentsAsync(module.default)
            .then((compiled) => {
                let moduleRef = compiled.ngModuleFactory.create(this.injector);
                let factory = compiled.componentFactories[0];
                if (factory) {
                    let component = this.vc.createComponent(factory);
                    let instance = component.instance;
                }
            });
    });
  }
}

мой-dynamic.component.ts

import { NgModule, Component } from '@angular/core';
import { CommonModule } from '@angular/common';

import { Other } from './other';

@Component({
    selector: 'my-dynamic-component',
    template: '<h1>Dynamic component</h1><button (click)="LoadMore()">LoadMore</button>'
})    
export class MyDynamicComponent {
    LoadMore() {
        let other = new Other();
        other.hello();
    }
}
@NgModule({
    declarations: [MyDynamicComponent],
    imports: [CommonModule],
})
export default class MyDynamicModule {}

other.component.ts

export class Other {
    hello() {
        console.log("hello");
    }
}

Как вы можете видеть, мы можем сказать SystemJS, какие модули уже существуют в нашем комплекте. Поэтому нам не нужно снова загружать их (SystemJS.set). Все остальные модули, которые мы импортируем в нашем my-dynamic-component (в этом примере other), будут запрашиваться с сервера во время выполнения.

Ответ 2

Я использовал решение https://github.com/kirjs/angular-dynamic-module-loading с поддержкой библиотеки Angular 6 для создания приложения, которое я использовал в Github. Из-за политики компании ее нужно было отключить. Как только будут обсуждены примеры источника проекта, я поделюсь им на Github!

ОБНОВЛЕНИЕ: можно найти репо; https://github.com/lmeijdam/angular-umd-dynamic-example

Ответ 3

Я считаю, что это возможно, используя SystemJS для загрузки пакета UMD, если вы создаете и запускаете основное приложение с помощью webpack. Я использовал решение, которое использует ng-packagr для создания пакета UMD динамического модуля plugin/addon. Этот github демонстрирует описанную процедуру: https://github.com/nmarra/dynamic-module-loading

Ответ 4

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

1. В угловой библиотеке установите для angularCompilerOptions.skipTemplateCodegen значение false, и после сборки библиотеки вы получите фабрику модулей.
2. После этого создайте модуль umd с помощью накопительного пакета следующим образом: rollup dist/plugin/esm2015/lib/plugin.module.ngfactory.js --file src/assets/plugin.module.umd.js --format umd --name plugin
3. Загрузите исходный текстовый пакет umd в основное приложение и оцените его с помощью контекста модуля.
4. Теперь вы можете получить доступ к ModuleFactory из объекта экспорта.

Здесь https://github.com/iwnow/angular-plugin-example вы можете найти, как разработать плагин с автономной сборкой и AOT

Ответ 5

Да, вы можете использовать ленивые модули загрузки, ссылаясь на них как на модули в маршрутизаторе. Вот пример https://github.com/start-angular/SB-Admin-BS4-Angular-6

• Сначала добавьте все компоненты, которые вы используете в один модуль.
• Теперь обратитесь к этому модулю в маршрутизаторе и angular будет ленить загружать ваш модуль в представление.

Ответ 6

Я протестировал в Angular 6, ниже решение работает для динамической загрузки модуля из внешнего пакета или внутреннего модуля.

1. Если вы хотите динамически загрузить модуль из проекта библиотеки или пакета:

У меня есть проект библиотеки "admin" (или вы можете использовать пакет) и проект приложения "app". В моем проекте библиотеки "admin" у меня есть AdminModule и AdminRoutingModule. В моем проекте "app":

а. Внесите изменения в tsconfig.app.json:

  "compilerOptions": {
    "module": "esNext",
  },

б. В app-routing.module.ts:

const routes: Routes = [
    {
        path: 'admin',
        loadChildren: async () => {
            const a = await import('admin')
            return a['AdminModule'];
        }
    },
    {
        path: '',
        redirectTo: '',
        pathMatch: 'full'
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {
}

2. если вы хотите загрузить модуль из того же проекта.

Есть 4 разных варианта:

а. В app-routing.module.ts:

const routes: Routes = [
    {
        path: 'example',
        /* Options 1: Use component */
        // component: ExampleComponent,  // Load router from component
        /* Options 2: Use Angular default lazy load syntax */
        loadChildren: './example/example.module#ExampleModule',  // lazy load router from module
        /* Options 3: Use Module */
        // loadChildren: () => ExampleModule, // load router from module
        /* Options 4: Use esNext, you need to change tsconfig.app.json */
        /*
        loadChildren: async () => {
            const a = await import('./example/example.module')
            return a['ExampleModule'];
        }
        */
    },
    {
        path: '',
        redirectTo: '',
        pathMatch: 'full'
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {
}
''

Ответ 7

Не работает

System.import('http://lab.azaas.com:52048/my-component-library.umd.js').then(module => {
        console.log(module);
 });

за работой

System.import('./../../assets/umds/my-component-library.umd.js').then(module => {
        console.log(module);
});