現有項目上的 Angular 通用

Question

所以我按照這篇文章在預先存在的 angular 5 項目上實現 SSR 並在我運行命令時遇到了這些問題

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

這是我控制台的輸出

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)

包.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"
  }

配置文件

{
  "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"
  ]
 }
}

顯然，stackoverflow 抱怨我的帖子主要是代碼，所以我想我必須多寫一點才能讓我發布問題，請耐心等待。 在這種情況下有什么出路？

Answer 1

截至今天，使用Angular Universal到Angular運行服務器端渲染就像這兩個步驟一樣簡單：

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

關於每個自動創建/修改的文件的作用的解釋已在此處完美解釋https://www.digitalocean.com/community/tutorials/angular-angular-universal

Answer 2

我在您的依賴項中沒有看到ts-loader

npm install --save ts-loader@3.5.0

理想情況下，您應該遵循官方文檔來設置 Angular Universal。 有用：

https://angular.io/guide/universal

這里有一個工作示例。