模块“AppModule”导入的意外值“验证器”。请添加@NgModule 注释答案

【问题标题】：Unexpected value 'Validators' imported by the module 'AppModule'. Please add a @NgModule annotation模块“AppModule”导入的意外值“验证器”。请添加@NgModule 注释
【发布时间】：2017-11-24 12:55:20
【问题描述】：

我在我的应用程序中使用角度反应形式。

下面是我的 app.module.ts

import { HttpModule } from '@angular/http';
import { environment } from './../environments/environment';
import { BrowserModule } from '@angular/platform-browser';
// import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
    declarations: [
        AppComponent,
        HeaderComponent,
        FooterComponent,
        LoginComponent,
        SignupComponent,
        PagenotfoundComponent,
        HomeComponent,
        TabComponent,            
        FocusDirective,
        SearchPipe,
    ],
    imports: [
        BrowserModule,
        routing,
        HttpModule,
        FormsModule,
        ReactiveFormsModule
    ],
    providers: [{
        provide: AuthServiceConfig, useFactory: provideConfig
    },
    bootstrap: [AppComponent]
})

我不知道它在哪里坏了，它在当地就像魅力一样。但是当我在生产中部署时，我遇到了这个问题。

【问题讨论】：

您似乎在此代码的 providers 部分缺少右方括号。我不知道这是否是复制/粘贴问题，或者添加它是否可以解决问题。
理查兹这不是问题。发帖时我错过了。
好的。无论如何，如果您在标题中没有任何内容，您可以将完整的错误消息添加到帖子中？是否有包含更多信息的堆栈跟踪？
@Madhankumar 你是如何解决这个问题的？
我已经通过删除我的 dist 目录解决了这个问题，然后我重新运行了生产版本。

标签： angular angular4-forms

【解决方案1】：

您的本地代码很好，部署应该可以正常工作。我想您部署了不同版本的“app.module.ts”。

你在标题中提到的错误被转载了：

'由模块'AppModule'导入的意外值'Validators'。请添加@NgModule 注释'错误。

如果您评论以下代码中的选项 1；
然后取消注释选项 2，然后代码开始工作。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import {
  MatCheckboxModule,
  MatRadioModule,
  MatSelectModule,
  MatInputModule,
  MatIconModule
} from '@angular/material';
import {
  FormsModule, 
  //ReactiveFormsModule, // Option 2: it works
  Validators // <-- Option 1: here is what triggers an error
}    from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    BrowserAnimationsModule,
    MatCheckboxModule,
    MatRadioModule,
    MatSelectModule,
    MatInputModule,
    MatIconModule,
    //ReactiveFormsModule, // Option 2: it works
    Validators // <-- Option 1: here is what triggers an error
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

还有两个文件来完成验证示例。 app.component.ts

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms'; // <-- Validators should be here

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  emailFormControl = new FormControl('', [
    Validators.required,
    Validators.email,
  ]);
}

app.component.html

<form class="example-form">
    <mat-form-field class="example-full-width">
        <input matInput placeholder="Email" [formControl]="emailFormControl">
        <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
        Please enter a valid email address
        </mat-error>
        <mat-error *ngIf="emailFormControl.hasError('required')">
        Email is <strong>required</strong>
        </mat-error>
    </mat-form-field>
</form>

【讨论】：