NgModules не работает с NgUpgrade

Приложение 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 });

updateAdapter.ts

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

export const upgradeAdapter = new UpgradeAdapter();

общий.модуль.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 { }

person Ryan Langton    schedule 01.09.2016    source источник


Ответы (1)


Вы должны создать UpgradeAdapter с нужным вам модулем.

Например:

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

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

Кроме того, вместо импорта COMMON_COMPONENTS и COMMON_PROVIDERS вы должны использовать:

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

@NgModule({imports: [CommonModule, ...]})
person Marçal Juan    schedule 01.09.2016
comment
Обратите внимание, что forwardRef импортируется из @angular/core. - person Justin Rassier; 06.09.2016