Angular 延迟加载实现

我试图在angular 5中实现延迟加载

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

---

我希望contact和about组件得到延迟加载。怎么做？？我是否需要为此创建一些新模块和组件？？？

您必须创建新模块，该模块将使用主应用程序路由文件的子概念链接关于和相关组件加载。

您必须创建新模块，该模块将使用主应用程序路由文件的子概念链接关于和相关组件加载文件。

要实现延迟加载，请使用子路由，该子路由引用延迟加载模块RoutingModule，子路由将在其中进一步解析： loadChildren:'./pages/myPath/myPath.module#MyPathModule'

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

const appRoutes: Routes = [
 {
   path: 'myPath',
   loadChildren: './pages/myPath/myPath.module#LazyLoadedModule'
 },
]

---

要实现延迟加载，请使用子路由，该子路由引用延迟加载模块RoutingModule，子路由将在其中进一步解析： loadChildren:'./pages/myPath/myPath.module#MyPathModule'

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

const appRoutes: Routes = [
 {
   path: 'myPath',
   loadChildren: './pages/myPath/myPath.module#LazyLoadedModule'
 },
]

---

您可以将AboutComponent和ContactComponent添加到名为“LandingModule”的单独模块中。然后，您可以为您的着陆模块创建一个单独的路由页面

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

之后，您需要转到创建AppRoutingModule，其中包括用于创建延迟加载路由的应用程序级路由

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

如果你想阅读更多，你可以访问给定的链接

---

除了将所有路由保留在appModule中之外，添加单独的路由文件是一种很好的做法。

您可以将AboutComponent和ContactComponent添加到单独的模块中，该模块名为“LandingModule”。然后，您可以为您的着陆模块创建一个单独的路由页面

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

之后，您需要转到创建AppRoutingModule，其中包括用于创建延迟加载路由的应用程序级路由

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

如果你想阅读更多，你可以访问给定的链接

除了将所有路由保留在appModule中之外，添加单独的路由文件是一种很好的做法。

创建两个新模块：

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

为每个模块创建组件：

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

因为我们使用了--routing选项，这些模块中的每个模块都将创建一个关于routing.module.ts和联系人routing.module.ts。这里您需要指定模块的路由。将此添加到关于模块：

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

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

对于触点模块：

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

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

将app.module.ts更改为：

 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' },
  ])

创建2个新模块：

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

为每个模块创建组件：

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

因为我们使用了--routing选项，这些模块中的每个模块都将创建一个关于routing.module.ts和联系人routing.module.ts。这里您需要指定模块的路由。将此添加到关于模块：

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

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

对于触点模块：

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

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

将app.module.ts更改为：

 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' },
  ])

---

兄弟，我不明白。你能解释一下如何编码吗？你的延迟加载模块是一个有自己路由模块的模块。就像顶级AppModule有它的AppRoutingModule一样。然后，您只需在AppRoutingModule中引用一个指向LazyLoadedModule的childroute。你能解释一下如何编码吗？你的延迟加载模块是一个有自己路由模块的模块。就像顶级AppModule有它的AppRoutingModule一样。然后，您只需在AppRoutingModule中引用指向LazyLoadedModule的childroute。这里有一个很好的工作演示：我想你需要先阅读以下内容：。这里有一个很好的工作演示：请提供更好的解释和代码示例。请提供更好的解释和代码示例。ng生成模块关于--路由。这是显示错误！src/app/about/about.module.ts已经存在。@Ronit，您已经创建了about模块吗？问题发布后？没有。我有两个组件，分别名为about和contacts。我没有叫aboutI的模块，我知道了。已经有一个模块名为about。谢谢，但是当我运行appng生成模块about--routing时，我无法看到about和contact页面的内容。这是显示错误！src/app/about/about.module.ts已经存在。@Ronit，您已经创建了about模块吗？问题发布后？没有。我有两个组件，分别名为about和contacts。我没有叫aboutI的模块，我知道了。已经有一个模块名为about。谢谢，但是当我运行我的应用程序时，我无法看到关于和联系人页面的内容