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?