Angular-cli with Material 2 and Universal posted on Aug 16, 2017

As of release 1.3 Angular-cli has support for universal. I’ve created a project with Material 2, Universal and an Express server which you can get HERE. Just to re-emphasize all the good stuff is in the repo so get that and have a look through it before following the steps below.

The starting point for the steps below is a new Angular project with the Material 2 library added. If you need help getting to that point then there is a guide to getting started with Angular-cli here and one for setting up Angular Material here.

steps to create the project

add universal

These steps are just a checklist for the Angular cli with Universal story so use that for full details.

  • install @angular/platform-server (–save-dev)
  • add src/tsconfig.server.json
  • add src/app.server.module.ts
  • add src/app.browser.module.ts
  • add src/main.server.ts
  • update main.ts to bootstrap the AppBrowserModule
  • change src/app.module.ts
  

BrowserModule.withServerTransition({
      appId: 'cli-uni'
    })

  • add server app to .angular-cli.json
  

apps: [
  ...,
   {
      "name": "uni",
      "platform": "server",
      "root": "src",
      "outDir": "dist-server",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.server.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.server.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
]

  • exclude dist-server in .gitignore

add an express server

  • install express @types/node @types/express (–save)
  • add server-src/tsconfig.json (standard node.js tsconfig with output path set to ../server)
  • add build-server script to package.json
  • add server-src/server.ts
  

"build-server": "tsc -p ./server-src/tsconfig.json"

fix missing css bundle (for server side rendering)

To get the Material styles working on the server side add the style bundle to the server index.html.

  • install glob and @types/glob (–save-dev)
  • add build/addStyleBundle.js
  • add build-uni-add-css to package.json
  

"build-uni-add-css": "node build/addStyleBundle"

  • add <!–css-bundle–> to src/index.html
  • change server/server.ts to use dist-server/index.html
  

const index = require('fs').readFileSync('./dist/index.html', 'utf8'); 

update server.ts with main.*.js bundle name on build

  • add build/setServerMainBundle.js
  • add build-set-server-main-bundle
  

"build-set-server-main-bundle": "node build/setServerMainBundle"

chosing between server side rendering or server to client transition

Just switch between the server or app index.html. So for server side the index in server.ts should be:

  

const index = require('fs').readFileSync('./dist-server/index.html', 'utf8');

and for server client transition

  

const index = require('fs').readFileSync('./dist/index.html', 'utf8');

Next steps

I will keep this repo updated with fixes and improvements. Also I will create a branch soon with all the extras for complete SEO and embedding support.