小编mto*_*zek的帖子

我使用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: [ …