Angular2-Meteor

Angular2 + Meteor integration.

Angular2 version: beta-9.

Change Log

Check out change log of the package here.

Tutorial

If you are new to Angular 2, we recommend to check out our 15-steps Angular2+Meteor tutorial.

Quick Start

Install package:

With Meteor 1.3:

    npm install angular2-meteor --save
    npm install angular2-meteor-auto-bootstrap --save

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

   meteor remove blaze-html-templates

And add Angular2 compilers package:

   meteor add barbatus:ng2-compilers

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

Notes:

Meteor 1.3 uses CommonJS implementation for modules loading so you do not need to use SystemJS or any other loader!

With Meteor 1.2

   meteor add angular2-meteor

Notes:

The compilers are part of this package.
Meteor 1.2 does not have modules loader, so you need to use SystemJS as modules loader (comes with this package!)

Import Angular2 into your app:

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

ES6 modules are supported via CommonsJS (starting in Meteor 1.3) 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/bootstrap';
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 is app.ts, the package will import client/app it automatically.

( Note that if you use Meteor 1.2, you need to use SystemJS imports to load your main file!)

Start using Meteor in your Angular2 app:

This package comes with some modules that makes it easy to use Meteor in Angular2.

You can use Meteor collections in the same way as you would do in a regular Meteor app with Blaze, you just need to use another bootstrap method, instead of the one the comes with Angular2:

1import {bootstrap} from 'angular2-meteor-auto-bootstrap';

And now you can iterate Mongo.Cursor objects with Angular 2.0 ngFor!

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!

To use Meteor features, make sure that your components extends MeteorComponent, and you can feature that comes from Meteor:

1    import {Component, View} from 'angular2/core';
2    import {bootstrap} from 'angular2-meteor-auto-bootstrap';
3    import {MeteorComponent} from 'angular2-meteor';
4    import {MyCollection} form '../model/my-collection.ts';
5
6    @Component({
7      selector: 'socially'
8    })
9    @View({
10      template: "<p>Hello World!</p>"
11    })
12    class Socially extends MeteorComponent {
13      myData : Mongo.Cursor<any>;
14    
15      constructor() {
16         this.myData = MyCollection.find({});
17         this.subscribe('my-subscription'); // Wraps Meteor.subscribe
18      }
19      
20      doSomething() {
21         this.call('server-method'); // Wraps Meteor.call
22      }
23    }
24
25    bootstrap(Socially);

You can find more examples in the full tutorial!

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 use TypeScript also in the server side, so you can share you interfaces with both client and server!

Similar to the client's main module app file, Meteor checks for the existence of the main file in the server folder and, in case of success, will import it for you.

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.

We recommend to use something like this default config file:

1{
2  "compilerOptions": {
3    "experimentalDecorators": true,
4    "module": "commonjs",
5    "target": "es5",
6    "isolatedModules": false,
7    "moduleResolution": "node",
8    "emitDecoratorMetadata": true,
9    "removeComments": false,
10    "noImplicitAny": false,
11    "sourceMap": true
12  }
13}

By default, all modules from node_modules are included so you do not need to handle typings when you first create an app.

Roadmap

You can check out the package's roadmap and its status under this repository's issues.

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.

Clone the source to your computer

In order to work with this package locally when using Meteor 1.3 project, follow these instructions:

Clone this repository to any folder. Note that if you clone into Meteor project directory - you need to put the cloned folder inside a hidden file so Meteor wont try to build it! just create a folder that starts with . under your project root, it should look like that:

MyProject
   .local-work
      angular2-meteor
   .meteor
   client
   server
   public

Make sure that you already have node_modules directory under your root - if not - create it:
```
$ mkdir node_modules
```
Also, make sure that you have a NPM project initialized in your directory (you should have package.json), if not, use:
```
$ npm init
```
Make sure that you do not have angular2-meteor already - check under node_modules - if you do, delete it.

Now you have two options, you can specify the local copy in the package.json of your project, as follow:

1{
2   "dependencies": {
3      "angular2-meteor": "./local-work/angular2-meteor"
4   }
5}

And then make sure to run the NPM install command:

$ npm install

**Or, ** you can link the directory using NPM command like tool, as follow:

$ npm link ./local-work/angular2-meteor

Building the project from sources

In order to use your local copy of Angular2-Meteor, you have two options:

Import the TypeScript source code from the package, for example:

import {MeteorComponent} from 'angular2-meteor/modules/meteor_component.ts';

Or, you can keep the same code you have now, but you will need to build Angular2-Meteor source code each change you perform, by using the build.sh script inside the node_modules/angular2-meteor directory.

The build proccess uses Webpack in order to perform the build, using ts-loader, so make sure that you have webpack package installed from NPM.

Troubleshoot

When working with local package, note that you should never have two local packages of angular2 package, you should have it only under node_modules/angular2 of the root directory. In case of weird errors regarding missing direcrtives - make sure that you do not have a copy of angular2 package under node_modules/angular2-meteor/node_modules/angular2!

urigo:angular2-meteor