0

I have created a webComponent using Angular elements, it is a component that has a material-stepper, the first step is to select a point on a map and the second to fill in the form (it has no navigation). This is part of the configuration of the app.module.

export class AppModule {
  constructor(private injector: Injector) {
    const elementCustom = createCustomElement(
      HomeComponent,
      {
        injector: this.injector
      }
    );
    customElements.define('lnk-app-photovoltaic', elementCustom);
  }
  ngDoBootstrap(): void {
  }
}

create a new simple project (NewApp1), without extra libraries, and create a page with lazy loading. In NewApp1 in assets I have created an apps / map-web-component folder and I have pasted the compiled web-component

I have imported it as follows

ts
        import { Component, OnInit } from '@angular/core';
        import 'src/assets/apps/photovoltaic-calculator/lnk-app-photovoltaic-calculator.js'
        @Component({
          selector: 'app-other-page',
          templateUrl: './other-page.component.html',
          styleUrls: ['./other-page.component.scss']
        })
        export class OtherPageComponent implements OnInit {
        
          constructor() { }
        
          ngOnInit(): void {
          }
    
    }

HTML

    <p>other-page works!</p>
    <lnk-app-photovoltaic></lnk-app-photovoltaic>

This has worked beyond the fact that some styles have been broken

I have replicated these steps, creating a new page in a large project with angular 11 and I have received the following error:

ERROR Error: Uncaught (in promise): RangeError: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded

Can someone tell me what it could be? In the webcomponent I have disabled the IVY, but little else

juanjinario
  • 596
  • 1
  • 9
  • 24
  • Are you using an Angular-routing module? Or, could you share your routes? – Jeremy Jul 13 '21 at 16:09
  • Do you have an infinite process running? Are you subscribing to onChange events on stepper click? – Darren Street Jul 13 '21 at 16:33
  • @Jeremy I have removed the routingModule from the webcomponent, in the appComponent I directly import the stepper, map and form. – juanjinario Jul 14 '21 at 07:15
  • @DarrenStreet I have a method that always listens to the tabIndex of the stepper. It is a subscription (there is no other way to do it). – juanjinario Jul 14 '21 at 07:24
  • @juanjinario I suspect that process is firing continually. If you log out a message on that subscription I bet you get multiple firing each second. – Darren Street Jul 15 '21 at 09:48

0 Answers0