How to make Lazy loading correct at Angular 6, not known component error

Question

I’m trying to do Lazy loading to load certain modules when hitting the URL that really needs to load these modules, however I am 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">

Implementations of Lazy loading:

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 { }

Answer 1

I haven’t seen where you import the modules, that’s not how you do Lazy loading. By default ngModules are loaded avidly, which means that once the application is loaded all ngModules too, they are immediately needed. The idea is that you create several modules separately and call in the "parent routing", and each module has its components and routes, so loading only as needed, in turn helping to decrease and maintain the size of the initial packages.

  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 the angular V6, in the next versions is different

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

documentation Lazy loading