Reputation: 1977
I am using the latest version of angular and following the quickstart from angular.io . I am getting this error. I tried all the fixes present on stack overflow but didn't worked out for me.I am using exactly same config files . Below is my 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 { }
The Add component where I am using ReactiveFormModule is
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);
}
}
The HTML code is below
<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>
<button type="button" (click)="saveMileStone(newMileStone)" class="btn btn-primary pull-right">Save</button>
</div>
</form>
{{ newMileStone|json }}
</div>
</div>
</div>
</div>
The package.json file is below .
{
"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"
}
}
Upvotes: 0
Views: 3392
Reputation: 364707
See Angular Module FAQ:
What does "Can't bind to 'x' since it isn't a known property of 'y'" mean?
In your case, this part applies:
This error usually means either that you neglected to declare the directive "x" or you haven't imported the module to which "x" belongs.
Also (and probably more helpful, based on your interaction with @Siraj), the Angular Modules guide mentions the following:
Modules do not inherit access to the components, directives or pipes that are declared in other modules. What
AppModule
imports is irrelevant to [other modules] and vice versa.
You have two choices (pick one):
FormsModule
and ReactiveFormModule
(in the module's exports
list). Then import this shared module in your sub/feature module (in the sub module's imports
list).FormsModule
and ReactiveFormModule
to your sub/feature module's imports
list.Upvotes: 2
Reputation: 2676
You have to use a shared module (I left out all the imports):
@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 ]
};
}
}
In the app.module.ts (notice the SharedModule.forRoot):
@NgModule({
imports: [ BrowserModule, RouterModule.forRoot(appRoutes), SharedModule.forRoot(),
HomeModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: [ appRoutingProviders ]
})
export class AppModule {}
To use it in another module:
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 {}
Upvotes: 2