Angular4 + Universal + ng-bootstrap导致“意外令牌导入”错误

所以我升级到了angular度4+，这样我就可以利用通用包进行服务器端渲染，以达到search引擎优化的目的。 我通过将其升级到angular度4+，并在https://github.com/evertonrobertoauler/cli-universal-demo/commit/a2610286bd3db5d4f4cce4318d7c220c11963eb6中完成了所有必要的configuration，在我现有的angular 2+项目中实现了该项目。

只有一个区别我正在使用ng-bootstrap https://ng-bootstrap.github.io/#/home（v1.0.0-alpha.22 ）。 但是当我使用npm运行start-u-dev运行节点服务器时，我在ng-bootstrap中得到了导入关键字的这个错误。

---

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，但是我再次添加它只是为了确保它不只是吐司模块抛出相同的错误。 原来，angular2-toaster和ng-bootstrap都抛出了相同的错误。

更新2：当我使用ng服务器运行服务器时 ，它工作正常，使用ng-bootstrap和angular2-toaster与angular度4+

有什么build议么？ 提前致谢。

Answer 1

对于那些试图了解解决scheme的人来说，你基本上想要使用angular2-toaster和其他模块白名单来angular2-toaster这个问题。

1. 如果使用angular-cli，则使用ng eject创build一个webpack.config.js

2. 通过npm install安装webpack-node-externals依赖关系，并在webpack.config.js文件中添加以下几行

    const nodeExternals = require('webpack-node-externals'); module.exports = { ... target: 'node', externals: [nodeExternals({ whitelist: [ /^@ng-bootstrap\/ng-bootstrap/, /^angular2\-toaster/, ] })], ... } 

Answer 2

这显然是一个构build问题 – 您的服务器端代码似乎没有适当的转换设置。 请注意， ng-bootstrap （与任何其他的Angular 2.x +库一样）以下列方式发送代码：

• 非捆绑式ES2015代码（带import）
• UMD捆绑的ES5代码（无需导入）

如果你想在服务器上运行ng-bootstrap，你有两个select：设置合适的转换pipe道，使用非捆绑的代码或者从bundle（位于bundles文件夹中）导入。

如果你决定采用ES5捆绑包的方式，你应该从@ng-bootstrap/ng-bootstrap/dist/ng-bootstrap而不是@ng-bootstrap/ng-bootstrap导入。 但要清楚，我不会推荐它，因为您将不得不在服务器端和客户端代码中有不同的导入。

Answer 3

我想你可以创build两个模块。 一个是针对浏览器导入的ng-bootstrap，一个是针对server不导入的ng-bootstrap。 我认为你必须为浏览器模块和服务器模块共同创build一个共享组件，服务的模块。 莫代尔不会通过服务器呈现给search引擎优化。