locked
Cannot add directivesin angular2 plz help!! RRS feed

  • 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:

    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 

    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