Question

当我尝试在本地启动我的角度应用时我有错误＆＃34;错误FormBuilder不是NgModule＆＃34;，我已经尝试了我能做的一切，npm install，检查我的包json，所有可以解决我的问题的事情，你能帮我解决一下还是有任何解决方案？

这是我的组成部分：

import { Component } from '@angular/core';
import { FormGroup, Validators, NgForm, FormBuilder } from '@angular/forms';
import { Router } from '@angular/router';

import { AuthentificationService } from './authentification.service';


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



  loginForm: FormGroup;
  error: string = '';

  constructor(
    private formBuilder: FormBuilder,
    private authentificationService: AuthentificationService,
    private router: Router
  ) {
    this.loginForm = formBuilder.group({
      'oxylaneId': ['', Validators.required],
      'password': ['', Validators.required]
    });
  }
  onSubmit() {
    this.authentificationService
      .authenticate(this.loginForm.value)
      .subscribe(
        data => {
          localStorage.setItem('id_token', data.token);
          this.router.navigate(['email']);
        },
        error => this.error = error.message
      );
  }


  loginUser(form: NgForm) {
    console.log(form.value);
  }
  onChange(deviceValue) {
    console.log(deviceValue);
  }



}

我的app.module包含我的所有模块和组件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule, FormBuilder, FormGroup, Validators }    from '@angular/forms';
import { EmailcomponentComponent } from './emailcomponent/emailcomponent.component';
import { ColorcomponentComponent } from './colorcomponent/colorcomponent.component';
import { DesigncomponentComponent } from './designcomponent/designcomponent.component';
import { AppRoutingModule }     from './app-routing.module';
import { TopBarComponent } from './top-bar/top-bar.component';
import { AuthentificationComponent } from './authentification/authentification.component';

@NgModule({

  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    FormBuilder,
    FormGroup,
    Validators,

  ],
  declarations: [
    AppComponent,
    EmailcomponentComponent,
    ColorcomponentComponent,
    DesigncomponentComponent,
    TopBarComponent,
    AuthentificationComponent,
  ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

正如错误所说：“ FormBulder不是NgModule ”而事实并非如此！您既不应在导入中导入FormBuilder也不应导入FormGroup。 Validators也不属于Imports，除非它是您的功能模块。改为导入FormsModule或ReactiveFormsModule，例如：

imports: [
  BrowserModule,
  FormsModule,
  ReactiveFormsModule
  AppRoutingModule
]

修改

作为最佳做法，永远不要导入FormsModule和ReactiveFormsModule，无论是一个还是另一个！

构建时，错误FormBuilder不是NgModule

1 个答案: