Question

我正在尝试在延迟加载的组件之一中实现Reactive表单，并且出现以下错误。

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("<h3>Product List</h3>

<form [ERROR ->][formGroup]="myForm">

    <input type="text" formControlName="name"/>
"): ng:///ProductsRoutingModule/ProductListComponent.html@2:6
Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("<h3>Product List</h3>

<form [ERROR ->][formGroup]="myForm">

    <input type="text" formControlName="name"/>
")

package.json

{
  "name": "angular6-lazy-loading",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "rxjs": "6.1.0",
    "core-js": "2.5.5",
    "zone.js": "0.8.26",
    "@angular/core": "6.0.0",
    "@angular/forms": "6.0.0",
    "@angular/common": "6.0.0",
    "@angular/router": "6.0.0",
    "@angular/compiler": "6.0.0",
    "@angular/platform-browser": "6.0.0",
    "@angular/platform-browser-dynamic": "6.0.0"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.1",
    "@angular/cli": "~9.1.1",
    "@angular/compiler-cli": "~9.1.1",
    "@angular/language-service": "~9.1.1",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }
}

products.module.ts

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { ProductsRoutingModule } from "./products-routing.module"; //Added
import { ReactiveFormsModule, FormsModule } from "@angular/forms";

@NgModule({
  imports: [
    CommonModule,
    ProductsRoutingModule,
    ReactiveFormsModule,
    FormsModule
  ],
  declarations: []
})
export class ProductsModule {}

product-list.component.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { ReactiveFormsModule } from "@angular/forms";


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

product-list.component.html

<h3>Product List</h3>

<form [formGroup]="myForm">
    <input type="text" formControlName="name"/>
</form>

我已在“延迟加载的模块”和“应用程序模块”中导入了所需的模块

{ ReactiveFormsModule, FormsModule } from "@angular/forms";

对此有任何想法吗？是虫子吗？

https://stackblitz.com/edit/angular6-lazy-loading-gej1nn

Answer 1

路由模块应导出RouterModule

@NgModule({
  imports: [
    RouterModule.forChild(productRoutes)
  ],
  exports: [RouterModule]
})
export class ProductsRoutingModule { }

然后ProductsModule可以按以下方式导入ProductsRoutingModule

@NgModule({
  imports: [
    CommonModule,
    ProductsRoutingModule,
    ReactiveFormsModule,
    FormsModule
  ],
  declarations: [ProductsComponent, ProductListComponent, ProductDetailComponent ]
})
export class ProductsModule {}

declarations应该在您将用于延迟加载的模块中提供，在这种情况下，应加载到ProductsModule

中

example

已更新

在ProductsRoutingModule中，您可以提供路由器设置，但不必导出RouterModule，这只是为RouterModule提供ProductsModule的一种方法。另外，您可以在导入RouterModule时提供ProductsModule。为了能够使用路由器模块声明，需要以一种方式提供RouterModule。
如果您在ProductsRoutingModule定义声明，还应该在import的同一模块中提供所有依赖项，但是要将declarations包含在ProductsModule中，还应该导出它们通过exports

因此，您也可以像Follow一样更改两个模块，甚至可以将RouterModule遗忘在主模块中

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    RouterModule.forChild(productRoutes)
  ],
  declarations: [
    ProductsComponent, ProductListComponent, ProductDetailComponent
  ],
  exports: [    
    ProductsComponent, ProductListComponent, ProductDetailComponent
  ]
})
export class ProductsRoutingModule { }

@NgModule({
  imports: [
    ProductsRoutingModule
  ]
})
export class ProductsModule {}

阅读modules-in-angular和asynchronous-modules

可能很有趣

Answer 2

在产品模块而不是路由模块中移动组件声明

declarations: [ProductsComponent, ProductListComponent, ProductDetailComponent ]

Answer 3

我在stackblitz代码中发现了两个错误

应在父模块引用的模块中声明功能模块中的组件。在您的情况下，app.module会延迟加载products.module。但是products模块的组件是在products-routing.module
路由器模块应导出RouterModule
在products.component中，模板字符串在模板常量（backtik）中提供，将其替换为普通字符串template: '<router-outlet></router-outlet>'（引号）

找到固定代码here

延迟加载的组件的角反应形式组问题

3 个答案: