Angular2 + Meteor integration.
If you are new to Angular2 and/or Meteor but want to learn them quickly, please check out our 23-steps Angular2-Meteor tutorial.
If you have rather a question than an issue, please consider the following resources at first:
The chances to get a quick response there is higher than posting a new issue here.
If you've decided that it's likely a real issue, please consider going through the following list at first:
- Check out common issues and troubleshoot section;
- Check quickly recently created/closed issues: chances are high that someone's already created a similar one or similar issue's been resolved;
- If your issue looks nontrivial, we would approciate a small demo to reproduce it. You will also get a response much faster.
Before installing any Angular2-Meteor's NPMs, we recommend to have Angular 2 NPM and
its peer dependencies added in your package.json. You can find such a list here.
It minimizes the chance to get "unmet peer dependency" warnings in the future package updates.
After that, you are ready to install Angular2-Meteor's NPMs:
npm install angular2-meteor --save
npm install angular2-meteor-auto-bootstrap --save
You'd likely prefer to install another Meteor package as well — angular2-compilers.
This package adds our own HTML processor and TypeScript compiler to a Meteor app.
TypeScript is a language that makes development with Angular 2 really easy, and currently the only one
fully supported by the Angular2-Meteor. So one of the prerequisites will be to run:
meteor add angular2-compilers
Please note that you'll have to remove the standard Meteor HTML processor if you have it installed. The reason is that Meteor doesn't allow more than two processor for one extension:
meteor remove blaze-html-templates
Angular 2 heavily relies on some polyfills and dependencies.
For example, in order to make it work, you'll need to load (import) reflect-metatada and zone.js
before you can use any component from angular2 itself.
There is a way to overcome that inconvenience (i.e., importing dependencies manually):
you can install barbatus:angular2-runtime, a package that adds all the required dependencies.
Since it's a package, it's loaded by Meteor before any user code.
Please don't forget to add a main HTML file (can be index.html or with any other name) even if your app template consists of one single tag,
e.g., <body><app></app></body>.
This package assumes TypeScript as the main language for development with Angular 2.
ES6 modules are supported via CommonsJS (introduced in Meteor 1.3) module loader library.
To start, create client/app.ts file, import Component and then bootstrap the app:
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/bootstrap';
@Component({
selector: 'socially',
template: "<p>Hello World!</p>"
})
class Socially {}
bootstrap(Socially);Add index.html file to the app root folder:
<body>
<socially></socially>
</body>At this point you should see the app working and showing "Hello word".
This package comes with some modules that makes it easy to use Meteor in Angular 2.
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:
import {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:
// ....
@Component({
templateUrl: 'client/parties.html'
})
class Socially {
constructor() {
this.parties = Parties.find();
}
}
// ....Add Angular2 template file client/parties.html with a content as follows:
<div *ngFor="#party of parties">
<p>Name: {{party.name}}</p>
</div>At this moment, you are ready to create awesome apps backed by the power of Angular 2 and Meteor!
To use Meteor features, make sure that your components extends MeteorComponent:
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2-meteor-auto-bootstrap';
import {MeteorComponent} from 'angular2-meteor';
import {MyCollection} form '../model/my-collection.ts';
@Component({
selector: 'socially'
template: "<p>Hello World!</p>"
})
class Socially extends MeteorComponent {
myData : Mongo.Cursor<any>;
constructor() {
this.myData = MyCollection.find({});
this.subscribe('my-subscription'); // Wraps Meteor.subscribe
}
doSomething() {
this.call('server-method'); // Wraps Meteor.call
}
}
bootstrap(Socially);You can read more about MeteorComponent in the [tutorial section] (http://www.angular-meteor.com/tutorials/socially/angular2/privacy-and-publish-subscribe-functions)!
Check out two demos for the quick how-to:
- the Tutorial's Socially app
- Simple Todos demo
One of the big advantages of Meteor is that you can use TypeScript and CommonJS on the server side as well.
It means that you can easily share your code between client and server!
The package uses TypeScript for Meteor to compile (transpile) .ts-files.
TypeScript configuration file a.k.a. tsconfig.json is supported as well.
Please note that tsconfig.json is not required, but if you want to configure TypeScript
in your IDE or add more options, place tsconfig.json in the root folder of your app.
You can read about all available compiler options here.
Default TypeScript options for Meteor 1.3 are as follows:
{
"compilerOptions": {
"experimentalDecorators": true,
"module": "commonjs",
"target": "es5",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"sourceMap": true
}
}To add declaration files of any global 3-party JavaScript library including Meteor itself (so called ambient typings), we recommend to use the typings utility, which is specially designed to be used for typings management with access to global registries of common 3-party libraries.
For example, to install Meteor declaration file run:
npm install typings -g
typings install registry:env/meteor --ambient
Please note that you don't need to worry about Angular 2's typings and typings of the related packages! TypeScript finds and checkes them in NPMs automatically.
Please don't use Atmosphere packages related to Angular 2 with Meteor 1.3, use NPM equivalents instead;
most of these atmosphere packages were anyways converted from NPMs.
The reason is that they are based on SystemJS, which won’t work with Meteor 1.3 and modules package any more.
For example, check out Angular2 Maps here.
Or, you may be interested in Angular 2 version of the Meteor Accounts UI. You can find out a preliminary version here.
This UglifyJS minification issue is likely to blame, which is fixed in Angular2 beta-16.
Change log of the package is located here.
You can check out the package's roadmap and its status under this repository's issues.
If you know how to make integration of Angular 2 and Meteor better, you are very welcome!
Check out CONTRIBUTION.md for more info.