7

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

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

4

1 回答 1

0

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

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

请参阅：https ://stackoverflow.com/a/54548171/1829251

于 2019-11-13T00:29:38.603 回答