Important
ng-prerender is archived and no longer maintained - maybe use analogjs?
What if pre-rendering an Angular application wasn't difficult and didnt require multiple builds? ng-prerender uses @nguniversal/common/clover under the hood to just make it simple.
npm install @nguniversal/common ng-prerender
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
+ import { RendererModule, TransferHttpCacheModule } from '@nguniversal/common/clover';
@NgModule({
declarations: [AppComponent],
imports: [
- BrowserModule,
+ BrowserModule.withServerTransition({
+ appId: 'myapp',
+ }),
+ RendererModule.forRoot(),
+ TransferHttpCacheModule,
],
bootstrap: [AppComponent]
})
export class AppModule { }
import { bootstrapApplication, BrowserModule } from '@angular/platform-browser';
import { importProvidersFrom } from '@angular/core';
+ import {
+ RendererModule,
+ TransferHttpCacheModule,
+ } from '@nguniversal/common/clover';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, {
providers: [
- importProvidersFrom(BrowserModule),
+ importProvidersFrom(BrowserModule.withServerTransition({ appId: 'app' })),
+ importProvidersFrom(RendererModule.forRoot()),
+ importProvidersFrom(TransferHttpCacheModule),
],
}).catch((err) => console.error(err));
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
+ "prerender": "npm run build && ng-prerender [dist] [path-one] [path-two] [path-three] ..."
},
+ import { prerender } from 'ng-prerender';
+ const routes = [''];
+ await prerender('dist/app', routes);
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
+ "prerender": "npm run build && node scripts/prerender.mjs"
},