角度元素:一个功能模块项目结构中的几个自定义Web组件可能吗?

Question

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

但是我的项目由几个功能模块组成，其中包含自己的自定义依赖项，组件等。

我试图用两个引导模块扩展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

通常只有一个引导模块是应用程序的根目录。

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

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

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

请参阅Angular的文档。

"应用程序通过引导根AppModule(也称为entryComponent(来启动。除此之外，引导过程还会创建引导数组中列出的组件，并将每个组件插入浏览器 DOM 中。

每个自举组件都是其自己的组件树的基础。插入引导组件通常会触发填充该树的组件创建级联。

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

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

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"
]
}
}
}
}
}