Angular6_Server Rendering SSR

Angular6_Server-side Rendering

You need to install the latest version of Angular before using server-side rendering.

npm install -g @angular/cli

or

cnpm install -g @angular/cli

github project

Create Project

ng new PWCat --routing
  1. Add universal to the project
ng g universal --client-project=PWCat

or

ng g universal --client-project=PWCat

The results are as follows:

vincent@vincent-Inspiron-7559 Dir:~/angular/Test/PWCat → master
·····$ng g universal --client-project PWCat
CREATE src/main.server.ts (220 bytes)
CREATE src/tsconfig.server.json (245 bytes)
CREATE src/app/app.server.module.ts (318 bytes)
UPDATE package.json (1603 bytes)
UPDATE angular.json (3766 bytes)
UPDATE src/main.ts (430 bytes)
UPDATE src/app/app.module.ts (807 bytes)
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

up to date in 5.69s
  1. Add app-shell

First add router-outlet to the app root html

// app.component.html
...
<router-outlet></router-outlet>
...

Execute the following command:

ng g app-shell --client-project=PWCat --universal-project=PWCat --route=app-shell-path

or

ng g app-shell --client-project=PWCat --universal-project=PWCat

The results are as follows:

CREATE src/app/app-shell/app-shell.component.css (0 bytes)
CREATE src/app/app-shell/app-shell.component.html (28 bytes)
CREATE src/app/app-shell/app-shell.component.spec.ts (643 bytes)
CREATE src/app/app-shell/app-shell.component.ts (280 bytes)
UPDATE angular.json (4025 bytes)
UPDATE src/app/app.server.module.ts (599 bytes)

Be careful:

  1. forRoot is used within app-routing.module.ts, which is an error-prone place
imports: [RouterModule.forRoot(routes)],

Compile Project

  1. First, in the angular.json file, modify the following:
"app-shell": {
  "builder": "@angular-devkit/build-angular:app-shell",
  "options": {
    "browserTarget": "PWCat:build",
    "serverTarget": "PWCat:server",
    "route": "app-shell-path"
  },
  "configurations": {
    "production": {
      "browserTarget": "PWCat:build:production"
    }
  }
}
  1. implement
ng run PWCat:app-shell:production

dist folder

PWCat
PWCat-server

You will be prompted at this time

Angular is running in the development mode. Call enableProdMode() to enable the production mode.

Then execute

ng run PWCat:build

Tips:
You can add a command to the package.json file:

"build:ssr": "ng run PWCat:app-shell:production && ng run PWCat:build"
  1. Run Project
lite-server --baseDir dist/PWCat/

The server-side rendering is now complete.

Tags: shell angular JSON npm

Posted on Wed, 18 Mar 2020 09:44:55 -0700 by TheHeretic