在生产构建之前，您如何 run/debug/serve 一个 Angular 元素？

Question

我正在使用最新版本的 Angular (11) 来尝试创建一个 Angular 元素，我将打包并在 [=35] 之外的静态网页中使用=] 应用程序。但是，在开发组件时，我希望能够使用 ng serve 或类似的东西来在浏览器中加载我的组件并测试功能。实现此目标的最佳方法是什么？

这是我当前的 AppModule：

@NgModule({
    declarations: [
        ImageSwitcherComponent
    ],
    imports: [
        BrowserModule,
    ],
    entryComponents: [
        ImageSwitcherComponent // shouldn't need anymore
    ],
})
export class AppModule {
    constructor(private injector: Injector) {
        const el = createCustomElement(ImageSwitcherComponent, { injector: this.injector });
        customElements.define('image-switcher', el);
    }
}

我已经从项目中删除了默认的应用程序组件，所以我的 ImageSwitcherComponent 是当前项目中唯一的组件。此外，没有组件被引导，因为我不想创建常规 angular 应用程序。

现在，在链接的时候看到这个tutorial video，这家伙说通过上面的AppModule配置，你应该能够清除主index.html的内容（包括去掉 app-root）并为组件元素添加标签运行 ng-serve 并且您的组件应该加载：

<image-switcher></image-switcher>

不幸的是，这似乎不起作用，或者我遗漏了什么。加载本地主机时没有任何显示。而且，当我运行 ng build --prod 时，生成的 index.html 文件不包含上面显示的标记之外的任何生成代码。那家伙用的是 Angular 6，比我用的旧多了。

Angular 的最新版本有什么变化吗？是否有更好的策略能够在开发中提供您的 Angular 元素并在浏览器中调试它们？

Answer 1

通常您使用 @angular/cli 创建一个工作区

ng new my-workspace --create-application=false

并从其中的库开始

ng generate library my-lib

然后您可以使用

向其中添加应用程序

ng generate application my-lib-demo

你现在的结构是

./projects/my-lib
./projects/my-lib-demo

现在可以开始在my-lib-demo项目中使用my-lib了，使用ng serve在本地测试，发布到Github页面，方便其他人查看你很棒的组件 ;-)

Answer 2

要使用 ng-serve 调试我的 angular 组件，在将其编译成“元素”之前，我只需在 app.component.html 中添加组件标签并在 bootstrap 中取消注释标准 bootstrap =14=] 为：

providers: [],
bootstrap: [AppComponent],  // this line
entryComponents: [
  TrucMucheComponent
]

在生产构建之前，您如何 run/debug/serve 一个 Angular 元素？

How do you run/debug/serve an Angular Element before a production build?

angular

angular-elements