CODEWITHSUNDEEP
angularangular5angular-universalserver-side-rendering
CE0
CE0

Reputation: 191

Angular universal on existing project

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?

Upvotes: 1

Views: 6629

Answers (2)

Daniel Danielecki
Daniel Danielecki

Reputation: 10590

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

Upvotes: 2

Saptarshi Basu
Saptarshi Basu

Reputation: 9303

I don't see ts-loader in your dependencies

npm install --save ts-loader@3.5.0

Ideally you should follow the official documentation for setting up Angular Universal. It works:

https://angular.io/guide/universal

An working example here.

Upvotes: 0

Related Questions