懒惰加载组件的角反应形式组问题

Question

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

Stackblitz Link

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";

对此有任何想法吗？是Bug吗？

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

Answer 1

路由模块应导出RouterModule

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

然后ProductsModule可以按如下所示导入ProductsRou​​tingModule

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

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

example

Answer 2

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

declarations: [ProductsComponent, ProductListComponent, ProductDetailComponent ]