NgModules 不适用于 NgUpgrade答案

【问题标题】：NgModules not working with NgUpgradeNgModules 不适用于 NgUpgrade
【发布时间】：2016-09-01 14:18:25
【问题描述】：

Angular 1 & 2 (RC5) 应用程序使用 ng-upgrade 在混合模式下运行。尝试使用 @NgModule 不起作用，我仍然需要手动添加提供程序：

 upgradeAdapter.addProvider(REACTIVE_FORM_PROVIDERS);

这使我无法从 RC5->RC6 升级。要使用外部组件，我仍然需要将它们添加到指令中：它们正在使用的特定组件的数组。

import { AlertComponent } from 'ng2-bootstrap/ng2-bootstrap';

@Component({
    selector: 'sb-staff-dashboard',
    templateUrl: 'staff-dashboard.component.html',
    styleUrls: ['staff-dashboard.component.scss'],
    directives: [ AlertComponent ]
})

这是我的相关引导代码。

upgradeAdapter.addProvider(COMMON_PROVIDERS);
upgradeAdapter.addProvider(HTTP_PROVIDERS);
upgradeAdapter.addProvider(DragulaService);
upgradeAdapter.addProvider(REACTIVE_FORM_PROVIDERS);
upgradeAdapter.bootstrap(document.documentElement, ['common', CommonModule], { strictDi: true });

升级适配器.ts

import {UpgradeAdapter} from '@angular/upgrade';

export const upgradeAdapter = new UpgradeAdapter();

common.module.ts

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from "@angular/forms";
import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';
import { Dragula, DragulaService } from 'ng2-dragula/ng2-dragula';

@NgModule({
    imports: [
        BrowserModule,
        ReactiveFormsModule,
        Ng2BootstrapModule,
        HttpModule
    ],
    declarations: [
        COMMON_COMPONENTS,
        Dragula
    ],
    providers: [
        COMMON_PROVIDERS,
        DragulaService
    ]
})
export class CommonModule { }

【问题讨论】：

标签： angular ng-upgrade

【解决方案1】：

你必须用你想要的模块创建UpgradeAdapter。

例如：

import { forwardRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UpgradeAdapter } from '@angular/upgrade';

export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => CommonModule));

此外，您必须使用：

import { CommonModule } from '@angular/common';

@NgModule({imports: [CommonModule, ...]})

【讨论】：

注意，forwardRef 是从 @angular/core 导入的