Угловые маршруты для компонентов OTF

Question

Мы используем angular 6, создаем компоненты на лету и определяем маршруты для них, используя код ниже:

const template = '<span>generated on the fly: {{name}}</span>';
const tmpCmp = Component({ template: template })(class {
  });
const tmpModule = NgModule({ declarations: [tmpCmp] })(class {
  });

await this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
  .then((factories) => {
    const f = factories.componentFactories[0];
    const cmpRef = this.vc.createComponent(tmpCmp);
    cmpRef.instance.name = 'dynamic';

    appRoutes.push({ path: 'dynamic', component: tmpCmp});

  })

this.router.resetConfig(appRoutes);

Когда мы переходим к URL-адресу динамически созданного компонента, мы получаем ошибку:

Не найдена фабрика компонентов для ConfirmComponent. Вы добавили это в @ NgModule.entryComponents

Чего нам не хватает, поддерживается ли этот сценарий?

Любая помощь с благодарностью

Answer 1

Вот как вы можете это сделать:

  ngOnInit() {
    const template = '<span>generated on the fly: {{name}}</span>';
    const tmpCmp = Component({template: template})(class {
    });

    const routes = [{path: '', component: tmpCmp}];
    const tmpModule = NgModule({imports: [RouterModule.forChild(routes)], declarations: [tmpCmp]})(class {
    });

    this.compiler.compileModuleAsync(tmpModule).then((ngModuleFactory) => {

      const appRoutes = [...this.router.config];

      const route = {
        path: 'dynamic',
        loadChildren() {
          return ngModuleFactory;
        }
      };

      appRoutes.push(route);

      this.router.resetConfig(appRoutes);

      // test navigation
      this.router.navigateByUrl('/dynamic');
    });
  }