Sharing Top Content from the Angular-sphere.

Angular Server Side Templates in Express

  • Below is my sub Express application: – – import * as express from ‘express’; import {enableProdMode} from ‘@angular/core’; let app: any = express(); import * as path from ‘path’; const VIEW_FOLDER = path.join(process.cwd(), ‘angular-server’); import ‘zone.js/dist/zone-node’; import ‘reflect-metadata’; import {ngExpressEngine} from ‘@nguniversal/express-engine’; import {AppServerModuleNgFactory} from enableProdMode(); app.engine(‘html’, ngExpressEngine({ bootstrap: AppServerModuleNgFactory,…
  • I have included the relevant Angular code below: – – import {NgModule} from ‘@angular/core’; import {ServerModule} from ‘@angular/platform-server’; import {AppModule} from ‘.
  • /app.component’; @NgModule({ imports: [ AppModule, ServerModule ], bootstrap: [ AppComponent ], }) export class AppServerModule {} – – import {NgModule} from ‘@angular/core’; import {CommonModule} from ‘@angular/common’; import {BrowserModule} from ‘@angular/platform-browser’; import {AppComponent} from ‘.
  • /app.component’; @NgModule({ imports: ‘angular-samples’}), CommonModule], declarations: [AppComponent] }) export class AppModule {} – – import {Component} from ‘@angular/core’; import {CHAPTERS} from ‘.
  • map(articles => { return CHAPTERS.map(chapter => { const article = articles.find(a => a.friendlyUrl === chapter.key); chapter.intro = article.intro; return chapter; }); }); } } – – You may have noticed that for server side applications we import but otherwise most of the code is familiar Angular code.

In this post I will show how to use Angular to render server side templates.

A key win of the Angular architecture is that the framework is not tied to a particular runtime platform.

While browsers still remain the most typical platform for Angular applications, it’s easy to execute Angular code on other runtimes. One popular option is server side rendering.

In this post I will show how to use Angular Universal to render pure server side templates in Node/Express.

The typical use case for Angular Universal is to combine server and client side rendering to improve SEO and load performance of JavaScript applications.

In my application I am less interested in the client side part.

Instead I will focus on the server side part since I want to use Angular to replace some of my existing Mustache templates.

The feature I want to convert is my Angular article dashboard.

Since all my existing server templates use Mustache, I had to find a way to allow Angular and Mustache to coexist in the same application.

The solution I ended up with was to create a sub application in Express where I configured Angular as the view engine. In the main app the view engine is still Mustache.

Below is my sub Express application:

import * as express from ‘express’; import {enableProdMode} from ‘@angular/core’; let app: any = express(); import * as path from ‘path’; const…

Angular Server Side Templates in Express