Asked by:
Cannot add directivesin angular2 plz help!!

Question
-
User483994611 posted
I am getting unusual error in the line marked as bold while defining the directive..Plz suggest what I am doing wrong
Error Build:Argument of type '{ templateUrl: string; directives: (typeof DataGrid | typeof AlertBoxComponent)[]; providers: typ...' is not assignable to parameter of type 'Component'.
My data grid and alert component will only be available in customer maintenance component
import { Component, OnInit, EventEmitter, Output, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { DataGridColumn, DataGridButton, DataGridEventInformation } from '../shared/datagrid/datagrid.core';
import { DataGrid } from '../shared/datagrid/datagrid.component';
import { AlertService } from '../services/alert.service';
import { CustomerService } from '../services/customer.service';
import { AlertBoxComponent } from '../shared/alertbox.component';
import { Customer } from '../entities/customer.entity';
import { TransactionalInformation } from '../entities/transactionalinformation.entity';
//@Input() summary: string;
export var debugVersion = "?version=" + Date.now();@Component({
templateUrl: 'application/customer/customer-inquiry.component.html' + debugVersion,
directives: [DataGrid, AlertBoxComponent],
providers: [AlertService]
})Tuesday, November 14, 2017 5:42 AM
All replies
-
User-1838255255 posted
Hi suvo,
According to your description, as far as I know directives property was removed in RC.6, in RC.6 or later version, you could move it to declarations property of your NgModule decorator.
Here are someone who meet the similar issue as you, please check:
Angular 2 | Directives Argument of type '{}' is not assignable to:
Angular2 version RC.6 “directives” inside @Component Error:
https://stackoverflow.com/questions/39410591/angular2-version-rc-6-directives-inside-component-error
Best Regards,
Eric Du
Wednesday, November 15, 2017 7:34 AM -
User483994611 posted
As suggested i have defined in ngmodule in app.module.ts.
Error is found while defining the derivatives,,
My app.module.ts looks like:-
import { NgModule } from '@angular/core';import { APP_BASE_HREF } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal';
import { HttpModule } from '@angular/http';
import { routing } from './app.routing';
import { UserComponent } from './components/user.component';
import { HomeComponent } from './components/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { RegistrationComponent } from './components/Registration/Registration.component';
import { UserService } from './Service/user.service';
import { DataGrid } from './Components/Shared/DataGrid/datagrid.component';
import { DataGridColumn, DataGridButton, DataGridEventInformation } from './Components/Shared/DataGrid/datagrid.core';@NgModule({
imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, routing, Ng2Bs3ModalModule],declarations: [AppComponent, UserComponent, HomeComponent, FetchDataComponent, RegistrationComponent, DataGrid, DataGridColumn, DataGridButton, DataGridEventInformation],
providers: [{ provide: APP_BASE_HREF, useValue: '/' }, UserService],
bootstrap: [AppComponent]})
export class AppModule { }My customer-maintenance.component.tas where datagrid.component.ts is referenced looks like
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Address } from '../entities/address.entity';
import { Customer } from '../entities/customer.entity';
import { AlertBoxComponent } from '../shared/alertbox.component';
import { CustomerService } from '../services/customer.service';
import { HttpService } from '../services/http.service';
import { AlertService } from '../services/alert.service';
import { SessionService } from '../services/session.service';
import { AddressComponent } from '../shared/address.component';export var debugVersion = "?version=" + Date.now();
@Component({
templateUrl: 'application/customer/customer-maintenance.component.html' + debugVersion,
providers: [AlertService],
directives: [AlertBoxComponent, AddressComponent]///error is occuring here
})export class CustomerMaintenanceComponent implements OnInit {
public title: string = 'Customer Maintenance';
public customerID: number;
public customerCode: string;
public companyName: string;
public phoneNumber: string;
public address: Address;public showUpdateButton: Boolean;
public showAddButton: Boolean;public customerCodeInputError: Boolean;
public companyNameInputError: Boolean;public messageBox: string;
public alerts: Array<string> = [];constructor(private route: ActivatedRoute, private customerService: CustomerService, private sessionService: SessionService, private alertService: AlertService) { }
public ngOnInit() {
this.showUpdateButton = false;
this.showAddButton = false;this.address = new Address();
this.route.params.subscribe(params => {
let id: string = params['id'];
if (id != undefined) {
this.customerID = parseInt(id);
let customer = new Customer();
customer.customerID = this.customerID;this.customerService.getCustomer(customer)
.subscribe(
response => this.getCustomerOnSuccess(response),
response => this.getCustomerOnError(response));
}
else {
this.customerID = 0;
this.showAddButton = true;
this.showUpdateButton = false;
}});
}private getCustomerOnSuccess(response: Customer) {
this.customerCode = response.customerCode;
this.companyName = response.companyName;
this.phoneNumber = response.phoneNumber;
this.address.addressLine1 = response.addressLine1;
this.address.addressLine2 = response.addressLine2;
this.address.city = response.city;
this.address.state = response.state;
this.address.zipCode = response.zipCode;
this.showUpdateButton = true;
this.showAddButton = false;
}private getCustomerOnError(response: Customer) {
this.alertService.renderErrorMessage(response.returnMessage);
this.messageBox = this.alertService.returnFormattedMessage();
this.alerts = this.alertService.returnAlerts();
this.alertService.setValidationErrors(this, response.validationErrors);
}public updateCustomer(): void {
let customer = new Customer();
customer.customerID = this.customerID;
customer.customerCode = this.customerCode;
customer.companyName = this.companyName;
customer.phoneNumber = this.phoneNumber;
customer.addressLine1 = this.address.addressLine1;
customer.addressLine2 = this.address.addressLine2;
customer.city = this.address.city;
customer.state = this.address.state;
customer.zipCode = this.address.zipCode;this.clearInputErrors();
this.customerService.updateCustomer(customer)
.subscribe(
response => this.updateCustomerOnSuccess(response),
response => this.updateCustomerOnError(response));
}private updateCustomerOnSuccess(response: Customer) {
if (this.customerID == 0) {
this.customerID = response.customerID;
this.showAddButton = false;
this.showUpdateButton = true;
}
this.alertService.renderSuccessMessage(response.returnMessage);
this.messageBox = this.alertService.returnFormattedMessage();
this.alerts = this.alertService.returnAlerts();
}private updateCustomerOnError(response: Customer) {
this.alertService.renderErrorMessage(response.returnMessage);
this.messageBox = this.alertService.returnFormattedMessage();
this.alerts = this.alertService.returnAlerts();
this.alertService.setValidationErrors(this, response.validationErrors);
}
private clearInputErrors() {
this.customerCodeInputError = false;
this.companyNameInputError = false;
}
}Still getting the same error.plz suggest where I am doing wrong.What i am missing
Thursday, November 16, 2017 4:33 AM