This simple Angular CLI Server Side Rendering project was created with Angular CLI 1.2.5 to be used as base for a demo app for my talk about - Angular Server Side Rendering Hacks
@ JSTalks Conference. It was recently updated to Angular 5.1.0 and Angular CLI 1.6.4
-
Install dependencies -
yarn
/npm i
-
Building the app:
-
development build -
gulp
-
production build -
gulp prod
-
Running application with node -
node ./out-server/server.js
or simplyyarn ssr-serve
/npm run ssr-serve
-> http://localhost:8080/
All server files are compiled to es2015 and extracted to the
out-server
folder. All browser files are inside thedist
folder. -
Code separation:
`*.browser.ts` - browser only files
`*.server.ts` - server only files
-
Project is configured for debugging in Visual Studio Code. Inside VSC go to the Debug section, select
Build & Launch
to build and start the application orLaunch
to start without re-building. -
Brakepoints insede angular code will become active when
renderModuleFactory
inside./src/server.ts
is called.
-m path/to/some.module.browser.ts
must be provided if we are adding a component to a browser module. We should manually import the component to the server module if it's needed.