使用 angular-compilers 0.2.5 构建 Angular Meteor 应用程序失败

Question

我将https://github.com/Urigo/angular-meteor/tree/master/atmosphere-packages/angular-compilers 用于我的 angular-meteor 应用程序。当我尝试使用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

包.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

我们刚刚发布了新版本的 Angular 编译器，新版本的编译器将 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 的问题，请使用 release 9.0.0，问题就解决了。

但是其他 npm 模块也存在同样的问题Uncaught SyntaxError: Unexpected token import（这些模块必须为 commonjs 打包，不是 angular-meteor 问题）。你可以像这样用 babel 解决这个问题（例如我使用 ngx-page-scroll 会出现同样的问题）：

在您的项目中：

1. npm install --save babel-cli babel-preset-es2015
2. 在“脚本”范围内的 package.json 中添加一个 npm 脚本

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

1. 运行npm install 安装依赖项
2. 运行npm run compile_ngx-page-scroll，babel会编译目标js文件
3. 运行您的服务器并且应该可以工作