如何调试角度元素？答案

【问题标题】：How to debug angular-elements?如何调试角度元素？
【发布时间】：2019-01-13 03:42:48
【问题描述】：

我使用 angular-elements 构建了一个项目，并成功地将一个组件嵌入到另一个应用程序中。 我现在想做的是能够从包含它的应用程序中调试原始组件。

组件的所有逻辑都在一个文件中，这是 Angular 在构建期间创建的 4 个文件的串联 - runtime.js、polyfills.js、scripts.js、main.js。

这 4 个文件的 js.map 文件也是在构建过程中创建的，我可以在原始 main.ts 文件中成功放置并命中断点（包括包含元素输出文件的目录中的 jsmaps）。但是，我一直无法找到从使用它的应用程序中调试实际 component.ts 文件的方法。该组件的 js.map 也包含在包中，我可以通过 Chrome DevTools 查看 component.ts 文件，但如果我放置任何断点，它们将永远不会被命中。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { FormsModule } from "@angular/forms";

import { FirstWebElementComponent } from './first-web-element/first-web-element.component';
import { AppComponent } from './app.component';
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { ScenarioSelectorComponent } from './scenario-selector/scenario-selector.component';

@NgModule({
  declarations: [
    AppComponent,
    ScenarioSelectorComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,    
    HttpClientModule
  ],
  providers: [],    
  entryComponents: [ScenarioSelectorComponent]
})
export class AppModule {
  constructor(private injector: Injector) {}

  ngDoBootstrap() {    
    const scenarioSelector = createCustomElement(ScenarioSelectorComponent, {injector: this.injector});    
    customElements.define('scenario-selector', scenarioSelector);
  }
 }

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

据我了解，component.ts 文件逻辑在构建期间包含在 main.js 文件中，但似乎没有创建描述的映射两者之间的联系。

作为参考，这是我阅读/观看的内容。
Building Custom Elements / Web Components with Angular 6
Angular Elements – A Practical Introduction To Web Components With Angular 6

【问题讨论】：

看看source maps。当您构建或提供您的应用程序（ng build、ng serve）时，应该已经包含源映射。这将允许您在原始 TypeScript 代码中设置断点。也许你遇到了this issue？
@FK82 我熟悉源映射，并且在开发 Angular 应用程序时每天都会使用它们。但是，在这种情况下，每当从 angular 元素中抛出错误时，控制台都会在 main.ts:11 中显示错误的根源，即这一行 platformBrowserDynamic().bootstrapModule(AppModule); 即使在我的 main.js.map 文件中component.ts 文件包含在“sources”中，对于 Chrome DevTools 中的调试器来说，似乎连接并不明显，所以它总是显示错误，就好像它出现在那个 main.ts 文件中一样。

标签： javascript angular typescript angular-elements

【解决方案1】：

Angular CLI 不再支持内联源映射。您最好的选择是将ng build 替换为ngx build plus - https://github.com/manfredsteyer/ngx-build-plus

然后添加一个构建插件以将devtool 替换为inline-source-map，这会将源映射内联到您的捆绑文件中，以便您进行调试。

见：https://stackoverflow.com/a/54548171/1829251

【讨论】：