Skip to content

Instantly share code, notes, and snippets.

@mdonkers

mdonkers/README.md

Last active March 2, 2016 20:17
Show Gist options
  • Save mdonkers/efc2e8f21ab9dd4f760a to your computer and use it in GitHub Desktop.
Save mdonkers/efc2e8f21ab9dd4f760a to your computer and use it in GitHub Desktop.
Download ZIP
Meteor setup for TypeScript and Angular 2
Raw
README.md

Intro

This document and related files show how a basic working setup for Meteor is created with TypeScript and Angular 2.

The following preconditions apply:

  • Meteor 1.2 installed
  • NodeJS installed (I used 5.7)

Steps

  1. Create a new Meteor project

  2. Install / remove the following packages for Meteor:

     $ meteor add urigo:angular2-meteor
 $ meteor remove angular
 $ meteor remove blaze-html-templates
 $ meteor remove ecmascript

  3. Install additional TypeScript definitions from inside the Meteor project folder (not sure if step is needed):

     $ npm install typings -g
 $ typings install meteor --ambient
 $ typings install es6-shim --ambient
 $ typings install es6-promise --ambient

  4. Create the 'tsconfig.json' and 'typings.json' files in the Meteor project folder

  5. Create the 'index.html' in the 'client' sub-directory of the Meteor project folder

  6. Create the 'main.ts' in the 'client/app' sub-directory of the Meteor project folder

WebStorm / IntelliJ Integration

For integration with WebStorm / IntelliJ, use the following plugins:

  • JavaScript
  • NodeJS
  • Meteor

Make sure to configure the TypeScript compiler to use the tsconfig.json file for compiler settings. This is also the reason we added the "outDir" config param. Normally the TypeScript compiler will output the *.js files to the same location as their original *.ts files. But this clashes when then starting Meteor with the following error:

Error: Path reservation conflict: app/client/app/main.js

By compiling to the same location as where Meteor will put the files, Meteor will overwrite the file when starting, preventing conflicts.

Helpful links

Raw
index.html
<body>
<app>Loading...</app>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('client/app/main')
.then(null, console.error.bind(console));
</script>
</body>
Raw
main.ts
import {bootstrap} from 'angular2/platform/browser'
import {Component} from 'angular2/core';
@Component({
selector: 'app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
bootstrap(AppComponent);
Raw
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"isolatedModules": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": ".meteor/local/build"
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
Raw
typings.json
{
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment