[英]Problem applying `Angular Universal` to an existing 8.2 project
[英]Angular universal on existing project
所以我按照这篇文章在预先存在的 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 抱怨我的帖子主要是代码,所以我想我必须多写一点才能让我发布问题,请耐心等待。 在这种情况下有什么出路?
截至今天,使用Angular Universal
到Angular
运行服务器端渲染就像这两个步骤一样简单:
ng add @nguniversal/express-engine --clientProject {{ name of your project }}
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
这里有一个工作示例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.