This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Structure a Basic Angular 2 Application

1:16 Angular 2 lesson by

Angular 2 projects are separated into many different files: main, modules, components, etc. This lesson shows you how to take the Hello World example of an Angular 2 app and split it across multiple files for proper organization.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Angular 2 projects are separated into many different files: main, modules, components, etc. This lesson shows you how to take the Hello World example of an Angular 2 app and split it across multiple files for proper organization.

Avatar
sairandhree

Every time I run "tsc" command it tries to compile *.d.ts files in node_modules directory, though I added that folder in "exclude" in tsConfig.json file. How should I fix it?

app/main.ts

import {platformBrowserDynamic} from "@angular/platform-browser";
@Component({
    selector:'app',
    template: `
<div>I'm the App Component</div>
`
})
export class AppComponent{}

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

platformBrowserDynamic().bootstrapModule(AppModule);

Now I want to organize each of these into their own files, so I'll go ahead and cut the component out, then create a new file in my folder called app.component.ts, open that up, and paste in, and then just make sure to import component, hop back over to my main file.

app/app.component.ts

import {Component} from "@angular/core";
@Component({
    selector:'app',
    template: `
<div>I'm the App Component</div>
`
})

We'll cut out the NgModule, cut that, and create a file for that. We'll call this app.module.ts. Open it up, and paste. Make sure to import all the necessary imports.

app/app.module.ts

import {BrowserModule} from "@angular/platform-browser";
import {AppComponent} from "./app.component";
import {NgModule} from "@angular/core";
@NgModule({
    imports:[BrowserModule],
    declarations:[AppComponent],
    bootstrap:[AppComponent]
})
export class AppModule{}

Then, back in my main, I can get rid of the imports I don't need and just make sure to import the AppModule. If I save, everything's working as it was, we have a main file which simply declares the platform we're using, and the main module we want to bootstrap.

app/main.ts

import {platformBrowserDynamic} from "@angular/platform-browser";
import {AppModule} from"./app.module";

platformBrowserDynamic().bootstrapModule(AppModule);

We have a module.ts file, which is the configuration of how we're starting up, and the different modules we want to use inside our application, and which component to bootstrap, and then we have that main component, which we called AppComponent, which was bootstrapped by our module.

You can see them sitting in this app folder next to each other, app.component, app.module and main.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?