具有通用“意外令牌导入”的 Angular 4答案

【问题标题】：Angular 4 with universal "Unexpected token import"具有通用“意外令牌导入”的 Angular 4
【发布时间】：2018-07-07 21:12:20
【问题描述】：

我的项目在没有 Universal 的情况下正常运行，但我正在尝试使用 Universal，但我遇到了错误。

"ngx-page-scroll/src/ngx-page-scroll.service.js:1

(function (exports, require, module, __filename, __dirname) { import { Injectable, Optional, SkipSelf, isDevMode } from '@angular/core'; "

我的 package.json

 {
  "name": "resumable-ang",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
  "prestart": "ng build --prod && ngc",
  "start": "ts-node src/server.ts"
 },
  "private": true,
  "dependencies": {
  "@angular/animations": "^4.4.6",
  "@angular/common": "^4.0.0",
  "@angular/compiler": "^4.0.0",
  "@angular/core": "^4.0.0",
  "@angular/forms": "^4.0.0",
  "@angular/http": "^4.0.0",
  "@angular/platform-browser": "^4.0.0",
  "@angular/platform-browser-dynamic": "^4.0.0",
  "@angular/platform-server": "^4.*",
  "@angular/router": "^4.0.0",
  "@ng-select/ng-select": "^0.15.2",
  "@ngrx/effects": "^4.0.5",
  "@ngrx/store": "^4.0.3",
  "@types/jquery": "^3.2.15",
  "angular-hammer": "^2.2.0",
  "angular-progress-http": "^1.0.0",
  "core-js": "^2.4.1",
  "jquery": "^3.2.1",
  "ngx-carousel": "^1.3.5",
  "ngx-page-scroll": "^4.0.2",
  "ngx-progressbar": "^2.1.1",
  "rxjs": "^5.1.0",
  "web-animations-js": "^2.3.1",
  "zone.js": "^0.8.4"
},
  "devDependencies": {
  "@angular/cli": "1.1.1",
  "@angular/compiler-cli": "^4.0.0",
  "@angular/language-service": "^4.0.0",
  "@types/jasmine": "2.5.45",
  "@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-jasmine": "~1.1.0",
  "karma-jasmine-html-reporter": "^0.2.2",
  "karma-coverage-istanbul-reporter": "^1.2.1",
  "protractor": "~5.1.2",
  "ts-node": "~3.0.4",
  "tslint": "~5.3.2",
  "typescript": "~2.3.3"
}

}

【问题讨论】：

我的猜测是，由于您直接使用ts-node src/server.ts 执行 Typescript 代码，Universal 对 Typescript 不满意并且无法在本地执行它。首先将您的代码转换为 Javascript。
@Jeremy Tille 我该怎么做。你能详细解释一下吗？
嗯，Node 和浏览器是 javascript 引擎，而不是 typescript 引擎。 Typescript 并不真正应该被本地执行，它需要首先被转换为 Javascript。我使用 TSC（TypeScript 编译器），其他人使用 Babel，将 .ts 文件转换为 .js。

标签： node.js angular angular-universal

【解决方案1】：

尝试在您的 webpack 配置中将该模块列入白名单

//webpack.server.js

target: 'node',
externals: [nodeExternals({
 whitelist: [
   /^Nolanus\/ngx-page-scroll/
 ]
 })],

【讨论】：

我没有用户 webpack.server.js，我只使用 package.sjon
我正在关注这个链接coursetro.com/posts/code/68/…
有什么想法吗？我尝试使用 prerender 并删除了 webpack。