0

Eu estou tentando fazer lazy loading para que carregue determinados módulos quando bater na URL que realmente precisa carregar esses módulos, porém estou obtendo o seguinte erro:

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">

Implementações do 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 { }
0

1 Resposta 1

1

Eu não vi onde você importa os modules, não é assim que se faz lazy loading. Por padrão os ngModules são carregados avidamente, o que significa que, assim que o aplicativo é carregado todos os ngModules também, sejam eles imediatamente necessários. A ideia é você criar varios modules a parte e chamar no "routing pai", e cada module ter seus componentes e rotas, assim carregando apenas conforme o necessário, por sua vez ajudando a diminuir e manter o tamanho dos pacotes inicias.

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

Lembrando que assim é a implementação da v6 do angular, nas próximas versões é diferente

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

documentação lazy loading

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .