Rafael Silva
Rafael Silva

Reputation: 97

hybrid angular app (angular 18 with angular JS), lazy loading module not working when page is refreshed

I'm having a problem in my hybrid angular application, when starting the application on an angular 2+ page, the angular js pages don't load, it only works if I refresh within an angular js page, then it loads normally, if I navigate to angular 2+ pages and return to the angular js pages they work correctly.

Versions used: angular v18, angularjs

@Component({
  selector: 'app-angular-js',
  template: ''
})
export class AngularJSComponent implements OnInit, OnDestroy {
  constructor(
    private lazyLoader: LazyLoaderService,
    private elRef: ElementRef
  ) {}

  ngOnInit() {
    this.lazyLoader.load(this.elRef.nativeElement);
  }

  ngOnDestroy() {
    this.lazyLoader.destroy();
  }
}

Route

{
    matcher: isAngularJSUrl,
    component: AngularJSComponent,
    canActivate: [OperationKeyGuard]
}

AppModule

@NgModule({
  declarations: [AppComponent],
  imports: [...IMPORTS],
  providers: [...PROVIDERS],
  bootstrap: [AppComponent]
})
export class AppModule implements DoBootstrap {
  constructor(private readonly upgrade: UpgradeModule) {}

  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, [MyAppJs], { strictDi: true });
  }
}

If anyone has been through this and can help me, I would be grateful in advance.

Upvotes: -1

Views: 23

Answers (0)

Related Questions