Используя последние сборки Angular 2, я получаю следующую ошибку: «Нет провайдера для NgControl: в NgModule DynamicModule»

Question

Недавно я переключился на использование последних сборок Angular 2, и мое приложение не запускается из-за следующей ошибки :

zone.js:463 Error: Uncaught (in promise): Error: Error: Provider parse errors: 
    No provider for NgControl: in NgModule DynamicModule 
     at new BaseException (http://localhost:8080/vendor/@angular/compiler/src/facade/exceptions.js:27:23) 
     at NgModuleProviderAnalyzer.parse (http://localhost:8080/vendor/@angular/compiler/src/provider_analyzer.js:291:19) 
     at NgModuleCompiler.compile (http://localhost:8080/vendor/@angular/compiler/src/ng_module_compiler.js:57:24) 
     at RuntimeCompiler._compileModule (http://localhost:8080/vendor/@angular/compiler/src/runtime_compiler.js:121:56) 
     at RuntimeCompiler._compileModuleAndComponents (http://localhost:8080/vendor/@angular/compiler/src/runtime_compiler.js:74:36) 
     at RuntimeCompiler.compileModuleAsync (http://localhost:8080/vendor/@angular/compiler/src/runtime_compiler.js:50:21) 
     at PlatformRef_.bootstrapModule (http://localhost:8080/vendor/@angular/core/src/application_ref.js:361:25) 
     at Object.bootstrap (http://localhost:8080/vendor/@angular/platform-browser-dynamic/index.js:73:10) 
     at Object.eval (http://localhost:8080/main.js:23:28) 
     at eval (http://localhost:8080/main.js:46:4) 
    Evaluating http://localhost:8080/main.js 
    Error loading http://localhost:8080/main.js 
     at new BaseException (http://localhost:8080/vendor/@angular/compiler/src/facade/exceptions.js:27:23) 
     at NgModuleProviderAnalyzer.parse (http://localhost:8080/vendor/@angular/compiler/src/provider_analyzer.js:291:19) 
     at NgModuleCompiler.compile (http://localhost:8080/vendor/@angular/compiler/src/ng_module_compiler.js:57:24) 
     at RuntimeCompiler._compileModule (http://localhost:8080/vendor/@angular/compiler/src/runtime_compiler.js:121:56) 
     at RuntimeCompiler._compileModuleAndComponents (http://localhost:8080/vendor/@angular/compiler/src/runtime_compiler.js:74:36) 
     at RuntimeCompiler.compileModuleAsync (http://localhost:8080/vendor/@angular/compiler/src/runtime_compiler.js:50:21) 
     at PlatformRef_.bootstrapModule (http://localhost:8080/vendor/@angular/core/src/application_ref.js:361:25) 
     at Object.bootstrap (http://localhost:8080/vendor/@angular/platform-browser-dynamic/index.js:73:10) 
     at Object.eval (http://localhost:8080/main.js:23:28) 
     at eval (http://localhost:8080/main.js:46:4) 
    Evaluating http://localhost:8080/main.js 
    Error loading http://localhost:8080/main.js 
    at resolvePromise (http://localhost:8080/vendor/zone.js/dist/zone.js:538:32) 
    at resolvePromise (http://localhost:8080/vendor/zone.js/dist/zone.js:523:18) 
    at http://localhost:8080/vendor/zone.js/dist/zone.js:571:18 
    at ZoneDelegate.invokeTask (http://localhost:8080/vendor/zone.js/dist/zone.js:356:38) 
    at Zone.runTask (http://localhost:8080/vendor/zone.js/dist/zone.js:256:48) 
    at drainMicroTaskQueue (http://localhost:8080/vendor/zone.js/dist/zone.js:474:36) 
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:8080/vendor/zone.js/dist/zone.js:426:22) 

Может ли кто-нибудь помочь?

редактировать:

Вот мой main.ts:

import {bootstrap} from "@angular/platform-browser-dynamic"; 
import {enableProdMode} from "@angular/core"; 
import {Title} from "@angular/platform-browser"; 
import {provideRouter} from "@angular/router"; 
import {LocationStrategy, HashLocationStrategy} from "@angular/common"; 
import {HTTP_PROVIDERS, Http, RequestOptions} from "@angular/http"; 
import { 
    TRANSLATE_PROVIDERS, 
    TranslateService, 
    TranslateLoader, 
    TranslateStaticLoader 
} from "ng2-translate/ng2-translate"; 
import {AppComponent} from "./app/app.component"; 
import {SessionService} from "./app/session/session.service"; 
import {UserAccountService} from "./app/useraccount/useraccount.service"; 
import {ApplicationRequestOptions} from "./app/session/session.utils"; 
import {StylingService} from "./app/shared/services/styling.service"; 
import {AppRoutes} from "./app/routes/app.routes"; 
import {environment} from "./app/environment"; 
import {FormBuilder, REACTIVE_FORM_DIRECTIVES} from "@angular/forms"; 
import {PasswordValidationService} from "./app/shared/services/password-validation.service"; 
import {validatePassword} from "./app/shared/validators/password.validator"; 
import 'rxjs/add/operator/do'; 
import {AuthenticatedHttpClient} from "./app/shared/services/authenticated-http-client.service"; 

if (environment.production) { 
    enableProdMode(); 
} 

bootstrap(AppComponent, [ 
    provideRouter(AppRoutes), 
    HTTP_PROVIDERS, 
    TRANSLATE_PROVIDERS, 
    Title, 
    FormBuilder, 
    REACTIVE_FORM_DIRECTIVES, 
    SessionService, 
    UserAccountService, 
    AuthenticatedHttpClient, 
    StylingService, 
    TranslateService, 
    PasswordValidationService, 
    {provide: RequestOptions, useClass: ApplicationRequestOptions}, 
    {provide: LocationStrategy, useClass: HashLocationStrategy}, 
    { 
    provide: TranslateLoader, 
    useFactory: (http:Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'), deps: [Http] 
    } 
]); 

редактировать 2: Мои package.json:

{ 
    "name": "bignibou-client", 
    "version": "0.0.0", 
    "license": "MIT", 
    "angular-cli": {}, 
    "scripts": { 
    "start": "ng serve", 
    "postinstall": "typings install", 
    "lint": "tslint \"src/**/*.ts\"", 
    "test": "ng test", 
    "pree2e": "webdriver-manager update", 
    "e2e": "protractor" 
    }, 
    "private": true, 
    "dependencies": { 
    "@angular/common": "git+https://github.com/angular/common-builds.git#master", 
    "@angular/compiler": "git+https://github.com/angular/compiler-builds.git#master", 
    "@angular/core": "git+https://github.com/angular/core-builds.git#master", 
    "@angular/forms": "git+https://github.com/angular/forms-builds.git#master", 
    "@angular/http": "git+https://github.com/angular/http-builds.git#master", 
    "@angular/platform-browser": "git+https://github.com/angular/platform-browser-builds.git#master", 
    "@angular/platform-browser-dynamic": "git+https://github.com/angular/platform-browser-dynamic-builds.git#master", 
    "@angular/router": "git+https://github.com/angular/router-builds.git#master", 
    "angular2-moment": "^0.8.1", 
    "bootstrap": "3.3.6", 
    "es6-shim": "0.35.1", 
    "moment": "^2.13.0", 
    "ng2-bootstrap": "^1.0.23", 
    "ng2-translate": "^2.2.2", 
    "reflect-metadata": "0.1.3", 
    "rxjs": "5.0.0-beta.6", 
    "systemjs": "0.19.26", 
    "zone.js": "0.6.12" 
    }, 
    "devDependencies": { 
    "angular-cli": "1.0.0-beta.10", 
    "codelyzer": "0.0.20", 
    "ember-cli-inject-live-reload": "1.4.0", 
    "jasmine-core": "2.4.1", 
    "jasmine-spec-reporter": "2.5.0", 
    "karma": "0.13.22", 
    "karma-chrome-launcher": "0.2.3", 
    "karma-jasmine": "0.3.8", 
    "protractor": "3.3.0", 
    "ts-node": "0.5.5", 
    "tslint": "3.11.0", 
    "typescript": "1.8.10", 
    "typings": "0.8.1" 
    } 
} 

Answer 1

компонент визуализируется должен иметь REACTIVE_FORM_DIRECTIVES загружен как директивы. то есть:

import {NgForm, FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES} from '@angular/forms'; 

@Component({ 
    moduleId: module.id, 
    directives: [ 
    FORM_DIRECTIVES, 
    REACTIVE_FORM_DIRECTIVES, 
    NgForm 
] 
}) 
export class MyComponent { 

Answer 2

Вам необходимо включить новые формы модуль

import { disableDeprecatedForms, provideForms }  from '@angular/forms'; 
import { HelloComponent }       from './hello.component'; 

bootstrap(AppComponent, [ 
    disableDeprecatedForms(), 
    provideForms(), 
    ... 

Answer 3

Вы можете перейти на RC5. Новый ngModule действительно помогает организовать импорт и значительно упрощает загрузку вашего приложения.

Это руководство помогло мне с пониманием мотивации новых изменений: Angular RC5: NgModules, Lazy Loading and AoT compilation

Там также является аккуратным руководство на месте углового, чтобы перейти на RC5 RC4 to RC5 Migration

Вы должны удалить REACTIVE_FORM_DIRECTIVES и все подобные импорта и просто импортировать их соответствующий модуль в app.module.ts

Пример:

main.ts:

import { enableProdMode } from '@angular/core'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule }    from './app.module'; 

enableProdMode(); 
platformBrowserDynamic().bootstrapModule(AppModule); //just in time compilation 

app.routes.ts

import {Routes} from '@angular/router'; 
import { DashboardComponent } from './Dashboard/dashboard.component';; 
import { CanDeactivateGuard } from './Services/canDeactivateGuard.service'; 

export const appRoutes : Routes= [ 
    {path:'', redirectTo:'home', pathMatch:"full"}, 
    {path:'home', component: DashboardComponent} 
]; 

export const routingProviders: any[]=[ 
    CanDeactivateGuard 
]; 

app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule} from '@angular/platform-browser'; 
import { ReactiveFormsModule } from '@angular/forms'; 
import { RouterModule} from '@angular/router'; 
import { appRoutes, routingProviders } from './app.routes'; 
import { AppComponent } from './app.component'; 
import { DashboardComponent } from './Dashboard/dashboard.component'; 
import {CookieService} from 'angular2-cookie/core'; 

import { InputFilterService } from './Services/inputFilter.service'; 
import { SessionService } from './Services/session.service'; 
import { CanDeactivateGuard } from './Services/canDeactivateGuard.service'; 

@NgModule({ 
    declarations: [ 
     AppComponent, 
     DashboardComponent 
    ], 
    imports: [ 
     BrowserModule, 
     ReactiveFormsModule, 
     RouterModule.forRoot(appRoutes) 
    ], 
    providers:[ 
     CookieService, 
     InputFilterService, 
     SessionService, 
     routingProviders 
    ], 
    bootstrap: [AppComponent], 
}) 
export class AppModule {} 

Используя эту модель вы можете забыть о директивах и поставщиков массивов в определениях компонентов до тех пор, они являются частью одного и того же модуля и правильно включены в него. Например: вы можете забыть об обработке ROUTER_DIRECTIVES и таких, поскольку они уже включены в состав других модулей, таких как Router Module, который импортируется в ваш App Module. На мой взгляд, это важная функция, потому что она добавляет правильную инкапсуляцию и предоставляет схему для разработки лучшей архитектуры для вашего приложения. Надеюсь, вы найдете это полезным. Удачи