Angular Elements :一个功能模块项目中的几个自定义web组件-结构可能吗？

Question

我想用angular6和angular-elements创建几个自定义的web组件。现在，如果所有内容都直接在app.module.ts中定义，我就可以让它正常工作。

但我的项目由几个功能模块组成，它们内部有自己的自定义依赖项、组件等。

我试着用两个bootstrap模块来扩展main.ts，但是没有成功。

 platformBrowserDynamic([{provide:LOCALE_ID,useValue:'de'}]).
   bootstrapModule(AppModule, {
    providers: [{provide: LOCALE_ID, useValue: 'de'}]
   })
.catch(err => console.log(err));

 platformBrowserDynamic([{provide: LOCALE_ID, useValue: 'de'}]).
  bootstrapModule(FeatureModule, {
   providers: [{provide: LOCALE_ID, useValue: 'de'}]
  })
.catch(err => console.log(err));

我如何才能做到这一点，或者我必须把我所有的功能模块放到几个“自己”的项目中？

Answer 1

您可以通过angular.json延迟加载模块来实现：

  "projects": {
   "angular-lazy-webcomponents": {
    "root": "",
    "sourceRoot": "src",
    "projectType": "application",
    "architect": {
     "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
          "lazyModules": [
            "src/app/module1/module-one.module",
            "src/app/module2/module-two.module"
          ]
     }
    }
   }
  }
 }

Answer 2

通常只有一个bootstrap模块，它是应用程序的根。

其他功能/组件模块可以在需要时导入。例如,

@NgModule({
    imports: [
        FeatureModules
    ],
    declarations: [ErrorComponent],
    providers: [
        Services
    ],
    bootstrap: [MainComponent]
})
export class AppModule {}

如果您的应用程序有多个根，那么您可以将它们包含在由bootstrap定义的数组中。

参见Angular's docs。

“应用程序通过引导根AppModule启动，它也称为entryComponent。其中，引导过程创建引导数组中列出的组件，并将每个组件插入浏览器DOM。

每个自举组件都是其自己的组件树的基础。插入一个自举组件通常会触发一系列组件创建，以填充该树。

虽然您可以在一个主网页上放置多个组件树，但大多数应用程序只有一个组件树，并且引导单个根组件。

这个根组件通常称为AppComponent，它位于根模块的引导程序数组中。“