Cannot add directivesin angular2 plz help!!RSS

• • Reply
  suvo

  Member

  2 Points

  382 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]
  })

• • Reply
  Eric Du

  Contributor

  6680 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 

  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.
  
• • Reply
  suvo

  Member

  2 Points

  382 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