Angular2 SharedModule问题

Question

我将所有共享模块移动到命名的SharedModule模块中：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

import { AlertModule } from 'ng2-bootstrap';
import { Select2Module } from 'ng2-select2';

export const modules = [
  CommonModule,
  ReactiveFormsModule,
  FormsModule,
  HttpModule,
  RouterModule,
  StoreModule,
  StoreDevtoolsModule,
  AlertModule,
  Select2Module
];

export const declarations = [];

@NgModule({
  imports: modules,
  exports: [...modules, ...declarations],
  declarations
})
export class SharedModule { }

如您所见，我正在使用AlertModule。然而，我在LoginComponent加载时遇到了问题：

caused by: No provider for AlertConfig!

LoginModule是：

export const routes = [
  { path: '', component: LoginComponent, pathMatch: 'full' }
];

@NgModule({
  declarations: [
    LoginComponent
  ],
  imports: [
    SharedModule,
    RouterModule.forChild(routes),
  ]
})
export default class LoginModule {
  static routes = routes;
}

并使用Router延迟加载。路线是：

export const ROUTES: Routes = [{
   path: '', redirectTo: 'login', pathMatch: 'full'
}, {
    path: 'app',   loadChildren: () => System.import('./layout/layout.module')
  }, {
    path: 'login', loadChildren: () => System.import('./login/login.module')
  }, {
    path: 'signin', loadChildren: () => System.import('./signin/signin.module')
  }, {
    path: 'validate', loadChildren: () => System.import('./validate/validate.module')
  }, {
    path: 'error', component: ErrorComponent
  }, {
    path: '**',    component: ErrorComponent
  }
];

login.template.html中的相关html代码：

<div class="clearfix">
    <alert *ngFor="let alert of alerts; let i = index" [type]="alert.type + ' alert-sm'" (close)="closeAlert(i)" dismissible="true">
        <div [innerHTML]="alert.msg"></div>
    </alert>
</div>

如果我在AlertModule中使用AlertModule.forRoot()导入app.module.ts，我会收到此模板解析错误：

错误：模板解析错误： 无法绑定到＆＃39;键入＆＃39;因为它不是“警报”的已知属性。 （＆＃34;

<alert *ngFor="let alert of alerts; let i = index" [ERROR ->][type]="alert.type + ' alert-sm'" (close)="closeAlert(i)" dismissible="true">

                  <div"): LoginComponent@35:67
'alert' is not a known element:
1. If 'alert' is an Angular component, then verify that it is part of this module.
2. If 'alert' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
              </div>

              <div class="clearfix">

                [ERROR ->]<alert *ngFor="let alert of alerts; let i = index" [type]="alert.type + ' alert-sm'" (close)="closeAl"): LoginComponent@35:16
BaseError@http://localhost:3002/vendor.bundle.js:15859:9 [angular]
SyntaxError@http://localhost:3002/vendor.bundle.js:35689:9 [angular]
ac_vendor<["./node_modules/@angular/compiler/src/template_parser/template_parser.js"]/TemplateParser.prototype.parse@http://localhost:3002/vendor.bundle.js:34130:19 [angular]