Build Angular Meteor app fails with angular-compilers 0.2.5

Question

I use https://github.com/Urigo/angular-meteor/tree/master/atmosphere-packages/angular-compilers for my angular-meteor application. When i try compile with meteor build fails.

The command i run:

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

And when i run the application server bundle this error appears:

Uncaught SyntaxError: Unexpected token import

My project use:

[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
msavin:mongol
jalik:ufs
jalik:ufs-gridfs
[email protected]
[email protected]
[email protected]
[email protected]
mys:fonts
[email protected]
[email protected]
astrocoders:one-signal
vsivsi:job-collection
btafel:accounts-facebook-cordova
[email protected]
[email protected]
[email protected]
percolate:synced-cron
meteorhacks:ssr
[email protected]
angular-compilers

Angular-meteor:

[email protected]
[email protected]
[email protected]
[email protected]_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"
  }
}

I appreciate the help. Regards!

Answer 1

We've just released the new version of angular-compilers, and new version of compilers transpiles ES2015 import syntax into NodeJS's CommonJS Syntax. By these compilers, you need to use modules or ecmascript packages to make them work properly with updating your Meteor meteor update --all-packages. You can see some working examples in angular-meteor GitHub repository.

Answer 2

The problem is Node doesnt support yet is6 imports (here you have an article that explains it) and produces the error Uncaught SyntaxError: Unexpected token import.

When import the module ngx-translate (version 8.0.0) in the project, in the server bundle there is the file bundle/programs/server/packages/modules.js where it inserts the ngx-translate code in the following way:

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

And the imports in bundle/programs/server/npm/node_modules/@ngx-translate/core/src they are in the same way. That's the problem.

To solve problem with ngx-translate use release 9.0.0 and the problem is solved.

But other npm modules present the same problem Uncaught SyntaxError: Unexpected token import (the modules have to make a bundle for commonjs, isn't angular-meteor problem). You can solve this problem with babel like this way (for the example i use ngx-page-scroll that presenting the same problem):

In your project:

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

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

3. run npm install to install the dependencies
4. run npm run compile_ngx-page-scroll and babel will compile the targeted js files
5. run your server and should work