Angular Integration

Build enterprise-grade applications with Angular and Meteor

Angular is a platform and framework for building single-page client applications. Meteor provides official support for Angular, combining Angular’s powerful features with Meteor’s real-time data capabilities.

The primary resource for Angular integration with Meteor is the Angular-Meteor site, which provides comprehensive documentation, tutorials, and examples.

Getting Started

Angular-Meteor is maintained as a separate project that provides seamless integration between Angular and Meteor.

Installation

The Angular-Meteor package provides everything needed to build Angular applications with Meteor:

meteor npm install --save angular2-meteor angular2-meteor-polyfills
meteor add angular2-compilers

Key Features

Full Stack Reactivity

Automatic data synchronization between client and server

TypeScript Support

First-class TypeScript integration out of the box

RxJS Integration

Reactive data streams with Angular observables

Ionic Support

Build mobile apps with Ionic and Meteor

Project Structure

A typical Angular-Meteor application structure:

/client
  main.ts              # Client entry point
  main.html            # Main HTML file
/imports
  /api                 # Collections and methods
    /tasks
      tasks.ts
      tasks.methods.ts
      tasks.publications.ts
  /ui
    /components        # Angular components
      /task-list
        task-list.component.ts
        task-list.component.html
    /services          # Angular services
    app.module.ts      # Main app module
/server
  main.ts              # Server entry point

Basic Setup

Client Bootstrap

Create /client/main.ts:

import 'angular2-meteor-polyfills';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Meteor } from 'meteor/meteor';
import { AppModule } from '../imports/ui/app.module';

Meteor.startup(() => {
  platformBrowserDynamic().bootstrapModule(AppModule);
});

App Module

Create /imports/ui/app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TaskListComponent } from './components/task-list/task-list.component';

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    AppComponent,
    TaskListComponent
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule {}

Reactive Data

Angular-Meteor provides reactive data integration through RxJS observables.

Using Collections

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Tasks } from '../../../api/tasks/tasks';

@Component({
  selector: 'task-list',
  templateUrl: './task-list.component.html'
})
export class TaskListComponent implements OnInit {
  tasks: Observable<Task[]>;
  
  ngOnInit() {
    this.tasks = Tasks.find({}).zone();
  }
}

Subscriptions

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Meteor } from 'meteor/meteor';
import { MeteorObservable } from 'meteor-rxjs';
import { Subscription } from 'rxjs';

@Component({
  selector: 'task-list',
  templateUrl: './task-list.component.html'
})
export class TaskListComponent implements OnInit, OnDestroy {
  tasks: Observable<Task[]>;
  subscription: Subscription;
  
  ngOnInit() {
    this.subscription = MeteorObservable.subscribe('tasks').subscribe(() => {
      this.tasks = Tasks.find({}).zone();
    });
  }
  
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Methods and Collections

Collection

import { Mongo } from 'meteor/mongo';

export interface Task {
  _id?: string;
  title: string;
  completed: boolean;
  createdAt: Date;
}

export const Tasks = new Mongo.Collection<Task>('tasks');

Methods

import { Meteor } from 'meteor/meteor';
import { Tasks } from './tasks';

Meteor.methods({
  'tasks.insert'(title: string) {
    Tasks.insert({
      title,
      completed: false,
      createdAt: new Date()
    });
  },
  
  'tasks.remove'(taskId: string) {
    Tasks.remove(taskId);
  },
  
  'tasks.toggleComplete'(taskId: string) {
    const task = Tasks.findOne(taskId);
    if (task) {
      Tasks.update(taskId, {
        $set: { completed: !task.completed }
      });
    }
  }
});

Component

import { Component } from '@angular/core';
import { MeteorObservable } from 'meteor-rxjs';

@Component({
selector: 'task-list',
templateUrl: './task-list.component.html'
})
export class TaskListComponent {
addTask(title: string) {
MeteorObservable.call('tasks.insert', title).subscribe();
}

removeTask(taskId: string) {
MeteorObservable.call('tasks.remove', taskId).subscribe();
}

toggleTask(taskId: string) {
MeteorObservable.call('tasks.toggleComplete', taskId).subscribe();
}
}

Authentication

Angular-Meteor integrates with Meteor’s accounts system:

import { Component } from '@angular/core';
import { Meteor } from 'meteor/meteor';
import { MeteorObservable } from 'meteor-rxjs';

@Component({
  selector: 'login',
  templateUrl: './login.component.html'
})
export class LoginComponent {
  currentUser: Meteor.User | null = null;
  
  ngOnInit() {
    MeteorObservable.autorun().subscribe(() => {
      this.currentUser = Meteor.user();
    });
  }
  
  login(email: string, password: string) {
    Meteor.loginWithPassword(email, password, (error) => {
      if (error) {
        alert(error.message);
      }
    });
  }
  
  logout() {
    Meteor.logout();
  }
}

Routing

Use Angular Router with Meteor:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';
import { TasksComponent } from './pages/tasks/tasks.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'tasks', component: TasksComponent },
  { path: '**', redirectTo: '' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Mobile Development

Build mobile apps with Ionic and Meteor:

meteor npm install --save @ionic/angular

import { NgModule } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    IonicModule.forRoot()
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Testing

Angular-Meteor supports standard Angular testing:

import { TestBed } from '@angular/core/testing';
import { TaskListComponent } from './task-list.component';

describe('TaskListComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [TaskListComponent]
    });
  });
  
  it('should create', () => {
    const fixture = TestBed.createComponent(TaskListComponent);
    const component = fixture.componentInstance;
    expect(component).toBeTruthy();
  });
});

Best Practices

Use TypeScript

Take advantage of TypeScript’s type safety for collections and methods:

export interface Task {
  _id?: string;
  title: string;
  completed: boolean;
}

export const Tasks = new Mongo.Collection<Task>('tasks');

Leverage RxJS

Use RxJS operators to transform and combine data streams:

this.tasks = Tasks.find({}).zone().pipe(
  map(tasks => tasks.filter(t => !t.completed)),
  debounceTime(300)
);

Unsubscribe properly

Always unsubscribe from observables in ngOnDestroy:

ngOnDestroy() {
  this.subscription.unsubscribe();
}

Use services for data access

Create Angular services to encapsulate Meteor data operations:

@Injectable()
export class TasksService {
  getTasks(): Observable<Task[]> {
    return Tasks.find({}).zone();
  }
}

Resources

Angular-Meteor

Official Angular-Meteor documentation and tutorials

GitHub Repository

Source code and examples for Angular-Meteor

Angular Documentation

Official Angular framework documentation

Ionic Framework

Build mobile apps with Ionic and Angular

Community and Support

Stack Overflow

Ask questions with the angular-meteor tag

Meteor Forums

Discuss Angular-Meteor on the Meteor forums