javascript - Hvordan feilsøke angular-elements?

Jeg laget et prosjekt ved å bruke angular-elements og klarte å legge inn en komponent i en annen applikasjon. Det jeg ønsker å gjøre nå er å kunne feilsøke den opprinnelige komponenten fra applikasjonen den er inkludert i.

All logikken for komponenten er i én fil, som er en sammenkobling av 4 filer laget av Angular under bygging - runtime.js, polyfills.js, scripts.js, main.js.

js.map-filene for de 4 filene blir også opprettet under byggingen, og jeg kan med hell plassere og treff et breakpoint i den originale main.ts-filen (etter å ha inkludert jsmaps i katalogen med utdatafilen for elementet). Imidlertid har jeg ikke klart å finne en måte å feilsøke den faktiske component.ts-filen fra applikasjonen som bruker den. js.map for den komponenten er også inkludert i bundtet, og jeg kan se component.ts-filen gjennom Chrome DevTools, men hvis jeg setter noen breakpoints vil de aldri bli truffet.

app.modul.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);

Så vidt jeg forstår, inkluderes logikken i component.ts-filen i main.js-filen under bygging, men det ser ikke ut til å være opprettet et kart som beskriver forbindelsen mellom de to.

Som referanse, her er tingene jeg leste/så.
Bygge tilpassede elementer/webkomponenter med Angular 6
Angular Elements - En praktisk introduksjon til webkomponenter med Angular 6

Svar #1

Angular CLI støtter ikke lenger innebygde kildekart. Det beste alternativet ditt er å erstatte ng build med ngx build plus - https://github.com/manfredsteyer/ngx-build-plus

Deretter legg til en byggeplugin for å erstatte devtool med inline-source-map, som vil legge inn sourcemaps i bundelfilen din, noe som gjør det mulig å feilsøke.

Se: https://stackoverflow.com/a/54548171/1829251

Relaterte artikler