How to debug angular-elements?

Question

I built a project using angular-elements and managed to successfully embed a component into another application. What I would like to do now is be able to debug the original component from the application it is included in.

All the logic for the component is in one file, which is a concatenation of 4 files created by Angular during build - runtime.js, polyfills.js, scripts.js, main.js.

The js.map files for those 4 files are also created during build and I can successfully place & hit a breakpoint in the original main.ts file (after including the jsmaps in the directory with the output file for the element). However, I have been unable to find a way to debug the actual component.ts file from the application that is using it. The js.map for that component is also included in the bundle and I can view the component.ts file through Chrome DevTools, but if I put any breakpoints they will never be hit.

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);

To the best of my understanding, the component.ts file logic is included in main.js file during build, but there doesn't seem to be a map created describing the connection between the two.

For reference, here is the stuff I read / watched.
Building Custom Elements / Web Components with Angular 6
Angular Elements – A Practical Introduction To Web Components With Angular 6

Propylite

Have a look at source maps. When you're building or serving your app (ng build, ng serve) source maps should already be included. This will allow you to set break points in your original TypeScript code. Maybe you ran into this issue? – Beauty

@Beauty I am familiar with source maps and use them on a daily basis when developing Angular apps. In this case, however, whenever an error is thrown from within the angular-element, the console shows the root of the error in main.ts:11, which is this line platformBrowserDynamic().bootstrapModule(AppModule); Even though in my main.js.map file the component.ts file is included in "sources", it seems the connection is not obvious for the debugger in Chrome DevTools, so it always shows the error as if it appeared in that main.ts file. – Propylite

Answer 1

Angular CLI doesn't support inline source maps anymore. Your best bet is to replace ng build with ngx build plus - https://github.com/manfredsteyer/ngx-build-plus

Then add a build plugin to replace the devtool with inline-source-map which will inline the sourcemaps into your bundle file enabling you to debug.

See: https://mcmap.net/q/1343493/-how-to-configure-angular-cli-to-create-inline-sourcemaps

Embow