Modulo principal da aplicação

Vamos criar o arquivo alurapic/client/app/app.module.ts, inclusive já importando o decorator ngModule e a classe BrowserModule:

// alurapic/client/app/app.module.ts

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

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

Veja que nossa classe AppModule possui o decorator NgModule e que neste decorator importarmos o BrowserModule, através da propriedade imports. Isso indica que um módulo anotado com ngModule pode importar outros módulos também anotados com ngModule. No caso, BrowserModule, ao ser carregado, já disponibiliza diversos recursos padrões do Angular sem termos que importar cada recurso individualmente como as diretivas ngIf e ngFor que aprenderemos a utilizar no futuro. Mas isso também não é suficiente.

Todos os componentes que fizerem parte do módulo, precisam ser registrados em declarations. Veja que registramos AppComponent.

Por fim, quando o módulo da aplicação for carregado, precisamos indicar qual será o primeiro componente carregado, nesse caso queremos que seja o AppComponent. Para isso, vamos importar nosso componente e adicioná-lo nas propriedades declarations e bootstrap:

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

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

O problema é que o código não funcionará. Para podermos importar AppComponent a classe deve ter sido exportada e não usamos a sintaxe export. Lembre-se que cada componente é definido dentro de um arquivo .ts e esse arquivo nada mais é do que um módulo do ES6. Só temos acesso a classes ou qualquer outro artefato dentro de um módulo do ES6 se utilizarmos a sintaxe export. Alterando nosso componente:

// alurapic/client/app/app.component.ts

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

@Component({
    selector: 'app',
    templateUrl: './app/app.component.html'
})
export class AppComponent {}

Como nosso AppModule precisará ser carregado pelo Angular, vamos exportá-lo também:

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

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