为什么所有Angular 2 ng-boostrap模态代码都必须位于app.module.ts的顶部？

长期.Net / C＃/ JavaScript /其他编码器，刚刚学习Angular 2.我很难保持ng2-bootstrap模态代码/逻辑，我认为它属于 . 在我看来，强制导入并包含顶级app.module.ts中的所有Modal登录代码是没有意义的 . 我想把它移到game.module.ts（实际使用的地方） . 但是，我能让Modal工作的唯一方法就是app.module.ts中的所有内容都在顶部 .

如果你发现下面有任何愚蠢或不好的做法，我肯定会感激你会指出它 . 我刚刚学习A2 :-)

这是 does work 对我来说的一个例子......

// ----------------------------------------------------------------------
// src/app/app.component.ts

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

@Component({
    selector: 'app-root',
    template: `
        <a routerLink="/home">Home</a> |
        <a routerLink="/game">Game</a>
        <router-outlet></router-outlet>
    `
})
export class AppComponent { }


// ----------------------------------------------------------------------
// src/app/app.module.ts

import { Component, NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { JsonpModule } from '@angular/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';
import { GameComponent } from './game.component';
import { PageNotFoundComponent } from './not-found.component';
import { LoginModalComponent, LoginModalContent } from './login-modal.component';

const appRoutes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'game', component: GameComponent },
    { path: '**', component: PageNotFoundComponent }
];

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        JsonpModule,
        NgbModule.forRoot(),
        RouterModule.forRoot(appRoutes)
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        GameComponent,
        PageNotFoundComponent,
        LoginModalComponent,
        LoginModalContent
    ],
    bootstrap: [AppComponent],
    entryComponents: [LoginModalContent]
})
export class AppModule { }


// ----------------------------------------------------------------------
// src/app/home.component.ts

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

@Component({
    selector: 'app-root',
    template: `
        <div class="container-fluid">
            <p>
                This is the HOME screen.
            </p>
        </div>
    `
})
export class HomeComponent {
}

@NgModule({
    declarations: [
        HomeComponent
    ],
    bootstrap: [HomeComponent]
})
export class HomeModule {
}


// ----------------------------------------------------------------------
// src/app/game.component.ts

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

@Component({
    selector: 'app-root',
    template: `
        <template ngbModalContainer></template>
        <div class="container-fluid">
            <p>
                This is the GAME screen.
            </p>
            <hr>
            <login-modal-button></login-modal-button>
        </div>
    `
})
export class GameComponent {

}

@NgModule({
    declarations: [
        GameComponent
    ],
    bootstrap: [GameComponent]
})
export class GameModule {

}


// ----------------------------------------------------------------------
// src/app/login-model.component.ts

import { Component, Input } from '@angular/core';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'ngbd-modal-content',
    template: `
    <div class="modal-header">
        <h4 class="modal-title">Hi there! Please login...</h4>
        <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <p>Hello, {{name}}!</p>
    </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
    </div>
    `
})
export class LoginModalContent {
    @Input() name;

    constructor(public activeModal: NgbActiveModal) { }
}

@Component({
    selector: 'login-modal-button',
    template: `<button class="btn btn-lg btn-outline-primary" (click)="open()">Open the modal</button>`
})
export class LoginModalComponent {
    constructor(private modalService: NgbModal) { }

    open() {
        const modalRef = this.modalService.open(LoginModalContent);
        modalRef.componentInstance.name = 'World';
    }
}

以下是我正在尝试构建应用程序的方式，因为对我来说更有意义的是，Login Modal的东西应该在game.component.ts下面，它实际上是在使用它 .

以下是我的 NOT work （底部错误）的示例 . 唯一的变化是将登录模式片段从AppModule中移到GameModule中......

// ----------------------------------------------------------------------
// src/app/app.module.ts

import { Component, NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { JsonpModule } from '@angular/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';
import { GameComponent } from './game.component';
import { PageNotFoundComponent } from './not-found.component';

const appRoutes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'game', component: GameComponent },
    { path: '**', component: PageNotFoundComponent }
];

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        JsonpModule,
        NgbModule.forRoot(),
        RouterModule.forRoot(appRoutes)
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        GameComponent,
        PageNotFoundComponent
    ],
    bootstrap: [AppComponent],
})
export class AppModule { }


// ----------------------------------------------------------------------
// src/app/game.component.ts

import { Component, NgModule } from '@angular/core';
import { LoginModalComponent, LoginModalContent } from './login-modal.component';

@Component({
    selector: 'app-root',
    template: `
        <template ngbModalContainer></template>
        <div class="container-fluid">
            <p>
                This is the GAME screen.
            </p>
            <hr>
            <login-modal-button></login-modal-button>
        </div>
    `
})
export class GameComponent {

}

@NgModule({
    declarations: [
        GameComponent,
        LoginModalComponent,
        LoginModalContent
    ],
    bootstrap: [GameComponent],
    entryComponents: [LoginModalContent]
})
export class GameModule {

}

这是使用上述代码的Chrome控制台中的错误...