Question T14736
Visible to All Users

Lazy load SurveyJs in Angular Module

created a year ago

I am trying to lazy load the survey component in my angular application.

TypeScript
@NgModule({ imports: [SharedModule, ImageModalModule, SurveyModule], exports: [SurveyComponent], declarations: [SurveyComponent], }) export class SurveyComponentModule {}

When the module is lazy loaded I receive the error:
NullInjectorError: R3InjectorError(AppModule)[PopupService -> PopupService]:
NullInjectorError: No provider for PopupService!

The only way to fix this error is to add the PopupService from the survey-angular-ui library to the AppModule. But when I do this the survey-angular-ui library and the survey-core library are loaded in the AppModule.

Is there a way to Lazy Load the surveyJs libraries in an Angular Module?

Comments (1)

    Hi Wim,
    Thank you for contacting us. I forwarded this issue to our developers for further investigation.
    Lazy Load SurveyJS in Angular

    We will research this task and update you as soon as we have any news to share.

    Answers approved by surveyjs Support

    created a year ago

    Wim,
    We created the demo and confirmed that a SurveyJS Form Library Angular component is correctly loaded. Please test the attached demo.

    In the app-routing.module.ts file, we defined a route for a lazy-loaded survey component using the loadChildren property of the route configuration:

    JavaScript
    import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ { path: 'survey', loadChildren: () => import(`./survey/survey.module`).then( module => module.SurveyComponentModule ) }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

    Please test this demo on your side and let us know if how goes.

      Other Answers

      created a year ago

      Thanks for the example, it was helpfull to push me to the right direction.

      I was loading the surveycomponent not through a route but directly in code:

      TypeScript
      loadComponent: async (viewContainerRef: ViewContainerRef) => { const { SurveyComponent } = await import('src/app/components/form/survey.component'); return viewContainerRef.createComponent<GenericComponent>(SurveyComponent); }

      This works for most components but not for the SurveyComponent because of the SurveyModule import.
      Fixed this with the following code:

      TypeScript
      loadComponent: async (viewContainerRef: ViewContainerRef) => { const { SurveyComponent, SurveyComponentModule } = await import('src/app/components/form/survey.component'); const lazyModuleRef = createNgModule(SurveyComponentModule, this.injector); return viewContainerRef.createComponent<GenericComponent>(SurveyComponent, { injector: this.injector, ngModuleRef: lazyModuleRef }); }

      Thanks

        Comments (1)

          Hello Wim,
          Thank you for the update. I'm happy to hear that you managed to resolve the issue.

          Please feel free to contact us if you require further assistance.

          Thanks