Angular6です。基本的な事項は4以降はほぼ同じです。処理的なことは6で非推奨のものが増えました。

Angularのドキュメントを読むと分かりずらいものがあります。
言葉ではわかりずらかったことでしょう。
今回はモジュールと、ルートコンポーネントの説明をします。
モジュールの考え方としてどの単位にするかは、いろいろな考え方があります。業務単位、機能単位などがあります。
どれもメリット、デメリットとがあります。

http://leben.mobi/blog/angular_1/javascript/

Contents

1 モジュール
2 ルートコンポーネント
3 まとめ

モジュール

下記の見本ソースは1個のアプリケーションモジュールの説明になります。
アプリケーションのルートモジュールとモジュールに関するメタデータを定義します。

※ルートモジュールとは、アプリケーションで最初に起動するモジュールです
※ルートコンポーネントとは、所属するモジュールの最初に起動するコンポーネントです。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

// used to create fake backend
import { fakeBackendProvider } from './_helpers';

import { AppComponent } from './app.component';
import { routing } from './app.routing';

import { AlertComponent } from './_directives';
import { AuthGuard } from './_guards';
import { JwtInterceptor, ErrorInterceptor } from './_helpers';
import { AlertService, AuthenticationService, UserService } from './_services';
import { HomeComponent } from './home';
import { LoginComponent } from './login';
import { RegisterComponent } from './register';

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpClientModule,
    routing
  ],
  declarations: [
    AppComponent,
    AlertComponent,
    HomeComponent,
    LoginComponent,
    RegisterComponent
  ],
 providers: [
    AuthGuard,
    AlertService,
    AuthenticationService,
    UserService,
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },

    // provider used to create fake backend
    fakeBackendProvider
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

21行目：imports
このNgModuleで宣言されたコンポーネントテンプレートで必要とされる他のモジュールです。
通常、このパターンのインポートです。
27行目：declarations
このNgModuleに属するコンポーネント、ディレクティブ(タグの作成)およびパイプ(日付けなどの処理)です。
34行目：providers
このNgModuleが利用するサービスをアクセス可能にします
このソースはルートモジュールなのでexportsはありませんが、exportsを記入することによって他のモジュールでimportsをすることにより利用可能になります。
45行目：bootstrap
ルートコンポーネントを呼び出します。見本ではAppComponentを呼び出します。

ルートコンポーネント

テンプレート

<!-- main app container -->

<div class="jumbotron">
  
<div class="container">
    
<div class="row">
      
<div class="col-sm-6 offset-sm-3">
         <alert></alert>
         <router-outlet></router-outlet>
      </div>

    </div>

  </div>

</div>

6行目：アラートのイベントタグ(ディレクティブ)です。
7行目：ルーティング処理が入ります。下記のルーティング処理が引き受けます。

ルートコンポーネント

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

@Component({
  selector: 'app',
  templateUrl: 'app.component.html'
})

export class AppComponent { }

index.htmlには<app></app>があります。
この「app」タグをルートモジュールでルートコンポーネントに定義されているコンポーネントによって、を利用することによって上記テンプレートの
「<!– main app container –> <div class=”jumbotron”>・・・」に置換されます。

ルーティング

import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home';
import { LoginComponent } from './login';
import { RegisterComponent } from './register';
import { AuthGuard } from './_guards';

const appRoutes: Routes = [
  { path: '', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent },

  // otherwise redirect to home
  { path: '**', redirectTo: '' }
];

export const routing = RouterModule.forRoot(appRoutes);

<router-outlet></router-outlet>に埋め込まれる関係になります。
ルーティングはいろいろなやり方があります。
後日の記載に譲ります

9行目：ホームコンポーネントです。
canActivateによって認証が必要となり、ログインをしていなければ、表示されません。
10行目：ログイン画面に遷移します。
canActivateの機能により、ログインしていないユーザは、ログイン画面に遷移します。
後日、機能を説明します。
11行目：ユーザ登録画面に遷移します。