使用Angular编译器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

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

我们刚刚发布了新版本的angular编译器，新版本的编译器将ES2015导入语法转换为NodeJS的CommonJS语法。通过这些编译器，您需要使用模块或ecmascript包来使它们在更新您的流星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)时，在服务器捆绑包中有一个文件包/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中的导入方式相同。这就是问题所在。

使用release 9.0.0来解决ngx-translate的问题，这个问题就解决了。

但是其他的npm模块也出现了同样的问题Uncaught SyntaxError: Unexpected token import (这些模块必须为commonjs做一个捆绑包，而不是角度流星问题)。你可以像这样用babel来解决这个问题(在这个例子中，我使用了ngx-page-scroll来呈现同样的问题)：

在您的项目中：

1. npm install --save babel-cli babel-preset-es2015
2. add a npm script in package.json in "scripts“scope

”scripts“scope中的npm脚本

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

要安装dependencies

• run npm run compile_ngx-page-scroll，请运行

• npm install，而babel将编译目标js文件并运行您的服务器