Angular2-Meteor

Angular2 + Meteor integration.

Angular2 version: beta-7.

Change Log

Check out package change log here.

Documentation

Tutorial
Official website
Example application (Final version of the tutorial)
Questions and help - stack-overflow angular2-meteor tag
Discussions - the Meteor Forum
Report issues
Change Log, updates and breaking changes
Meteor Blog
Official Meteor guide for best practices
Track Roadmap here:
angular2-meteor milestones
meteor-angular2.0-socially milestones
Meteor issues related to Angular

Quick Start

Install package:

    meteor add urigo:angular2-meteor

This package adds own HTML processor, so you'll also need to remove the standard HTML processor:

   meteor remove blaze-html-templates

For the explanation, please, read "HTML" paragraph in the above mentioned tutorial.

Import Angular2 into your app:

Package supports TypeScript and Babel (.jsx file extension) as languages for development with Angular2.

ES6 modules are supported via SystemJS module loader library.

To start, create app.ts file, import Component and View and then bootstrap the app:

1    import {Component, View} from 'angular2/core';
2    import {bootstrap} from 'angular2/platform/browser';
3
4    @Component({
5      selector: 'socially'
6    })
7    @View({
8      template: "<p>Hello World!</p>"
9    })
10    class Socially {}
11
12    bootstrap(Socially);

Add index.html file to the app top folder:

1    <body>
2       <socially></socially>
3    </body>

At this point you should see app working and showing "Hello word".

If you have an HTML file in the app root folder with body or head tag (index.html in our case), the package will recognize it as your master HTML file and will skip inserting a default layout. Otherwise, it'll insert bootstrap HTML as follows:

1<body>
2    <app></app>
3</body>

Also, if you name your main client component app.ts, the package will import client/app System.js module for you.

You can name the component whatever you want, but when doing so you'll need to import it manually by adding the next script in the index.html or some JS file (say, main.js):

1Meteor.startup(() => {
2    System.import('client/foo');
3});

Start using Meteor in your Angular2 app:

This package comes with some modules that makes it easy to use Meteor in Angular2. To load that modules, you will need to bootsrap your app with the help of the package's bootstraper.

To do that, import bootstrap from Meteor-Angular2 package and remove previous one imported from angular2/angular2:

1    import {bootstrap} from 'angular2-meteor';
2
3    ....
4
5    bootstrap(Socially);

After that, you can use Meteor collections in the same way as you would do in a regular Meteor app with Blaze.

For example, change client/app.ts to:

1    ....
2
3    @View({
4      templateUrl: 'client/parties.html'
5    })
6    class Socially {
7        constructor() {
8          this.parties = Parties.find();
9        }
10    }
11
12    ....

Add Angular2 template file client/parties.html with a content as follows:

1    <div *ngFor="#party of parties">
2      <p>Name: {{party.name}}</p>
3    </div>

At this moment, you are ready to create awesome apps backed by the power of Angular2 and Meteor!

Demos

Check out two demos for the quick how-to:

the Tutorial's Socially app
Todos demo (deployed http://ng2-todos.meteor.com).

Server Side

You can import TypeScript and System.js on the server side same way you can on the client side.

Similar to the client's main module app.ts, the package checks for the existence of the main.ts file in the server folder and, in case of success, will import it for you. Otherwise, you can name main module as you want and import by:

1Meteor.startup(() => {
2    System.import('server/foo').await();
3))

TypeScript Support

The package uses this TypeScript compilers to compile .ts-files. Please, read there how you can configure TypeScript, what options are available or how you can speed up just-in-time compilation.

TypeScript configuration file a.k.a. tsconfig.json is supported as well. Place a file with this name at the root folder and start adding any available TypeScript options you want. Read about the structure [here] (https://github.com/Microsoft/TypeScript/wiki/tsconfig.json). "files" property works only for the declaration files in the "typings" folder.

By default, compiler will curse on syntactic errors and will log out all missing modules and other semantic errors to the terminal. So, if you have code like this:

1    var parties = new Mongo.Collection('parties');

It will likely curse that Mongo is undefined. Luckily, the package adds Angular2 and Meteor declaration files, which means you'll need only to reference them in your TypeScript files to fix errors.

After the first run of your app, Angular2-Meteor will create a definition file for the package API, typings/angular2-meteor/angular2-meteor.d.ts, and Angular 2 definition files (since they are available only in the Angular2 NPM) in the "typings" folder. All other typings dependencies should be installed using typigns tool:

npm install typings -g

typings meteor --ambient
typings es6-promise --ambient
typings es6-shil --ambient

There are two ways to link up typings with the app:

you can directly add a reference to, for example, typings/angular2-meteo/angular2-meteor.d.ts in every TypeScript file that uses
Angular2-Meteor and Angular 2 API as follows:
```
1 /// <reference path="typings/angular2-meteor/angular2-meteor.d.ts" />
```
To add Meteor API, you'll need to reference typings/main.d.ts, a definition that links together all other definitions installed by typings tool.
or you can add a custom TypeScript config at the root with "files" property set to contain typings/angular2-meteor/angular2-meteor.d.ts path. As soon as you've done this, TypeScript compiler will compiler every .ts-file along with angular2-meteor.d.ts, thus, recognizing Meteor and Mongo API. See, the parties demo (example/parties) for the details.

Make sure that paths are relative to the app top folder.

The package installs typings itself but doesn't overrides existing ones in the "typings" folder. So, if you've updated package and started getting errors in the console, remove "angular2" folder and "angular2-meteor.d.ts" and re-start the app. New versions of them will be re-installed in the folder.

Roadmap

This package's roadmap and its status here.

Contribution

If you know how to make integration of Angular 2 and Meteor better, you are welcome!

For the coding style guide, we use AirBnB rules with TypeScript specifics and max line width set to 100 symbols. Rules are partly enforced by the tslint.json file in the root (if you are not familiar with TSLint, read more here). Please, check that your code conforms with the rules before PR.

Commit message format

This project follows the angular project git commit message format. Please refer to the official documentation.

Setup repository

There is a git hook that needed to be installed manually.

git clone https://github.com/<Your Username>/angular2-meteor.git
cd angular2-meteor
ln -s ../../validate-commit-msg.js .git/hooks/commit-msg