使用Angular 2的最新版本给出了以下错误：“没有NgControl的提供程序：在NgModule DynamicModule中”

时间：2016-08-03 16:43:44

标签： angular

我最近切换到使用 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"
  }
}

3 个答案:

答案 0 :(得分：4)

您可能希望迁移到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。在我看来，这是一个主要特性，因为它增加了适当的封装，并提供了一个方案来为您的应用程序开发更好的架构。 我希望你觉得这有帮助。祝你好运

答案 1 :(得分：2)

正在呈现的组件需要将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 {

答案 2 :(得分：1)

您需要启用新表单模块

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

bootstrap(AppComponent, [
    disableDeprecatedForms(),
    provideForms(),
    ...
相关问题
最新问题