Angular 5 CLI服务器端渲染Webpack问题

Question

我遵循了angular-cli Wiki中的Wiki，进行了Angular 5中的服务器端渲染。

正确执行所有步骤。 我记得它上周工作了。 我没有对系统进行任何更改。

但是昨天，当我尝试相同的步骤npm run build：ssr && npm run serve：ssr时，我收到以下错误：

 D:\\ssr>npm run webpack:server > ssr@0.0.0 webpack:server D:\\ssr > webpack --config webpack.server.config.js --progress --colors 10% building modules 0/1 modules 1 active ...s\\ts-loader\\index.js!D:\\ssr\\server Hash: 1008694ea9ba59cc289b Version: webpack 3.11.0 Time: 917ms Asset Size Chunks Chunk Names server.js 2.85 kB 0 [emitted] server [0] ./server.ts 376 bytes {0} [built] [failed] [1 error] ERROR in ./server.ts Module build failed: TypeError: Cannot read property 'afterCompile' of undefined at successfulTypeScriptInstance (D:\\ssr\\node_modules\\ts-loader\\dist\\instance s.js:147:28) at Object.getTypeScriptInstance (D:\\ssr\\node_modules\\ts-loader\\dist\\instance s.js:48:12) at Object.loader (D:\\ssr\\node_modules\\ts-loader\\dist\\index.js:16:41) npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! ssr@0.0.0 webpack:server: `webpack --config webpack.server.config.js -- progress --colors` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the ssr@0.0.0 webpack:server script. npm ERR! This is probably not a problem with npm. There is likely additional log ging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\\Users\\eshiksha\\AppData\\Roaming\\npm-cache\\_logs\\2018-03-08T08_20_ 00_651Z-debug.log 

感谢您的帮助。

Package.json文件：

 { "name": "ssr", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server", "serve:ssr": "node dist/server.js", "build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false", "webpack:server": "webpack --config webpack.server.config.js --progress --colors" }, "private": true, "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/platform-server": "^5.2.8", "@angular/router": "^5.2.0", "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.6", "core-js": "^2.4.1", "rxjs": "^5.5.6", "ts-loader": "^4.0.1", "zone.js": "^0.8.19" }, "devDependencies": { "@angular/cli": "~1.7.2", "@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": "^4.0.1", "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~2.0.0", "karma-chrome-launcher": "~2.2.0", "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": "~4.1.0", "tslint": "~5.9.1", "typescript": "~2.5.3" } } 

Answer 1

此问题是由于ts-loader的不匹配引起的，如果Webpack版本是3.x，请使用ts-loader 3.5.0，这应该可以解决此问题。

https://github.com/TypeStrong/ts-loader/issues/729

Answer 2

@David是的，我的朋友，您说对了，这是因为ts-loader：

https://github.com/angular/angular-cli/issues/9783