Creating Angular 2 Application

Note: If you skipped ahead to this section, click here to download a zip of the tutorial at this point.

First, let's create Angular 2 basic component in the client/main.component.ts file:

6.1 Create the MainComponent client/main.component.ts

import '/imports/startup/client';

import {Component} from "@angular/core";

@Component({

  selector: 'app',

  template: ''

})

export class MainComponent {

Improve this code

We we later include this main component inside our main module - but we will start with the Component.

Let's understand what do we have here - MainComponent created as component, with the app tag selector.

Now we need to use the <app> tag in order to load the application.

In order to do so, we first need to change the main HTML file name, and add .ng2 to the extension, so it will compile as Angular 2 template:

We also changed the name from "head" to "index" - it's optional.

Now we need to we the <app> tag, so let's add <body> to the main HTML file and add the tag inside:

6.3 Added app tag to the main HTML file client/index.ng2.html

  <meta name="viewport" content="user-scalable=no, initial-scale=1, minimal-ui, maximum-scale=1, minimum-scale=1" />

  <link rel="shortcut icon" type="image/png" href="favicon.png?v1" sizes="16x16 32x32 64x64">

  <link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-precomposed.png">

</head>

<body>

    <app></app>

</body>

Improve this code

Great. now we need to create NgModule which is an Angular 6.module - a wrapper that bundles together Component, Directives, Pipes and Providers. This is the object we will init and create an instance of - and this will be our main entry point.

So let's create it:

6.4 Create the app NgModule client/app.module.ts

import {NgModule} from '@angular/core';

import {BrowserModule} from '@angular/platform-browser';

import {MainComponent} from "./main.component";

@NgModule({

    // Components, Pipes, Directive

    declarations: [

        MainComponent

],

    // Entry Components

    entryComponents: [

        MainComponent

],

    // Providers

    providers: [],

    // Modules

    imports: [

        BrowserModule

],

    // Main Component

    bootstrap: [MainComponent]

})

export class AppModule {

Improve this code

We declared some properties in our NgModule:

declarations - these are our Component, Directives and Pipes, we declare them here and we wont need to import them later.
entryComponents - declared the main entry components.
providers - these are the Providers, Services of the app.
imports - external NgModules we want to include.
bootstrap - the main Component to bootstrap.

You can read more about NgModule and it's properties in Angular 2 NgModule docs.

Our next step is a bit of maintenance - we will move any import we use into client/imports because of Meteor's behavior.

Any future components we will create will go into this folder - and our NgModule file too.

Now we need to create a single entry point for the client side, which is the only TypeScripts file that won't go inside the imports directory - client/main.ts.

The main.ts file will also initialize our NgModule:

6.6 Created the main bootstrap file for the AppModule client/main.ts

import 'reflect-metadata';

import 'zone.js/dist/zone.js';

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

import {enableProdMode} from '@angular/core';

import {AppModule} from "./imports/app.module";

enableProdMode();

platformBrowserDynamic().bootstrapModule(AppModule);

Improve this code

That's it - we have a work NgModule with a Component!

Blaze to Angular 2 Migration

https://github.com/dotansimha/angular2-blaze-migration-tutorial

Creating Angular 2 Application