Question

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

该组件的所有逻辑都在一个文件中，这是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);

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

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

Answer 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

如何调试角度元素？

1 个答案: