angular2-meteor
Advanced tools
Angular 2.0 and Meteor - the perfect stack http://www.angular-meteor.com/
Angular2 + Meteor integration.
Check out change log of the package here.
If you are new to Angular 2, we recommend to check out our 15-steps Angular2+Meteor tutorial.
Please note that this tutorial is based on the Meteor 1.2 version, while current README focuses more on the version for Meteor 1.3.
npm install https://github.com/Urigo/angular2-meteor --save
npm install https://github.com/Urigo/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 angular2-compilers
Note that this package contains now
angular2-runtimepackage which adds all polyfills required by Angular 2, so that you don't need to import polyfills likereflect-metadataetc directly. Please, make sure you have latestangular2-compilers.
For the explanation, please, read "HTML" paragraph in the above mentioned tutorial.
Notes:
<body><app></app></body> meteor add angular2-meteor
Notes:
Package assumes TypeScript as the main language for development with Angular 2.
ES6 modules are supported via CommonsJS (starting in Meteor 1.3) module loader library.
To start, create client/app.ts file, import Component and View and then bootstrap the app:
import {Component, View} from 'angular2/core';
import {bootstrap} from 'angular2/bootstrap';
@Component({
selector: 'socially'
})
@View({
template: "<p>Hello World!</p>"
})
class Socially {}
bootstrap(Socially);
Add index.html file to the app top folder:
<body>
<socially></socially>
</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:
<body>
<app></app>
</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!)
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:
// ....
@View({
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, and you can feature that comes from Meteor:
import {Component, View} 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'
})
@View({
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 find more examples in the full tutorial!
Check out two demos for the quick how-to:
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.
The package uses TypeScript for Meteor to compile (transpile) .ts-files.
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. You can read about all available compiler options [here] (https://github.com/Microsoft/TypeScript/wiki/tsconfig.json).
Preset (i.e., can't be overriden in the config) TypeScript options of the Meteor 1.3 version of this package are as follows:
{
"compilerOptions": {
"experimentalDecorators": true,
"module": "commonjs",
"target": "es3",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"sourceMap": true
}
}
For the Meteor 1.2 version:
{
"compilerOptions": {
"experimentalDecorators": true,
"module": "system",
"target": "es3",
"moduleResolution": "classic",
"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 typings utility, which is specially designed to be used for typigns management with access to global registries of common 3-party libraries.
As for Angular 2's typings and typings of the related packages, if you plan to use Meteor 1.3 and NPM packages you don't need to worry about them at all, as most of declaration files are provided in NPMs (at least for Angular 2 itself). If you plan to use Meteor 1.2 and Atmosphere packages, all required typigns will be installed (copied) automatically into the "typings" folder during the first run.
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!
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.
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 won't 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:
{
"dependencies": {
"angular2-meteor": "./local-work/angular2-meteor"
}
}
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
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 and typings NPMs installed globally.
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!
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.