没有 ControlContainer 的提供者 - Angular 5答案

【问题标题】：No provider for ControlContainer - Angular 5没有 ControlContainer 的提供者 - Angular 5
【发布时间】：2018-06-21 03:07:28
【问题描述】：

我正在将购买的第三方模板转换为 Angular 5 应用程序，但遇到了错误。我对 Angular 5 很陌生（不过我很了解 AngularJS）并且不明白它想告诉我什么？它似乎与显示/隐藏顶部导航栏的按钮有关。

错误消息（来自浏览器）：

Error: Template parse errors:
No provider for ControlContainer ("imalize-styl-2 btn btn-primary " (click)="toggleNavigation()"><i class="fa fa-bars"></i> </a>
      [ERROR ->]<form role="search" class="navbar-form-custom" method="post" action="#">
        <div class="form-gro"): ng:///AppModule/TopNavigationNavbarComponent.html@4:6

component.html：

<div class="row border-bottom">
  <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
    <div class="navbar-header">
      <a class="minimalize-styl-2 btn btn-primary " (click)="toggleNavigation()"><i class="fa fa-bars"></i> </a>
      <form role="search" class="navbar-form-custom" method="post" action="#">
        <div class="form-group">
          <input type="text" placeholder="Search for something..." class="form-control" name="top-search" id="top-search">
        </div>
      </form>
    </div>
    <ul class="nav navbar-top-links navbar-right">
      <li>
        <a href="#">
          <i class="fa fa-sign-out"></i> Log out
        </a>
      </li>
    </ul>
  </nav>
</div>

component.ts

import { Component, OnInit } from '@angular/core';
import { smoothlyMenu } from '../../../app.helpers';

declare var jQuery: any;

@Component({
  selector: 'app-top-navigation-navbar',
  templateUrl: './top-navigation-navbar.component.html',
  styleUrls: ['./top-navigation-navbar.component.less']
})
export class TopNavigationNavbarComponent implements OnInit {

  toggleNavigation(): void {
    jQuery('body').toggleClass('mini-navbar');
    smoothlyMenu();
  }

  constructor() { }

  ngOnInit() {
  }

}

app.module.ts（这似乎是我在谷歌上经常提到的东西，但它不是抛出错误的表单。）

...
import { ReactiveFormsModule, FormControl, FormsModule } from '@angular/forms';
...

【问题讨论】：

标签： angular angular5 angular-components angular-forms

【解决方案1】：

在ReactiveFormsModule之外导入FormsModule

【讨论】：

这对我没有任何影响。仍然收到错误
您可能需要重新启动服务器才能使其正常工作。
import FormsModule in addition to ReactiveFormsModule - 这解决了我的问题，谢谢

【解决方案2】：

在views.module.ts（自定义模块文件）文件中导入FormsModule 和ReactiveFormsModule 对我有用：

views.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';


@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    ...
  ],
  declarations: [
    ...
  ],
  exports: [
   ...
  ],
  schemas: [NO_ERRORS_SCHEMA]
})
export class ViewsModule { }

【讨论】：

有效！您必须重新启动服务器才能使其生效。

【解决方案3】：

我不确定为什么错误似乎指向表单元素之外的锚标记，但它是导致错误的表单元素。将 FormGroup 添加到表单中解决了这个问题。

<form role="search" class="navbar-form-custom" [formGroup]="form">

【讨论】：

我遇到了同样的问题。我在两个单独的组件中有 2 个表格。我在 Angular 中只转换了 1 并得到了这个错误。我必须将两种形式都转换为 Angular 样式才能使应用再次运行
天哪，就是这样。非常感谢

【解决方案4】：

编辑文件“app.module.ts”；更改以下指令：

import { ReactiveFormsModule } from '@angular/forms';

以下内容：

import { ReactiveFormsModule, FormsModule } from '@angular/forms';

更改以下代码：

  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],

以下内容：

  imports: [
    BrowserModule,
    ReactiveFormsModule,
    FormsModule
  ],

【讨论】：

【解决方案5】：

如果您尝试从 Angular 组件显示纯 HTML 表单，请在 <form> 标签中使用 ngNoForm，如下所示。

<form ngNoForm>
...
</form>

这应该可以防止 Angular 抛出控制容器错误。

【讨论】：

【解决方案6】：

花了 2 个小时后，我意识到当我们在 app.module 和 child.module 中导入 FormModule 时，会发生这种错误。 Simpley 从 child.module 中删除 FormModule 然后错误将得到解决:)

【讨论】：

【解决方案7】：

将此行添加到您的 component.spec.ts：

import {FormsModule} from '@angular/forms';

imports: [
  RouterTestingModule,
  FormsModule
],

【讨论】：

为什么是 component.spec.ts？
@pzaenger 当问题出现在测试中时

【解决方案8】：

我在 Angular(Jasmin) 测试用例中遇到了这个问题。

我在 beforeEach 的单元测试的导入中不小心添加了角度表单模块，一个是 FormModule（按角度），另一个是自定义 FormModule。

我只需要自定义 FormModule，一旦我删除了 FormModule（按角度），问题就解决了

beforeEach(async(() => {
TestBed.configureTestingModule({
  imports: [CustomTranslateModule.forRoot(),
    CustomRightPanelModule,
    CustomListModule,
    CustomInputTextModule,
    CustomMasterPageModule,
    CustomFormModule,
    FormModule, // this is unnecessary 
    .....................
    .....................

【讨论】：