因此,我升级到了angular 4+,以便可以将通用包用于SEO的服务器端渲染。我通过将其升级到angular 4+在现有的angular 2+项目中实现了这一点,并从https://github.com/evertonrobertoauler/cli-universal- demo/commit/a2610286bd3db5d4f4cce4318d7c220c11963eb6进行了所有必要的配置。
我使用ng-bootstrap https://ng- bootstrap.github.io/#/home(v1.0.0-alpha.22)只有一个区别。但是,当我使用 npm run start-u-dev 运行节点服务器时,在ng-bootstrap中出现import关键字错误。
app-ui@0.0.0 start-u-dev /Users/giric/Projects/apnaDoctor/webapp/appUI ts-node src/server.ts /appUI/node_modules/@ng-bootstrap/ng-bootstrap/accordion/accordion.module.js:1 (function (exports, require, module, __filename, __dirname) { import { NgModule } from '@angular/core'; ^^^^^^ SyntaxError: Unexpected token import at createScript (vm.js:53:10) at Object.runInThisContext (vm.js:95:10) at Module._compile (module.js:543:28) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:488:32) at tryModuleLoad (module.js:447:12) at Function.Module._load (module.js:439:3) at Module.require (module.js:498:17) at require (internal/module.js:20:19) at Object.<anonymous> (/appUI/dist/ngfactory/src/app/app.server.module.ngfa ctory.ts:18:1) at Module._compile (module.js:571:32) at Module.m._compile (/appUI/node_modules/ts-node/src/index.ts:406:23) at Module._extensions..js (module.js:580:10) at Object.require.extensions.(anonymous function) [as .ts] (/webapp/appUI/node_mod ules/ts-node/src/index.ts:409:12) at Module.load (module.js:488:32) pm ERR! Darwin 16.6.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "start-u-dev" npm ERR! node v7.7.4 npm ERR! npm v4.1.2 npm ERR! code ELIFECYCLE npm ERR! app-ui@0.0.0 start-u-dev: `ts-node src/server.ts` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the app-ui@0.0.0 start-u-dev script 'ts-node src/server.ts'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the app-ui package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! ts-node src/server.ts npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs app-ui npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls app-ui npm ERR! There is likely additional logging output above. npm ERR! Please include the following file with any support request:
这就是我的package.json的样子
{ "name": "app-ui", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "prestart": "npm install", "postinstall": "bower install", "prestart-u-dev": "npm install && ng build && ngc", "start-u-dev": "ts-node src/server.ts", "prestart-u-prod": "npm install && ng build --prod && ngc", "start-u-prod": "ts-node src/server.ts" }, "private": true, "dependencies": { "@angular/animations": "^4.0.1", "@angular/cli": "^1.0.0-rc.1", "@angular/common": "^4.0.1", "@angular/compiler": "^4.0.1", "@angular/compiler-cli": "^4.0.1", "@angular/core": "^4.0.1", "@angular/forms": "^4.0.1", "@angular/http": "^4.0.1", "@angular/platform-browser": "^4.0.1", "@angular/platform-browser-dynamic": "^4.0.1", "@angular/platform-server": "^4.0.1", "@angular/router": "^4.0.1", "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.22", "angular2-toaster": "^3.0.1", "core-js": "^2.4.1", "ng2-webstorage": "^1.5.1", "rxjs": "^5.1.0", "rxjs-es": "^5.0.0-beta.12", "typescript": "^2.2.2", "ui-router-ng2": "^1.0.0-beta.4", "zone.js": "^0.7.6" }, "devDependencies": { "@types/jasmine": "2.5.38", "@types/node": "~6.0.60", "codelyzer": "~2.0.0", "jasmine-core": "~2.5.2", "jasmine-spec-reporter": "~3.2.0", "karma": "~1.4.1", "karma-chrome-launcher": "~2.0.0", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^0.2.0", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "node-sass": "^4.5.0", "protractor": "~5.1.0", "raw-loader": "^0.5.1", "sass-loader": "^6.0.3", "ts-node": "~2.0.0", "tslint": "~4.4.2" } }
更新:早些时候我删除了angular2-toaster,但是后来我再次添加了它,只是为了确保它不仅仅是抛出相同错误的toaster模块。事实证明,angular2-toaster和ng- bootstrap都引发了相同的错误。
更新2:当我使用 ng server 运行 服务器时 ,它工作正常,使用ng- bootstrap和angular2-toaster以及angular 4+都没有问题
有什么建议?提前致谢。
对于那些试图了解解决方案是什么的人,您基本上想使用和白名单angular2-toaster以及其他模块来解决此问题。
angular2-toaster
ng eject
webpack.config.js
webpack-node-externals
npm install
``` const nodeExternals = require(‘webpack-node-externals’);
module.exports = { ... target: 'node', externals: [nodeExternals({ whitelist: [ /^@ng-bootstrap\/ng-bootstrap/, /^angular2\-toaster/, ] })], ... }
```