javascript - 角度要素をデバッグするには?

Question

angular-elements を使用してプロジェクトを構築し、コンポーネントを別のアプリケーションに正常に埋め込むことができました。私が今やりたいことは、それが含まれているアプリケーションから元のコンポーネントをデバッグできるようにすることです.

コンポーネントのすべてのロジックは 1 つのファイルに含まれています。これは、ビルド中に 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 ファイルに含まれていますが、2 つの間の接続を説明するマップが作成されていないようです。

参考までに、私が読んだ/見たものを以下に示します。
Build Custom Elements / Web Components with Angular 6
Angular Elements – Angular 6 を使用した Web コンポーネントの実践的な紹介