Die Verwendung der neuesten Versionen von Angular 2 gibt mir den folgenden Fehler: "Kein Provider für NgControl: in NgModule DynamicModule"

Question

Ich habe kürzlich auf die neuesten Builds von Angular 2 umgeschaltet und meine App startet wegen des folgenden Fehlers nicht :

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) 

Kann mir bitte jemand helfen?

bearbeiten:

Hier ist meine 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] 
    } 
]); 

bearbeiten 2: My 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

Die Komponente haben REACTIVE_FORM_DIRECTIVES als geladen gemacht Bedürfnisse werden Richtlinie. dh:

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

Sie müssen die neuen Formen Modul ermöglichen

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

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

Answer 3

Sie könnten zu RC5 migrieren möchten. Das neue ngModule hilft wirklich bei der Organisation von Importen und vereinfacht das Booten Ihrer Anwendung erheblich.

Dieser Leitfaden hat mich sehr geholfen mit der Motivation der neuen Änderungen zu verstehen: Angular RC5: NgModules, Lazy Loading and AoT compilation

Es gibt auch eine ordentliche Führung vor Ort eckigen zu RC5 RC4 to RC5 Migration

Sie wandern die REACTIVE_FORM_DIRECTIVES zu entfernen, und alle ähnlichen Importe und einfach die entsprechenden Module in Ihrem app.module.ts importieren

Beispiel:

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 {} 

dieses Muster verwenden Sie können über die Richtlinien und Anbieter Arrays in Ihrer Komponentendefinitionen vergessen, solange Sie sind Teil desselben Moduls und sind dort korrekt enthalten. Zum Beispiel: Sie können die Handhabung von ROUTER_DIRECTIVES und dergleichen vergessen, da sie bereits als Teil anderer Module wie der Router Module gebündelt sind, die in Ihre App Module importiert wird. Meiner Meinung nach ist dies ein Hauptmerkmal, da es die richtige Kapselung hinzufügt und ein Schema zur Verfügung stellt, um eine bessere Architektur für Ihre Anwendung zu entwickeln. Ich hoffe, Sie finden das hilfreich. Viel Glück