“意外的令牌导入"Angular4 + Universal + ng-bootstrap 错误 [英] "Unexpected token import" error with Angular4 + Universal + ng-bootstrap
问题描述
所以我升级到 angular 4+，这样我就可以利用通用包进行服务器端渲染以实现 SEO 目的.我通过将其升级到 angular 4+ 并在 https://github.com/evertonrobertoauler/cli-universal-demo/commit/a2610286bd3db5d4f4cce4318d7c220c11963eb6.
So I upgraded to angular 4+ just so that I can leverage the universal package for server side rendering for SEO purposes. I implemented that in my existing angular 2+ project by upgrading it to angular 4+ and did all the necessary configuration from 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 关键字的错误.
There is only one difference I am using ng-bootstrap https://ng-bootstrap.github.io/#/home (v1.0.0-alpha.22). But when I run the node server using npm run start-u-dev I get this error for import keyword in 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 的样子
This is what my package.json looks like
{
"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 都抛出了同样的错误.
Update: Earlier i removed angular2-toaster, but then i added it again just to make sure it wasn't just toaster module that is throwing the same error. Turns out, both angular2-toaster and ng-bootstrap threw the same error.
更新 2:当我使用 ng server 运行服务器时，它工作正常，使用 ng-bootstrap 和 angular2-toaster 与 angular 4+ 没有问题
Update 2: When I run the server using ng server, it works fine, no issues with using ng-bootstrap and angular2-toaster with angular 4+
有什么建议吗?提前致谢.
Any suggestions? Thanks in advance.
推荐答案
对于那些试图了解解决方案是什么的人，您基本上希望使用并列入白名单 angular2-toaster 和其他提供此问题的模块.
For those trying to understand what the solution is, you basically want to use and whitelist angular2-toaster and other modules giving this issue.
- 如果使用 angular-cli，请使用
ng eject创建一个webpack.config.js 通过
npm install安装webpack-node-externals依赖项，并在webpack.config.js中添加以下几行文件
- if using angular-cli, use
ng ejectto create awebpack.config.js install the
webpack-node-externalsdependency vianpm installand add the following lines in thewebpack.config.jsfile
const nodeExternals = require('webpack-node-externals');
module.exports = {
...
target: 'node',
externals: [nodeExternals({
whitelist: [
/^@ng-bootstrap\/ng-bootstrap/,
/^angular2\-toaster/,
]
})],
...
}
这篇关于“意外的令牌导入"Angular4 + Universal + ng-bootstrap 错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
