Ich versuche, Lazy Loading in Winkel 5 zu implementieren.

App.module.ts

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import {RouterModule , Routes} from '@angular/router';
  import { HttpClientModule } from '@angular/common/http';
  import { AppComponent } from './app.component';
  import { HomeComponent } from './home/home.component';
  import {LocationStrategy, HashLocationStrategy} from 
  '@angular/common';
  import { DataService } from './data.service';
  import { AboutComponent } from './about/about.component';
  import { ContactComponent } from "./contact/contact.component";
  import { NavComponent } from './nav/nav.component';
  @NgModule({
     declarations: [
     AppComponent,
     HomeComponent,
     AboutComponent,
     ContactComponent,
     NavComponent
  ],
imports: [
  BrowserModule,
  HttpClientModule,
  FormsModule,
  RouterModule.forRoot([
    {path: 'home', component: HomeComponent},
    {path: '', redirectTo: 'home', pathMatch: 'full'},
    {path: 'about', component: AboutComponent},
    {path: 'contact', component: ContactComponent},
  ])
],
providers: [DataService,{provide: LocationStrategy, useClass: 
HashLocationStrategy}],
bootstrap: [AppComponent]
 })

export class AppModule { }

Ich möchte, dass Kontakt und über Komponenten faul geladen werden. Wie geht das?? Muss ich dafür einige neue Module und Komponenten erstellen?

1
Ronit 10 Mai 2019 im 10:06

4 Antworten

Beste Antwort

Erstellen Sie 2 neue Module:

ng generate module about --roputing
ng generate module contact --routing

Erstellen Sie Komponenten für jedes dieser Module:

ng generate component about/components/about
ng generate component contact/components/contact

Da wir die Optionen --routing verwendet haben, verfügt jedes dieser Module über ein about-routing.module.ts und ein contact-routing.module.ts erstellt. Hier müssen Sie die Routen für die Module angeben. Fügen Sie dies dem Modul about hinzu:

const routes: Routes = [
  { path: '', component: AboutComponent, pathMatch: 'full' }
];

Und für das Modul Kontakt :

const routes: Routes = [
  { path: '', component: ContactComponent, pathMatch: 'full' }
];

Ändern Sie die app.module.ts in:

 RouterModule.forRoot([
    {path: 'home', component: HomeComponent},
    {path: '', redirectTo: 'home', pathMatch: 'full'},
     path: 'about', loadChildren: './about/about.module#AboutModule' },
     path: 'contact', loadChildren: './contact/contact.module#ContactModule' },
  ])
0
NicuVlad 14 Mai 2019 im 09:55

Um ein verzögertes Laden zu erreichen, verwenden Sie untergeordnete Routen, die sich auf das verzögert geladene Modul RoutingModule beziehen, in dem die untergeordneten Routen weiter aufgelöst werden: loadChildren: './pages/myPath/myPath.module#MyPathModule'

MaiModule-> MainRoutingModule -> childRoute = LazyLoadModule -> LazyLoadRoutingModule

const appRoutes: Routes = [
 {
   path: 'myPath',
   loadChildren: './pages/myPath/myPath.module#LazyLoadedModule'
 },
]
1
Severin Klug 10 Mai 2019 im 07:21

Sie können Ihre AboutComponent und ContactComponent in einem separaten Modul mit dem Namen "LandingModule" hinzufügen. Anschließend können Sie eine separate Routing-Seite für Ihr Landemodul erstellen.

const routes: Routes = [
 {path: 'about', component: AboutComponent},
 {path: 'contact', component: ContactComponent },
];

Danach müssen Sie AppRoutingModule erstellen, das Routing auf App-Ebene enthält, um verzögerte Laderouten zu erstellen.

const routes: Routes = [
{
  path: 'customers',
  loadChildren: './landing/landing.module#LandingModule'
},
{
  path: '', redirectTo: '', pathMatch: 'full'
}
];

Wenn Sie mehr lesen möchten, können Sie die angegebenen Links besuchen.

Das Hinzufügen einer separaten Datei für das Routing ist eine gute Vorgehensweise, außer dass Sie alle Routen in Ihrem AppModule behalten.

0
Denuka 10 Mai 2019 im 07:59

Sie müssen ein neues Modul erstellen, das Ihre Informationen zu und zugehörige Komponenten über den untergeordneten Konzeptlink zur Haupt-App-Routing-Datei lädt.

-1
Balamurugan P 10 Mai 2019 im 07:13