Angular Server Side Rendering - What to add to angular.json? - html

Question

I'm following Firebase's Tutorial for SSR with Angular. Unfortunately the Tutorial is outdated, since as for Angular 6 angular-cli.json was replaced with angular.json. How do I translate the step, you can find by using the link, to the angular.json file?
For comparison, here's what my file looks like:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"norebro": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/norebro",
"index": "src/index.html",
"main": "src/main.ts",
...

Answer 1

To answer your question, since you are using Angular 8 you can run this command to make your project use SSR:
ng add #nguniversal/express-engine --clientProject norebro
After you run this command you should get everything setup properly by Angular for you. To check if everything is working first build your project:
npm run build:ssr
and then serve it (and check if everything is working correctly):
npm run serve:ssr
Specifically, the things that need to be modified inside angular.jsonare:
In "projects"->"norebro" (your_project_name)->"architect"->"build"->"options" section modify outputPath like this:
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/browser",
Then in "architect" section, add a new server section like this:
"server": {
"builder": "#angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/server",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json"
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"sourceMap": false,
"optimization": {
"scripts": false,
"styles": true
}
}
}
}
As for publishing an Angular SSR application to Firebase please check this answer.
The key point is that we cannot deploy Angular SSR application using Firebase Hosting but we can do it by using Firebase Cloud Functions.
P.S: Initially, the answer was posted here but users may not find the answer to Firebase deployment here when querying (since the OP is not about deployment to Firebase). That's why I created a separate Q&A just to address that issue.
Hope this helps...

Answer 2

Immediately under build(but not inside) you should add the configuration for your server application. It would look something like this:
"server": {
"builder": "#angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/server",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json",
"stylePreprocessorOptions": {
"includePaths": [
"src/styles"
]
}
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "media"
},
"dev": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
]
}
}
},
Note that this one has some irrelevant properties, such as stylePreprocessorOptions. Let's focus on those relevant, which are the builder, outputPath, main, and tsConfig. Those are the files that would potentially change between a Server Side Rendered application and a Client Side Rendered application.

Answer 3

I have also struggled with many tutorials while I was building a project with Angular Universal, the documentation of AngularFire2 was really straightforward.