如何调试角度元素？

Question

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

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

这四个文件的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);
  }
 }

主要

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文件逻辑，但似乎没有创建描述两者之间连接的映射。

作为参考，这是我阅读/观看的内容。
使用Angular 6构建自定义元素/ Web组件Angular Elements – 使用Angular 6
实用介绍Web组件

Answer 1

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

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

请参阅：/sf/answers/3818372001/