I am getting unusual error in the line marked as bold while defining the directive..Plz suggest what I am doing wrong
ErrorBuild: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();
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:
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
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> = [];
Member
3 Points
415 Posts
Cannot add directivesin angular2 plz help!!
Nov 14, 2017 05:42 AM|suvo|LINK
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]
})
Contributor
6730 Points
2715 Posts
Re: Cannot add directivesin angular2 plz help!!
Nov 15, 2017 07:34 AM|Eric Du|LINK
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:
https://stackoverflow.com/questions/39454379/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
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
3 Points
415 Posts
Re: Cannot add directivesin angular2 plz help!!
Nov 16, 2017 04:33 AM|suvo|LINK
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