How to do lazy loading correction in Angular 6, unknown component error

Question

How to do lazy loading correction in Angular 6, unknown component error

I'm trying to do lazy loading so that it loads certain modules when hitting the URL that actually needs to load these modules, but I'm getting the following error:

Core.js: 1673 ERROR Error: Uncaught (in promise): Error: Template parse errors: 'app-LDS-facebook' is not a known element: 1. If 'app-LDS-facebook' is an Angular component, then verify that it is part of this module. 2. If 'app-LDS-facebook' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the ' @ NgModule.schemas ' of this component to suppress this message. ("

[ERROR ->]

"): ng: / / / DashboardModule / AdminAboutComponent.html@10:4 Can't bind to ' translateParams 'since it isn't a known property of'h1'. ('ols'> ] [translateParams]= "{value: titleBR} "class = "hi">

Lazy loading implementations:

const components = [
    AppComponent,
    MainComponent,
    NavbarComponent,
    HomeComponent,
    AboutMeComponent,
    TimelineComponent,
    SkillsComponent,
    ParallaxComponent,
    ProjectsComponent,
    ContactComponent,
    FooterComponent,
    FlagsComponent,
    DarkRoundedComponent,
    LightRoundedComponent,
    LoginComponent,
    GuardsErrorComponent,
    NotFoundComponent,
    GrayRoundedComponent
];

const pipes = [
    EllipsisPipe,
    SkillIconsPipe,
    NotFoundImagePipe,
    SkillColorsPipe,
];

const directive = [
    TypingAnimationDirective
];

@NgModule({
    declarations: [
        components,
        pipes,
        directive
    ],
    imports: [
        ComponentsModule,
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        FormsModule,
        AngularFireModule.initializeApp(environment),
        AngularFirestoreModule,
        AngularFireAuthModule,
        AngularFireStorageModule,
        RecaptchaModule,
        AlertModule.forRoot({ maxMessages: 5, timeout: 5000, position: 'right' }),
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        }),
        AppRoutingModule,
    ],
    providers: [HttpClient, LocalStorageService, TranslateServices, AuthService, GuardsService, ConnectionUtilsService],
    bootstrap: [AppComponent]
})
export class AppModule { }

=========================================

export const components = [
    AdminMainComponent,
    AdminHomeComponent,
    AdminAboutComponent,
    AdminTimelineComponent,
    AdminSkillsComponent,
    AdminProjectsComponent
];

@NgModule({
    imports: [
        CommonModule,
        DashboardRoutingModule
    ],
    exports: [
        components
    ],
    declarations: [components],
    providers: [GuardsService]
})
export class DashboardModule { }

=========================================

const routes: Routes = [{
    path: 'admin',
    component: AdminMainComponent,
    canActivate: [GuardsService],
    children: [
        { path: '', redirectTo: 'home', pathMatch: 'full' }, {
            path: 'home',
            component: AdminHomeComponent,
            canActivate: [GuardsService]
        }, {
            path: 'about',
            component: AdminAboutComponent,
            canActivate: [GuardsService]
        },
        {
            path: 'timeline',
            component: AdminTimelineComponent,
            canActivate: [GuardsService]
        },
        {
            path: 'skills',
            component: AdminSkillsComponent,
            canActivate: [GuardsService]
        },
        {
            path: 'posts',
            component: AdminProjectsComponent,
            canActivate: [GuardsService]
        },
    ]
}];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class DashboardRoutingModule { }

is.alertService.success(res.mensagem);
this.loading = false;
} else {
    this.alertService.danger(res.mensagem);
    this.loading = false;
}
}, (err) => {
    this.alertService.danger(err);
    this.loading = false;
});
}

}

=========================================

@NgModule({
    imports: [
      CommonModule,
      ComponentsRoutingModule
    ],
    exports: [
      LdsFacebookComponent,
      LdsFacebookBlueComponent],
    declarations: [
      LdsFacebookComponent,
      LdsFacebookBlueComponent],
    providers: []
  })
  export class ComponentsModule { }

0

angular typescript lazy-loading desempenho angular-6

Author: Edson Camargo, 2020-02-15

Source

1 answers

score 0 · Answer 1

I haven't seen where you import modules, that's not how lazy loading is done. By default ngModules are loaded greedily, which means that as soon as the application loads all ngModules as well, they are immediately needed. The idea is you create several modules a part and call in the "parent routing", and each module have its components and routes, thus loading only as needed, in turn helping to decrease and maintain the size of the packages start.

  const routes: Routes = [
{
  path: 'admin',
  loadChildren: './admin/admin.module#AdminModule',
  canActivate: [GuardsService]
},
{ path: 'login', loadChildren: './login/login.module#LoginModule' }];
}

Remembering that this is the implementation of angular V6, in the next versions it is different

  const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  }
];

Documentation lazy loading