Angular universal on existing project

Issue

So i followed this article implementing SSR on a pre existing angular 5 project and encountered these issues when i ran the command

./node_modules/.bin/ts-node ./server.ts

This is the output in my console

ce0@ce0 ~/Documents/Angular/exampleSSR $ ./node_modules/.bin/ts-node ./server.ts

/home/ce0/Documents/Angular/exampleSSR/node_modules/ts-node/src/index.ts:300
    throw new TSError(formatDiagnostics(diagnosticList, cwd, ts, lineOffset))
          ^
TSError: тип Unable to compile TypeScript
Cannot find type definition file for 'jasmine'. (2688)
Cannot find type definition file for 'jasminewd2'. (2688)
Cannot find type definition file for 'node'. (2688)
Cannot find type definition file for 'q'. (2688)
Cannot find type definition file for 'selenium-webdriver'. (2688)
server.ts (3,37): Cannot find module '@angular/platform-server'. (2307)
server.ts (4,32): Cannot find module '@angular/core'. (2307)
server.ts (6,26): Cannot find module 'express'. (2307)
server.ts (7,30): Cannot find module 'fs'. (2307)
server.ts (10,5): Cannot find name 'require'. (2304)
server.ts (17,21): Cannot find name '__dirname'. (2304)
server.ts (31,34): Cannot find name '__dirname'. (2304)
at getOutput 
(/home/ce0/Documents/Angular/exampleSSR/node_modules/ts-node/src/index.ts:300:15)
at /home/ce0/Documents/Angular/exampleSSR/node_modules/ts-node/src/index.ts:330:16
at Object.compile (/home/ce0/Documents/Angular/exampleSSR/node_modules/ts-node/src/index.ts:489:17)
at Module.m._compile (/home/ce0/Documents/Angular/exampleSSR/node_modules/ts-node/src/index.ts:382:43)
at Module._extensions..js (module.js:660:10)
at Object.require.extensions.(anonymous function) [as .ts] (/home/ce0/Documents/Angular/exampleSSR/node_modules/ts-node/src/index.ts:385:12)
at Module.load (module.js:561:32)
at tryModuleLoad (module.js:501:12)
at Function.Module._load (module.js:493:3)
at Function.Module.runMain (module.js:690:10)

package.json

"dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "bulma": "^0.6.2",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19",
    "@angular/platform-server": "^5.2.0"
  },
 "devDependencies": {
     "@angular/cli": "1.6.6",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.5.3",
    "webpack-dev-server": "~2.4.5",
    "webpack": "~2.4.0",
    "autoprefixer": "^6.5.3",
    "css-loader": "^0.28.1",
    "cssnano": "^3.10.0",
    "exports-loader": "^0.6.3",
    "file-loader": "^0.10.0",
    "json-loader": "^0.5.4",
    "less-loader": "^4.0.2",
    "postcss-loader": "^1.3.3",
    "postcss-url": "^5.1.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.3",
    "script-loader": "^0.7.0",
    "source-map-loader": "^0.2.0",
    "istanbul-instrumenter-loader": "^2.0.0",
    "style-loader": "^0.13.1",
    "stylus-loader": "^3.0.1",
    "url-loader": "^0.5.7"
  }

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
  "outDir": "./dist/out-tsc",
  "baseUrl": "src",
  "sourceMap": true,
  "declaration": false,
  "moduleResolution": "node",
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "target": "es5",
  "typeRoots": [
    "node_modules/@types"
  ],
  "lib": [
    "es2016",
    "dom"
  ]
 }
}

So apparently stackoverflow complains my post is mostly code so i guess i have to write a bit more to allow me post the question, please bear with me. What could be the way out for such a situation?

Solution

As of today, running Server-Side Rendering using Angular Universal to Angular is as simple as these 2 steps:

  1. ng add @nguniversal/express-engine --clientProject {{ name of your project }}
  2. npm run build:ssr && npm run serve:ssr

Explanation about what each automatically created/modified file does has been perfectly explained here https://www.digitalocean.com/community/tutorials/angular-angular-universal

Answered By – Daniel Danielecki

Answer Checked By – Robin (AngularFixing Admin)

Leave a Reply

Your email address will not be published.