Угловой универсальный на существующий проект

Таким образом, я следовал этой статье, реализующей SSR в уже существующем угловом 5 проекте, и столкнулся с этими проблемами при запуске команды

./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)

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

Так что, очевидно, stackru жалуется, что мое сообщение в основном написано на коде, поэтому я думаю, что мне нужно написать немного больше, чтобы я мог опубликовать вопрос, пожалуйста, потерпите меня. Какой может быть выход для такой ситуации?

Источник

1 ответ

На сегодняшний день выполнение рендеринга на стороне сервера с использованием Angular Universal к Angular так же просто, как эти 2 шага:

  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

Источник

Я не вижу ts-loader в ваших зависимостях

npm install --save ts-loader@3.5.0

В идеале вы должны следовать официальной документации по настройке Angular Universal. Оно работает:

https://angular.io/guide/universal

Рабочий пример здесь.

Источник
Другие вопросы по тегам