要实现Angular 6+ Universal只预加载特定路由的功能,可以按照以下步骤进行操作:
npm install @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader --save
app.module.ts文件中导入ServerModule和ModuleMapLoaderModule模块:import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
@NgModule({
imports: [
AppModule,
ServerModule,
ModuleMapLoaderModule
],
bootstrap: [AppComponent],
})
export class AppServerModule { }
app-routing.module.ts文件中定义需要预加载的路由:import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
const routes: Routes = [
{ path: 'home', loadChildren: './home/home.module#HomeModule' },
{ path: 'about', loadChildren: './about/about.module#AboutModule', data: { preload: true } },
{ path: 'contact', loadChildren: './contact/contact.module#ContactModule', data: { preload: true } },
];
@NgModule({
imports: [RouterModule.forRoot(routes, {
preloadingStrategy: CustomPreloadingStrategy // 自定义预加载策略
})],
exports: [RouterModule]
})
export class AppRoutingModule { }
custom-preloading-strategy.ts的文件,并定义自定义预加载策略:import { Injectable } from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';
@Injectable()
export class CustomPreloadingStrategy implements PreloadingStrategy {
preload(route: Route, load: () => Observable): Observable {
if (route.data && route.data.preload) {
return load();
} else {
return of(null);
}
}
}
app.module.ts文件中将自定义预加载策略提供给应用程序:import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CustomPreloadingStrategy } from './custom-preloading-strategy';
@NgModule({
imports: [
BrowserModule,
AppRoutingModule
],
declarations: [AppComponent],
providers: [CustomPreloadingStrategy], // 提供自定义预加载策略
bootstrap: [AppComponent]
})
export class AppModule { }
通过以上步骤,你可以设置data: { preload: true }来指定需要预加载的路由,其他路由将按需加载。