Meteor and AOT (Ahead-of-time) compiler run failed

help
1

Hello everyone,

I’m using Meteor platform for building my web application, and trying to using Ahead-of-time compiler during a build process.

The compile with AOT and Rollup following this tutorial https://angular.io/docs/ts/latest/cookbook/aot-compiler.html and start “meteor run” were successfully. However, loading the http://localhost:3000/ was failed by these errors message:

28 errors
Uncaught SyntaxError: Unexpected token import
es5-shim.js:17 Uncaught TypeError: Cannot read property 'meteorInstall' of undefined
    at es5-shim.js:17
    at es5-shim.js:2789
promise.js:17 Uncaught TypeError: Cannot read property 'meteorInstall' of undefined
    at promise.js:17
    at promise.js:581
ecmascript-runtime.js:17 Uncaught TypeError: Cannot read property 'meteorInstall' of undefined
    at ecmascript-runtime.js:17
    at ecmascript-runtime.js:4630
babel-runtime.js:17 Uncaught TypeError: Cannot read property 'meteorInstall' of undefined
    at babel-runtime.js:17
    at babel-runtime.js:160
random.js:18 Uncaught TypeError: Cannot read property 'meteorInstall' of undefined
    at random.js:18
    at random.js:355
mongo-id.js:19 Uncaught TypeError: Cannot read property 'Random' of undefined
    at mongo-id.js:19
    at mongo-id.js:142
geojson-utils.js:17 Uncaught TypeError: Cannot read property 'meteorInstall' of undefined
    at geojson-utils.js:17
    at geojson-utils.js:439
...

Because when starting meteor, they built the web.browser and adding those scripts into the index.html site.

These is my source and configs:

app.module.ts

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { AppComponent } from "./app.component";

@NgModule({
    imports: [
        BrowserModule,
        CommonModule,
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule {}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  showHeading = true;
  heroes = ['Magneta', 'Bombasto', 'Magma', 'Tornado'];

  toggleHeading() {
    this.showHeading = !this.showHeading;
  }
}

main.ts

import "angular2-meteor-polyfills";
import { platformBrowser }    from '@angular/platform-browser'; 
import { AppModuleNgFactory } from './aot/imports/app/app.module.ngfactory';

Meteor.startup(() => {
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
});

rollup-config.js

import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs    from 'rollup-plugin-commonjs';
import uglify      from 'rollup-plugin-uglify'

export default {
  entry: 'client/dist/main.js',
  dest: 'client/dist/build.js', // output a single application bundle
  sourceMap: true,
  sourceMapFile: 'client/dist/build.js.map',
  format: 'iife',
  onwarn: function(warning) {
    // Skip certain warnings

    // should intercept ... but doesn't in some rollup versions
    if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }

    // console.warn everything else
    console.warn( warning.message );
  },
  plugins: [
      nodeResolve({jsnext: true, module: true}),
      commonjs({
        include: 'node_modules/rxjs/**',
      }),
      uglify()
  ]
}

tsconfig-aot.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "../node_modules/@types/"
    ],
    "outDir": "dist"
  },
  "files": [
    "./imports/app/app.module.ts",
    "./main.ts"
  ],
  "exclude": [
    "node_modules",
    ".meteor"
  ],
  "angularCompilerOptions": {
    "genDir": "aot",
    "skipMetadataEmit" : true
  }
}

Please help me, how can we integrate Meteor with Angular2’s AOT compiler?