Angular 元素：功能模块项目结构中的几个自定义 Web 组件可能吗？

Question

我想用 angular6 和 angular 元素创建几个自定义网络组件。现在，如果一切都直接在 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));

我怎样才能做到这一点，或者我是否必须将我所有的功能模块放入多个 "own" 个项目中？

Answer 1

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

其他 features/component 模块可以在需要时导入。例如，

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

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

见Angular's docs。

"应用程序通过 bootstrapping 根 AppModule 启动，也称为 entryComponent。除此之外，bootstrapping 进程创建bootstrap 数组并将每个数组插入浏览器 DOM.

每个 bootstrapped 组件都是它自己的组件树的基础。插入一个 bootstrapped 组件通常会触发一连串的组件创建来填充该树。

虽然您可以在主机网页上放置多个组件树，但大多数应用程序只有一个组件树和 bootstrap 一个根组件。

这个根组件通常称为 AppComponent，位于根模块的 bootstrap 数组中。"

Answer 2

你可以通过 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"
          ]
     }
    }
   }
  }
 }

Angular 元素：功能模块项目结构中的几个自定义 Web 组件可能吗？

Angular Elements : several custom web-components out of a feature-module project-structure possible?

web-component

angular6

angular-elements