search

softsimon / ngx-bootstrap-multiselect

Angular 9+ Dropdown Multiselect Bootstrap
332 stars 198 forks source link

Errors with getting angular-2-dropdown-multiselect working on my project #291

Closed stephenad closed 7 years ago

stephenad commented 7 years ago

Hi

I am trying to setup and use your angular-2-dropdown-multiselect. I have downloaded your zip file and put in int my project and setup my routing to the dropdown.component.ts which I assume is correct

In npm I have run the installer and in my app.module file I have put the import statements in.

When I try and load the project I get these errors on the console, can anyone what advise what I have missed or might be doing wrong?

` ERROR in C:/wamp/www/nationalgrid/public_cli/src/app/dropdown/dropdown.component.ts (204,66): Property 'options' does not exist on type 'SimpleChanges'.

ERROR in C:/wamp/www/nationalgrid/public_cli/src/app/dropdown/dropdown.component.ts (206,54): Property 'options' does not exist on type 'SimpleChanges'.

ERROR in C:/wamp/www/nationalgrid/public_cli/src/app/dropdown/dropdown.component.ts (207,35): Property 'options' does not exist on type 'SimpleChanges'.

ERROR in C:/wamp/www/nationalgrid/public_cli/src/app/dropdown/dropdown.component.ts (435,73): Property 'includes' does not exist on type 'any[]'.

ERROR in C:/wamp/www/nationalgrid/public_cli/src/app/dropdown/dropdown.component.ts (449,100): Property 'includes' does not exist on type 'any[]'. `

Thanks Andy

stephenad commented 7 years ago

Hi Folks,

I have worked with this further but am now getting these errors in my console and my page will not load, please advise:

` VM123333 vendor.bundle.js:236748 Unhandled Promise rejection: Template parse errors: Can't bind to 'ngIfElse' since it isn't a known property of 'a'. ("tyle]="getItemStyle(option)" [ngClass]="option.classes" [class.dropdown-header]="option.isLabel"><a [ERROR ->]ngIf="!option.isLabel; else label" href="javascript:;" role="menuitem" tabindex="-1" [style.padding-"): MultiselectDropdown@0:2591 Property binding ngIfElse not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("ngStyle]="getItemStyle(option)" [ngClass]="option.classes" [class.dropdown-header]="option.isLabel">[ERROR ->]<a ngIf="!option.isLabel; else label" href="javascript:;" role="menuitem" tabindex="-1" [style.paddi"): MultiselectDropdown@0:2588 'ng-template' is not a known element:

  1. If 'ng-template' is an Angular component, then verify that it is part of this module.
  2. If 'ng-template' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("style.font-weight]="this.parents.indexOf(option.id)>=0?'bold':'normal'">{{ option.name }}[ERROR ->]<ng-template #label>{{ option.name }}
"): MultiselectDropdown@0:3503 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors: Can't bind to 'ngIfElse' since it isn't a known property of 'a'. ("tyle]="getItemStyle(option)" [ngClass]="option.classes" [class.dropdown-header]="option.isLabel"><a [ERROR ->]ngIf="!option.isLabel; else label" href="javascript:;" role="menuitem" tabindex="-1" [style.padding-"): MultiselectDropdown@0:2591 Property binding ngIfElse not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("ngStyle]="getItemStyle(option)" [ngClass]="option.classes" [class.dropdown-header]="option.isLabel">[ERROR ->]<a ngIf="!option.isLabel; else label" href="javascript:;" role="menuitem" tabindex="-1" [style.paddi"): MultiselectDropdown@0:2588 'ng-template' is not a known element:
  • If 'ng-template' is an Angular component, then verify that it is part of this module.
  • If 'ng-template' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("style.font-weight]="this.parents.indexOf(option.id)>=0?'bold':'normal'">{{ option.name }}[ERROR ->]<ng-template #label>{{ option.name }}
    • "): MultiselectDropdown@0:3503 at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:46615:19) [] at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:83496:68) [] at http://localhost:4200/vendor.bundle.js:83379:62 [] at Set.forEach (native) [] at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:83379:19) [] at createResult (http://localhost:4200/vendor.bundle.js:83262:19) [] at Zone.run (http://localhost:4200/vendor.bundle.js:236469:43) [ => ] at http://localhost:4200/vendor.bundle.js:236865:57 [] at Zone.runTask (http://localhost:4200/vendor.bundle.js:236507:47) [ => ] at drainMicroTaskQueue (http://localhost:4200/vendor.bundle.js:236761:35) [] at [] Error: Template parse errors: Can't bind to 'ngIfElse' since it isn't a known property of 'a'. ("tyle]="getItemStyle(option)" [ngClass]="option.classes" [class.dropdown-header]="option.isLabel"><a [ERROR ->]ngIf="!option.isLabel; else label" href="javascript:;" role="menuitem" tabindex="-1" [style.padding-"): MultiselectDropdown@0:2591 Property binding ngIfElse not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("ngStyle]="getItemStyle(option)" [ngClass]="option.classes" [class.dropdown-header]="option.isLabel">[ERROR ->]<a ngIf="!option.isLabel; else label" href="javascript:;" role="menuitem" tabindex="-1" [style.paddi"): MultiselectDropdown@0:2588 'ng-template' is not a known element:
  • If 'ng-template' is an Angular component, then verify that it is part of this module.
  • If 'ng-template' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("style.font-weight]="this.parents.indexOf(option.id)>=0?'bold':'normal'">{{ option.name }}[ERROR ->]<ng-template #label>{{ option.name }}
    • "): MultiselectDropdown@0:3503 at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:46615:19) [] at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:83496:68) [] at http://localhost:4200/vendor.bundle.js:83379:62 [] at Set.forEach (native) [] at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:83379:19) [] at createResult (http://localhost:4200/vendor.bundle.js:83262:19) [] at Zone.run (http://localhost:4200/vendor.bundle.js:236469:43) [ => ] at http://localhost:4200/vendor.bundle.js:236865:57 [] at Zone.runTask (http://localhost:4200/vendor.bundle.js:236507:47) [ => ] at drainMicroTaskQueue (http://localhost:4200/vendor.bundle.js:236761:35) [] at [] consoleError @ vendor.bundle.js:236748 _loop_1 @ vendor.bundle.js:236777 drainMicroTaskQueue @ vendor.bundle.js:236781 Promise resolved (async) scheduleQueueDrain @ vendor.bundle.js:236734 scheduleMicroTask @ vendor.bundle.js:236742 ZoneDelegate.scheduleTask @ vendor.bundle.js:236601 Zone.scheduleMicroTask @ vendor.bundle.js:236521 scheduleResolveOrReject @ vendor.bundle.js:236863 ZoneAwarePromise.then @ vendor.bundle.js:236949 ZoneAwarePromise.all @ vendor.bundle.js:236929 JitCompiler._loadModules @ vendor.bundle.js:83308 JitCompiler.compileModuleAndComponents @ vendor.bundle.js:83260 JitCompiler.compileModuleAsync @ vendor.bundle.js:83226 PlatformRef.bootstrapModuleWithZone @ vendor.bundle.js:68238 PlatformRef.bootstrapModule @ vendor.bundle.js:68213 861 @ main.bundle.js:12357 webpack_require @ inline.bundle.js:53 1653 @ main.bundle.js:4090 webpack_require @ inline.bundle.js:53 webpackJsonpCallback @ inline.bundle.js:24 (anonymous) @ main.bundle.js:1 11:03:02.416 VM123333 vendor.bundle.js:236750 Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'ngIfElse' since it isn't a known property of 'a'. ("tyle]="getItemStyle(option)" [ngClass]="option.classes" [class.dropdown-header]="option.isLabel"><a [ERROR ->]ngIf="!option.isLabel; else label" href="javascript:;" role="menuitem" tabindex="-1" [style.padding-"): MultiselectDropdown@0:2591 Property binding ngIfElse not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("ngStyle]="getItemStyle(option)" [ngClass]="option.classes" [class.dropdown-header]="option.isLabel">[ERROR ->]<a ngIf="!option.isLabel; else label" href="javascript:;" role="menuitem" tabindex="-1" [style.paddi"): MultiselectDropdown@0:2588 'ng-template' is not a known element:
  • If 'ng-template' is an Angular component, then verify that it is part of this module.
  • If 'ng-template' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("style.font-weight]="this.parents.indexOf(option.id)>=0?'bold':'normal'">{{ option.name }}[ERROR ->]<ng-template #label>{{ option.name }}
    • "): MultiselectDropdown@0:3503 Error: Template parse errors: Can't bind to 'ngIfElse' since it isn't a known property of 'a'. ("tyle]="getItemStyle(option)" [ngClass]="option.classes" [class.dropdown-header]="option.isLabel"><a [ERROR ->]ngIf="!option.isLabel; else label" href="javascript:;" role="menuitem" tabindex="-1" [style.padding-"): MultiselectDropdown@0:2591 Property binding ngIfElse not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("ngStyle]="getItemStyle(option)" [ngClass]="option.classes" [class.dropdown-header]="option.isLabel">[ERROR ->]<a ngIf="!option.isLabel; else label" href="javascript:;" role="menuitem" tabindex="-1" [style.paddi"): MultiselectDropdown@0:2588 'ng-template' is not a known element:
  • If 'ng-template' is an Angular component, then verify that it is part of this module.
  • If 'ng-template' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("style.font-weight]="this.parents.indexOf(option.id)>=0?'bold':'normal'">{{ option.name }}[ERROR ->]<ng-template #label>{{ option.name }}
    • "): MultiselectDropdown@0:3503 at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:46615:19) [] at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:83496:68) [] at http://localhost:4200/vendor.bundle.js:83379:62 [] at Set.forEach (native) [] at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:83379:19) [] at createResult (http://localhost:4200/vendor.bundle.js:83262:19) [] at Zone.run (http://localhost:4200/vendor.bundle.js:236469:43) [ => ] at http://localhost:4200/vendor.bundle.js:236865:57 [] at Zone.runTask (http://localhost:4200/vendor.bundle.js:236507:47) [ => ] at drainMicroTaskQueue (http://localhost:4200/vendor.bundle.js:236761:35) [] at [] at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:46615:19) [] at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:83496:68) [] at http://localhost:4200/vendor.bundle.js:83379:62 [] at Set.forEach (native) [] at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:83379:19) [] at createResult (http://localhost:4200/vendor.bundle.js:83262:19) [] at Zone.run (http://localhost:4200/vendor.bundle.js:236469:43) [ => ] at http://localhost:4200/vendor.bundle.js:236865:57 [] at Zone.runTask (http://localhost:4200/vendor.bundle.js:236507:47) [ => ] at drainMicroTaskQueue (http://localhost:4200/vendor.bundle.js:236761:35) [] at [] at resolvePromise (http://localhost:4200/vendor.bundle.js:236831:31) [] at resolvePromise (http://localhost:4200/vendor.bundle.js:236816:17) [] at http://localhost:4200/vendor.bundle.js:236865:17 [] at Zone.runTask (http://localhost:4200/vendor.bundle.js:236507:47) [ => ] at drainMicroTaskQueue (http://localhost:4200/vendor.bundle.js:236761:35) [] at [] `

    Thanks

    softsimon commented 7 years ago

    @stephenad You are using Angular 2.x and the component requires at least Angular 4.x. ng-template is a new element in 4.x.

    stephenad commented 7 years ago

    Oh ok, thanks, will have to see what options I have as upgrading is not one.

    Thanks

    • © Githubissues.
    • Githubissues is a development platform for aggregating issues.