locked
Can't bind to 'alerts' since it isn't a known property of 'alertbox'. plz help!! RRS feed

  • Question

  • User483994611 posted

    I am getting unusual error:-

    Unhandled Promise rejection: Template parse errors:

    Can't bind to 'alerts' since it isn't a known property of 'alertbox'. ("

    <div><alertbox [ERROR ->][alerts]="alerts" [messageBox]="messageBox"></alertbox></div>

    "): CustomerInquiryComponent@43:14

    Can't bind to 'messageBox' since it isn't a known property of 'alertbox'. ("

    My CustomerInquiryComponent.ts looks like

    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';

    export var debugVersion = "?version=" + Date.now();

    @Component({

        templateUrl: 'app/Components/customer/customer-inquiry.component.html' + debugVersion,

      providers: [AlertService]

    })

    export class CustomerInquiryComponent implements OnInit {

    @ViewChild(DataGrid) datagrid: DataGrid;

    public title: string = 'Customer Inquiry';

        public customers: Customer[];

        public columns = [];

      public alerts: Array<string> = [];

        public messageBox: string;

        public totalRows: number;

        public currentPageNumber: number = 1;

        public totalPages: number;

        public pageSize: number;

        public companyName: string;

        public customerCode: string;

        private sortDirection: string;

        private sortExpression: string;

        public autoFilter: Boolean;

        public delaySearch: Boolean;

        public runningSearch: Boolean;

        constructor(private alertService: AlertService, private customerService: CustomerService, private router: Router) {

         this.currentPageNumber = 1;

            this.autoFilter = false;

            this.totalPages = 0;

            this.totalRows = 0;

            this.pageSize = 15;

            this.sortDirection = "ASC";

            this.sortExpression = "CompanyName";

        }

        public ngOnInit() {

      this.columns.push(new DataGridColumn('customerCode', 'Customer Code', '[{"width": "20%" , "disableSorting": false}]'));

            this.columns.push(new DataGridColumn('companyName', 'Company Name', '[{"width": "30%" , "hyperLink": true, "disableSorting": false}]'));

            this.columns.push(new DataGridColumn('city', 'City', '[{"width": "20%" , "disableSorting": false}]'));

            this.columns.push(new DataGridColumn('zipCode', 'Zip Code', '[{"width": "15%" , "disableSorting": false}]'));

            this.columns.push(new DataGridColumn('dateUpdated', 'Date Updated', '[{"width": "15%" , "disableSorting": false, "formatDate": true}]'));

    this.executeSearch();

     }

    private executeSearch(): void {

    if (this.runningSearch == true) return;

    let miliseconds = 500;

            if (this.delaySearch == false) {

                miliseconds = 0;

            }

            this.runningSearch = true;

            setTimeout(() => {

             

                let customer = new Customer();

                customer.customerCode = this.customerCode;

                customer.companyName = this.companyName;

                customer.pageSize = this.pageSize;

                customer.sortDirection = this.sortDirection;

                customer.sortExpression = this.sortExpression;

                customer.currentPageNumber = this.currentPageNumber;

                this.customerService.getCustomers(customer)

                    .subscribe(

                    response => this.getCustomersOnSuccess(response),

                    response => this.getCustomersOnError(response));

            }, miliseconds)

        }

        private getCustomersOnSuccess(response: Customer): void {

            let transactionalInformation = new TransactionalInformation();

            transactionalInformation.currentPageNumber = this.currentPageNumber;

            transactionalInformation.pageSize = this.pageSize;

            transactionalInformation.totalPages = response.totalPages;

            transactionalInformation.totalRows = response.totalRows;

            transactionalInformation.sortDirection = this.sortDirection;

            transactionalInformation.sortExpression = this.sortExpression;

            this.customers = response.customers;

            this.datagrid.databind(transactionalInformation);

            this.alertService.renderSuccessMessage(response.returnMessage);

            this.messageBox = this.alertService.returnFormattedMessage();

            this.alerts = this.alertService.returnAlerts();

            this.runningSearch = false;

        }

        private getCustomersOnError(response): void {

            this.alertService.renderErrorMessage(response.returnMessage);

            this.messageBox = this.alertService.returnFormattedMessage();

            this.alerts = this.alertService.returnAlerts();

            this.runningSearch = false;

        }

        public datagridEvent(event) {

            let datagridEvent: DataGridEventInformation = event.value;

            if (datagridEvent.EventType == "PagingEvent") {

                this.pagingCustomers(datagridEvent.CurrentPageNumber);

            }

            else if (datagridEvent.EventType == "PageSizeChanged") {

                this.pageSizeChanged(datagridEvent.PageSize);

            }

            else if (datagridEvent.EventType == "ItemSelected") {

                this.selectedCustomer(datagridEvent.ItemSelected);

            }

            else if (datagridEvent.EventType == "Sorting") {

                this.sortCustomers(datagridEvent.SortDirection, datagridEvent.SortExpression);

            }

        }

        private selectedCustomer(itemSelected: number) {

            let rowSelected = itemSelected;

            let row = this.customers[rowSelected];

            let customerID = row.customerID;

            this.router.navigate(['/customer/customermaintenance', { id: customerID }]);

        }

        private sortCustomers(sortDirection: string, sortExpression: string) {

            this.sortDirection = sortDirection;

            this.sortExpression = sortExpression;

            this.currentPageNumber = 1;

            this.delaySearch = false;

            this.executeSearch();

        }

        private pagingCustomers(currentPageNumber: number) {

            this.currentPageNumber = currentPageNumber;

            this.delaySearch = false;

            this.executeSearch();

        }

        private pageSizeChanged(pageSize: number) {

            this.pageSize = pageSize;

            this.currentPageNumber = 1;

            this.delaySearch = false;

            this.executeSearch();

        }

        public reset(): void {

            this.customerCode = "";

            this.companyName = "";

            this.currentPageNumber = 1;

            this.delaySearch = false;

            this.executeSearch();

        }

        public search(): void {

            this.currentPageNumber = 1;

            this.delaySearch = false;

            this.executeSearch();

        }

        public companyNameChanged(newValue): void {

            if (this.autoFilter == false) return;

            if (newValue == "") return;

            this.companyName = newValue;

            this.currentPageNumber = 1;

            this.delaySearch = true;

            setTimeout(() => {

                this.executeSearch();

            }, 500)

        }

        public customerCodeChanged(newValue): void {

            if (this.autoFilter == false) return;

            if (newValue == "") return;

            this.customerCode = newValue;

            this.currentPageNumber = 1;

            this.delaySearch = true;

            setTimeout(() => {

                this.executeSearch();

            }, 500)

        }

    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 { CustomerInquiryComponent } from './Components/Customer/customer-inquiry.component';

    import { RegistrationComponent } from './components/Registration/Registration.component';

    import { UserService } from './Service/user.service';

    import { AlertService } from './Components/Services/alert.service';

    import { DataGrid } from './Components/Shared/DataGrid/datagrid.component';

    @NgModule({

        imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, routing, Ng2Bs3ModalModule],

     declarations: [AppComponent, UserComponent, HomeComponent, FetchDataComponent, RegistrationComponent, DataGrid, CustomerInquiryComponent],

    providers: [{ provide: APP_BASE_HREF, useValue: '/' }, UserService, AlertService],

        bootstrap: [AppComponent]

    })

    export class AppModule { }

    }

    Wednesday, November 22, 2017 7:02 PM

All replies

  • User-1838255255 posted

    Hi suvo,

    According to your description and error message, i found here are someone who meet the similar issue as you, please check: 

    zone.js:569 Unhandled Promise rejection: Template parse errors:

    https://stackoverflow.com/questions/43361799/zone-js569-unhandled-promise-rejection-template-parse-errors  

    ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'monthviewEventDetailTemplate' since it isn't a known property of 'calendar'. 

    https://github.com/twinssbc/Ionic2-Calendar/issues/184 

    Best Regards,

    Eric Du 

    Thursday, November 23, 2017 6:07 AM
  • User483994611 posted

    In customer-inquiry.component.html  <!--<alertbox [alerts]="alerts" [messageBox]="messageBox"></alertbox>--> 

    if i comment this,

    Can't bind to 'alerts' since it isn't a known property of 'alertbox'.

    this error goes away because i removed alert reference

    Now the page opens but DI error comes I have removed all alert references but still DI error exists

    I feel there is some prob with dependency injection

    I think all dependencies are declared accordingly

    Cant understand..plz help

    Friday, November 24, 2017 4:48 AM
  • User-80694925 posted

    make sure your dependency and alert is imported only in your ng module. no other declerations or providers required. 

    Sunday, November 26, 2017 2:23 PM
  • User-80694925 posted

    @NgModule({

        imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, routing, Ng2Bs3ModalModule],

     declarations: [AppComponent, UserComponent, HomeComponent, FetchDataComponent, RegistrationComponent, DataGrid, CustomerInquiryComponent],

    providers: [{ provide: APP_BASE_HREF, useValue: '/' }, UserService, AlertService],

        bootstrap: [AppComponent]

    })

    alertbox declaration is missing

    Sunday, November 26, 2017 2:24 PM
  • User483994611 posted

    I added AlertBoxComponent but it did not work out...

    The error is 

    Can't bind to 'type' since it isn't a known property of 'alert'. ("

    <div style="padding-top:20px">

        <alert *ngFor="let alert of alerts; let i = index" [ERROR ->][type]="alert.type" dismissible="true" (close)="closeAlert(i)">

            <div [innerHTML]="messageBox"): AlertBoxComponent@2:55

    'alert' is not a known element:

    1. If 'alert' is an Angular component, then verify that it is part of this module.

    2. If 'alert' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("

    <div style="padding-top:20px">

        [ERROR ->]<alert *ngFor="let alert of alerts; let i = index" [type]="alert.type" dismissible="true" (close)="cl"): AlertBoxComponent@2:4 ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError Error: Template parse errors:

    Can't bind to 'type' since it isn't a known property of 'alert'. ("

    <div style="padding-top:20px">

        <alert *ngFor="let alert of alerts; let i = index" [ERROR ->][type]="alert.type" dismissible="true" (close)="closeAlert(i)">

            <div [innerHTML]="messageBox"): AlertBoxComponent@2:55

    'alert' is not a known element:

    1. If 'alert' is an Angular component, then verify that it is part of this module.

    2. If 'alert' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("

    <div style="padding-top:20px">

        [ERROR ->]<alert *ngFor="let alert of alerts; let i = index" [type]="alert.type" dismissible="true" (close)="cl"): AlertBoxComponent@2:4

        at SyntaxError.ZoneAwareError (http://localhost:54199/node_modules/zone.js/dist/zone.js:992:33)

        at SyntaxError.BaseError [as constructor] (http://localhost:54199/node_modules/@angular/compiler/bundles/compiler.umd.js:1592:20)

        at new SyntaxError (http://localhost:54199/node_modules/@angular/compiler/bundles/compiler.umd.js:1795:20)

        at TemplateParser.parse (http://localhost:54199/node_modules/@angular/compiler/bundles/compiler.umd.js:11435:23)

        at JitCompiler._compileTemplate (http://localhost:54199/node_modules/@angular/compiler/bundles/compiler.umd.js:27548:72)

        at eval (http://localhost:54199/node_modules/@angular/compiler/bundles/compiler.umd.js:27431:66)

        at Set.forEach (<anonymous>)

        at JitCompiler._compileComponents (http://localhost:54199/node_modules/@angular/compiler/bundles/compiler.umd.js:27431:23)

        at createResult (http://localhost:54199/node_modules/@angular/compiler/bundles/compiler.umd.js:27313:23)

        at ZoneDelegate.invoke (http://localhost:54199/node_modules/zone.js/dist/zone.js:334:26)

        at Zone.run (http://localhost:54199/node_modules/zone.js/dist/zone.js:126:43)

        at http://localhost:54199/node_modules/zone.js/dist/zone.js:713:57

        at ZoneDelegate.invokeTask (http://localhost:54199/node_modules/zone.js/dist/zone.js:367:31)

        at Zone.runTask (http://localhost:54199/node_modules/zone.js/dist/zone.js:166:47)

        at drainMicroTaskQueue (http://localhost:54199/node_modules/zone.js/dist/zone.js:546:35)

    My app.module.ts looks like :-

    @NgModule({

        imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, routing, Ng2Bs3ModalModule],

        declarations: [AppComponent, UserComponent, HomeComponent, FetchDataComponent, RegistrationComponent, DataGrid, CustomerInquiryComponent, AlertBoxComponent],

         providers: [{ provide: APP_BASE_HREF, useValue: '/' }, UserService, CustomerService, AlertService],

        bootstrap: [AppComponent]

    })

    Monday, November 27, 2017 5:15 AM
  • User483994611 posted

    Can some body assist..waiting eagerly..?

    Thursday, December 14, 2017 11:21 AM