mdonkers/README.md

## README.md

      
    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


Create a new Meteor project


Install / remove the following packages for Meteor:
 $ meteor add urigo:angular2-meteor
 $ meteor remove angular
 $ meteor remove blaze-html-templates
 $ meteor remove ecmascript


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


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


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


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


https://github.com/Urigo/angular2-meteor
http://www.angular-meteor.com/tutorials/socially/angular2/bootstrapping
https://angular.io/docs/ts/latest/quickstart.html#


## 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>

## 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);

## 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"
  ]
}

## typings.json
{
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
  }
}
	<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>
	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);
	{
	"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"
	]
	}
	{
	"ambientDependencies": {
	"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
	}
	}