Question

我正在使用最新版本的angular并跟随angular.io的快速入门。我收到了这个错误。我尝试了堆栈溢出时出现的所有修复但是没有为我解决。我正在使用完全相同的配置文件。下面是我的app.module.ts

----------
    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { HttpModule, JsonpModule } from '@angular/http';
    import {FormsModule, ReactiveFormsModule} from '@angular/forms'
    import { routing,    appRoutingProviders } from './app.routing';
    import { AppComponent }  from './app.component';
    import {PageNotFoundComponent} from './pagenotfound.component';
    import { MileStoneModule }         from './milestone/milestone.module';
    import { RecepientModule }         from './recepient/routing.module';
    @NgModule({
        imports: [
    BrowserModule,      
    routing,
    MileStoneModule, RecepientModule,
    HttpModule,
    JsonpModule,ReactiveFormsModule,FormsModule
   // AlertModule,DatepickerModule,Ng2BootstrapModule

],
    declarations: [AppComponent,
    PageNotFoundComponent

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

我正在使用ReactiveFormModule的Add组件是

 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Router, ActivatedRoute }       from '@angular/router';
 import { MileStoneService } from './milestone.service';
 import { MileStoneModel } from './milestoneModel';
 import { FormBuilder, FormGroup  ,FormControl } from '@angular/forms';
 import { Subscription } from 'rxjs/Subscription';

 @Component(
     {
    moduleId: module.id,
    templateUrl:'./milestoneadd.html'
    ,

    providers: [MileStoneService]


}
 )
 export class MileStoneAddComponent implements OnInit {
     newMileStone = new MileStoneModel();
     errorMessage: string;
     form : FormGroup;

constructor( private _service: MileStoneService) {


}

     ngOnInit() {

    // the long way
    this.form = new FormGroup({
    Id: new FormControl(),
    Name: new FormControl(),
    StartDate: new FormControl()
     });

     }


     private saveMileStone(mileStone: MileStoneModel) {
         this._service.addMileStone(mileStone).subscribe(
        milestones => this.newMileStone = milestones,
        error => this.errorMessage = <any>error);
     }

 }

HTML代码位于

之下

 <div class="row">
     <div class="md-col-8">
         <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title"> Add MileStone</h3>
        </div>
        <div class="panel-body">
            <form  [formGroup]="form">
                <div class="form-group">
                    <div class="md-col-4">
                        <label>  MileStone Name:</label>
                    </div>
                    <div class="md-col-4">
                        <input  formControlName="Name"  />
                        <input type="hidden" formControlName="Id" />
                    </div>

                </div>
                <div class="form-group">
                    <div class="md-col-4"><label> StartDate</label></div>
                    <div class="md-col-4">

                        <input formControlName="StartDate"  />



                    </div>
                </div>
                <div class="btn-group pull-right" role="group" aria-           label="...">

                    <button type="button" class="btn btn-primary pull-left">Cancel</button>
                    &nbsp;

            <button type="button"  (click)="saveMileStone(newMileStone)" class="btn btn-primary pull-right">Save</button>
                </div>
            </form>

            {{ newMileStone|json }}
        </div>
        </div>
       </div>
          </div>

package.json文件位于下方。

   {
     "name": "angular-quickstart",
    "version": "1.0.0",
    "scripts": {
      "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
      "lite": "lite-server",
      "postinstall": "typings install",
      "tsc": "tsc",
      "tsc:w": "tsc -w",
      "typings": "typings"
                 },
          "license": "ISC",
          "dependencies": {
            "@angular/common": "~2.0.1",
            "@angular/compiler": "~2.0.1",
            "@angular/core": "~2.0.1",
            "@angular/forms": "~2.0.1",
            "@angular/http": "~2.0.1",
            "@angular/platform-browser": "~2.0.1",
            "@angular/platform-browser-dynamic": "~2.0.1",
            "@angular/router": "~3.0.1",
            "@angular/upgrade": "~2.0.1",
            "angular-in-memory-web-api": "~0.1.1",
            "bootstrap": "^3.3.7",
            "core-js": "^2.4.1",
            "reflect-metadata": "^0.1.8",
            "rxjs": "5.0.0-beta.12",
            "systemjs": "0.19.39",
            "zone.js": "^0.6.25",
            "jquery": "^3.1.1"
          },
          "devDependencies": {
            "concurrently": "^3.0.0",
            "lite-server": "^2.2.2",
            "typescript": "^2.0.3",
            "typings": "^1.4.0",
             "gulp": "^3.9.1",
            "q": "^1.4.1",
            "grunt": "1.0.1",
            "grunt-contrib-copy": "1.0.0",
            "grunt-contrib-uglify": "1.0.1",
            "grunt-contrib-watch": "1.0.0",
            "grunt-ts": "5.5.1"
          }
        }

Answer 1

您必须使用共享模块（我省略了所有导入）：

@NgModule({
      imports: [CommonModule, RouterModule, MenubarModule, InputTextModule ], 
      declarations: [ ErrorMessagesComponent],
      exports: [ CommonModule, ReactiveFormsModule, HttpModule, RouterModule,
                InputTextModule, ErrorMessagesComponentng  ] 
   })

   export class SharedModule {
      static forRoot(): ModuleWithProviders {
      return {
         ngModule: SharedModule,
         providers: [ AuthorizationService ]
      };
   }
}

在app.module.ts中（注意SharedModule.forRoot）：

@NgModule({
    imports: [ BrowserModule, RouterModule.forRoot(appRoutes), SharedModule.forRoot(), 
               HomeModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ],
    providers: [ appRoutingProviders ]
}) 

export class AppModule {}

在另一个模块中使用它：

import { SharedModule }   from '../shared/shared.module';
import {routing} from './home.routing'


@NgModule({
    imports: [ SharedModule, routing],
    declarations: [ HomeComponent, LoginComponent, RegisterComponent, VerifyComponent, 
                   VerifyEmailComponent, ForgotComponent, ForgotVerifyComponent, 
                   ChangeComponent, ChallengeComponent, LogoutComponent ], 
    bootstrap: [ HomeComponent ],
    providers: [ ]

}) 

export class HomeModule {}

Answer 2

请参阅角度模块常见问题解答： merge sort
在您的情况下，此部分适用：

此错误通常意味着您忽略了声明指令“x”或您没有导入“x”所属的模块。

此外（根据您与@Siraj的互动，可能更有帮助），What does "Can't bind to 'x' since it isn't a known property of 'y'" mean?提及以下内容：

模块不会继承对其他模块中声明的组件，指令或管道的访问权限。 FormsModule导入的内容与[其他模块]无关，反之亦然。

你有两个选择（选择一个）：

创建Angular Modules guide ReactiveFormModule和exports（在模块的imports列表中）的共享模块。然后在子/功能模块中导入此共享模块（在子模块的FormsModule列表中）。
请参阅@ JohnBaird的答案以获取示例。
ModuleA 导出的内容是如果他们导入ModuleA，则与其他模块相关。
将ReactiveFormModule和imports添加到您的子/功能模块的var container = document.getElementById('container'); function scroll_function() { var new_position_top = container.scrollTop; if (new_position_top > 600) { container.scrollTop = 0; } } container.addEventListener('scroll', scroll_function);列表中。

无法绑定到＆＃39; formGroup＆＃39;因为它不是“形式”的已知属性。 Angular 2最终版本

2 个答案: