1

我正在尝试构建一个角度应用程序来使用 @angular/elements 模块构建 Web 元素。

根项目将仅用于在标准独立应用程序中测试这些组件。

我创建了一个名为“元素”的项目，其唯一目的是创建组件并将它们作为 Web 元素分发，到目前为止效果很好。

我现在正在尝试延迟加载这些元素。当我真正使用组件时，我只想要相关的捆绑文件。

这是我的 app.module.ts，它定义了 web 元素：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector, DoBootstrap, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { createCustomElement } from '@angular/elements';
import { CfLabelComponent } from './cf-label/cf-label.component';
import { CfAdslComponent } from './cf-adsl/cf-adsl.component';

@NgModule({
  declarations: [],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [],
})
export class AppModule implements DoBootstrap {
  constructor(private injector: Injector) { }

  ngDoBootstrap() {
    customElements.define('cf-label', createCustomElement(CfLabelComponent, { injector: this.injector }));
    customElements.define('cf-adsl', createCustomElement(CfAdslComponent, { injector: this.injector }));
  }
}

我知道 Angular 需要一些东西来引导。我没有经典的 app.component.ts，因为我最终不需要它。前面的代码可以工作，但是在 main.js 中引导组件 cf-label 和 cf-adsl 是可以理解的，但这不是我想要的。你能建议一种方法来解决这个问题吗？

4

0 回答 0