Question

我使用https://github.com/Urigo/angular-meteor/tree/master/atmosphere-packages/angular-compilers作为角度流星应用程序。当我尝试使用meteor build编译时失败。

我跑的命令：

meteor build /my_directory_name --directory --server-only --architecture os.linux.x86_64

当我运行应用程序服务器软件包时，会出现此错误：

Uncaught SyntaxError: Unexpected token import

我的项目使用：

meteor-base@1.2.0
mobile-experience@1.0.5
mongo@1.3.0
reactive-var@1.0.11
jquery@1.11.10
tracker@1.1.3
standard-minifier-css@1.3.5
standard-minifier-js@2.2.0
es5-shim@4.6.15
shell-server@0.3.0
accounts-password@1.5.0
msavin:mongol
jalik:ufs
jalik:ufs-gridfs
service-configuration@1.0.11
accounts-ui@1.2.0
accounts-twitter@1.4.0
accounts-google@1.3.0
mys:fonts
check@1.2.5
email@1.2.3
astrocoders:one-signal
vsivsi:job-collection
btafel:accounts-facebook-cordova
babel-compiler@6.24.7
ecmascript@0.9.0
localstorage@1.2.0
percolate:synced-cron
meteorhacks:ssr
dynamic-import@0.2.0
angular-compilers

角-流星：

angular-compilers@0.2.5
angular-html-compiler@0.2.5
angular-scss-compiler@0.2.5
angular-typescript-compiler@0.2.7_1

的package.json

{
  "name": "test",
  "private": true,
  "scripts": {
    "start": "meteor --settings settings.json"
  },
  "dependencies": {
    "@agm/core": "1.0.0-beta.1",
    "@angular/animations": "4.4.6",
    "@angular/cdk": "2.0.0-beta.12",
    "@angular/common": "4.4.6",
    "@angular/compiler": "4.4.6",
    "@angular/compiler-cli": "4.4.6",
    "@angular/core": "4.4.6",
    "@angular/flex-layout": "2.0.0-beta.9",
    "@angular/forms": "4.4.6",
    "@angular/http": "4.4.6",
    "@angular/material": "2.0.0-beta.12",
    "@angular/platform-browser": "4.4.6",
    "@angular/platform-browser-dynamic": "4.4.6",
    "@angular/platform-server": "4.4.6",
    "@angular/router": "4.4.6",
    "@ngx-translate/core": "8.0.0",
    "@ngx-translate/http-loader": "2.0.0",
    "@types/node": "8.0.47",
    "angular-meteor": "1.3.12",
    "angular2-meteor-polyfills": "0.2.0",
    "angulartics2": "3.2.0",
    "babel-runtime": "6.26.0",
    "base-64": "0.1.0",
    "bcrypt": "^1.0.3",
    "core-js": "2.5.1",
    "font-awesome": "4.7.0",
    "gm": "1.23.0",
    "google-material-color": "1.3.1",
    "hammerjs": "2.0.8",
    "jquery": "3.2.1",
    "jspdf": "1.3.5",
    "md5": "2.2.1",
    "meteor-node-stubs": "0.3.2",
    "meteor-rxjs": "0.4.8",
    "meteor-typings": "1.4.1",
    "microtime": "2.1.6",
    "ng2-page-scroll": "4.0.0-beta.12",
    "prismjs": "1.8.3",
    "qrious": "4.0.2",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.5.2",
    "spawn-sync": "1.0.15",
    "thread-sleep": "2.0.0",
    "try-thread-sleep": "1.0.2",
    "ts-helpers": "1.1.2",
    "typescript": "2.5.3",
    "typescript-collections": "1.2.5",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@types/chai": "4.0.4",
    "@types/hammerjs": "2.0.35",
    "@types/highcharts": "5.0.9",
    "@types/jasmine": "2.6.2",
    "@types/meteor": "1.4.12",
    "@types/mocha": "2.2.44",
    "@types/prismjs": "1.6.5",
    "autoprefixer": "7.1.6",
    "awesome-typescript-loader": "3.2.3",
    "chai": "4.1.2",
    "chai-spies": "0.7.1",
    "codelyzer": "3.2.2",
    "jasmine-core": "2.8.0",
    "jasmine-spec-reporter": "4.2.1",
    "node-sass": "4.5.3",
    "protractor": "5.2.0",
    "ts-node": "3.3.0",
    "tslint": "5.8.0"
  }
}

我很感激帮助。此致！

Answer 1

我们刚刚发布了新版本的角度编译器，新版本的编译器将ES2015导入语法转换为NodeJS的CommonJS语法。通过这些编译器，您需要使用模块或ecmascript包来使它们更新您的Meteor meteor update --all-packages。您可以在angular-meteor GitHub存储库中看到一些有用的示例。

Answer 2

问题是Node不支持is6导入（here you have an article that explains it）并产生错误Uncaught SyntaxError: Unexpected token import.

在项目中导入模块ngx-translate（版本8.0.0）时，在服务器包中有文件bundle / programs / server / packages / modules.js，它在下面插入ngx-translate代码方式：

import { Directive, ElementRef, Input, ChangeDetectorRef } from '@angular/core';
import { equals, isDefined } from './util';
import { TranslateService } from './translate.service';

var TranslateDirective = (function () {
    function TranslateDirective(translateService, element, _ref) {
        var _this = this;
        this.translateService = translateService;
        this.element = element;
        ......
        ......

bundle/programs/server/npm/node_modules/@ngx-translate/core/src中的导入方式相同。这就是问题所在。

要解决ngx-translate使用版本9.0.0的问题，问题就解决了。

但是其他npm模块提出了同样的问题Uncaught SyntaxError: Unexpected token import（模块必须为commonjs制作一个包，不是角度流星问题）。你可以像这样用babel解决这个问题（例如我使用ngx-page-scroll表示同样的问题）：

在您的项目中：

npm install --save babel-cli babel-preset-es2015
在＆＃34;脚本＆＃34;中的package.json中添加一个npm脚本。范围

"compile_ngx-page-scroll": "babel node_modules/ngx-page-scroll -d node_modules/ngx-page-scroll --presets es2015"

运行npm install以安装依赖项
运行npm run compile_ngx-page-scroll，babel将编译目标js文件
运行您的服务器并且应该正常工作

使用角度编译器0.2.5构建Angular Meteor应用程序失败

2 个答案: