angular2-meteor
Advanced tools
Angular 2.0 and Meteor - the perfect stack http://www.angular-meteor.com/
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:
To install Angular2-Meteor's NPMs:
npm install angular2-meteor --save
Second step is to add angular2-compilers package — meteor add angular2-compilers.
This package adds custom HTML processor, LESS, SASS and TypeScript compilers.
Custom HTML processor and Style compilers make sure that static resources can be used
in the way that Angular 2 requires, and TypeScript is a recommended JS-superset to develop with Angular 2.
Please note that you'll have to remove the standard Meteor HTML processor (and LESS package). 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 (zone.js, reflect-metadata etc).
There are two ways to add them:
import 'angular2-meteor-polyfills' at the top of ts-file that is loaded first;barbatus:angular2-polyfills package. 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>.
The package contains METEOR_PROVIDERS providers that simplify development of a Meteor app with Angular 2.
You can use Mongo collections in the same way as you would do in a regular Meteor app with the Blaze,
the only thing required is to import and use METEOR_PROVIDERS from angular2-meteor.
After, you can iterate Mongo.Cursors with Angular 2.0's ngFor as follows:
import {METEOR_PROVIDERS, MeteorReactive} from 'angular2-meteor';
const Parties = new Mongo.Collection('parties');
@Component({
template: `
<div *ngFor="let party of parties">
<p>Name: {{party.name}}</p>
</div>
`
})
class Socially extends MeteorReactive {
constructor() {
this.subscribe('my-subscription');
this.parties = Parties.find();
}
}
@NgModule({
imports: [BrowserModule],
providers: METEOR_PROVIDERS,
declarations: [Socially],
bootstrap: [Socially]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
MeteorReactive is a special utility class that does two things behind the scene for you:
You can read more about MeteorReactive in the [tutorial section] (http://www.angular-meteor.com/tutorials/socially/angular2/privacy-and-publish-subscribe-functions)!
At this moment, you are almost set to create awesome apps backed by the power of Angular 2 and Meteor! We recommend to check out our awesome tutorial in order to create more complex apps that have security and routing.
Check out two demos for the quick how-to:
Angular 2 allows to define a component's template and styles in two ways: using template content inline or using template URL. We recommend to use inline templates.
For that purpose, angular2-compilers's HTML, LESS, and SASS compilers process associated files and
add Node JS-modules that export string file contents outside.
After, one can import a template content in ES6 style:
import template from './foo.html';
import style from './foo.less';
For more information, please check out css-compiler and static-templates.
To get rid of the
module './foo.html' not foundwarnigns, run
typings install github:meteor-typings/angular2-compilers --global
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
}
}
There are to two major ways to install declaration files:
typings utility.A lot of NPM packages already contain typings internally, if not,
you can find almost all typings in the DefinitelyTyped repository.
For example, to install jquery typings from there,
run npm install @types/jquery, and then add a reference
at the top of your main ts-file: /// <reference types="@types/jquery" />.
As for Meteor typings, there is a special NPM that contains only its typings as well:
meteor-typings.
Install meteor-typings package and add the reference as described above.
Another one way to add typings of 3-party JavaScript libraries is
to use the typings utility.
This utility is designed to search across and install typings not only from DefinitelyTyped but
also own typings registries, which may be helpful in many cases.
For example, to install Meteor declaration file run:
npm install typings -g
typings install env~meteor --global
For more information on Meteor typings, please read here.
It's possibly to use Angular2 with Babel as the primary language.
To make development as convenient as it would be if you chose TypeScript, there exist special Babel plugins. So you'll need to install them:
npm i babel-plugin-angular2-annotations babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties babel-plugin-transform-flow-strip-types --save-dev
Then add .babelrc as follows:
{
"plugins": [
"angular2-annotations",
"transform-decorators-legacy",
"transform-class-properties",
"transform-flow-strip-types"
]
}
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.
FAQs
Angular 2.0 and Meteor - the perfect stack http://www.angular-meteor.com/
The npm package angular2-meteor receives a total of 32 weekly downloads. As such, angular2-meteor popularity was classified as not popular.
We found that angular2-meteor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.
Security News
Sonar’s acquisition of Tidelift highlights a growing industry shift toward sustainable open source funding, addressing maintainer burnout and critical software dependencies.