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
1
2
3
4
5
6
7
8
9
import '/imports/startup/client';
import {Component} from "@angular/core";
 
@Component({
  selector: 'app',
  template: ''
})
export class MainComponent {
}

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:

6.2 Changed the name of the main HTML file client/index.ng2.html
1
2
3
4
5
6
7
8
<head>
  <meta charset="utf-8">
  <title>Todos - All your todos synced wherever you happen to be</title>
  <meta name="description" content="The simple todo list that keeps your todos in sync everywhere free forever. Todos is open source and powered by Meteor.">
  <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>

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
5
6
7
8
9
10
11
  <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>

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import {NgModule} from [email protected]/core';
import {BrowserModule} from [email protected]/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 {
}

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
1
2
3
4
5
6
7
8
9
import 'reflect-metadata';
import 'zone.js/dist/zone.js';
import {platformBrowserDynamic} from [email protected]/platform-browser-dynamic';
import {enableProdMode} from [email protected]/core';
import {AppModule} from "./imports/app.module";
 
enableProdMode();
 
platformBrowserDynamic().bootstrapModule(AppModule);

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