Can't bind to 'state' since it isn't a known property of 'ion-bottom-drawer'

[DennisMuchiri]

ERROR Error: "Uncaught (in promise): Error: Template parse errors: Can't bind to 'state' since it isn't a known property of 'ion-bottom-drawer'.

1. If 'ion-bottom-drawer' is an Angular component and it has 'state' input, then verify that it is part of this module.
2. If 'ion-bottom-drawer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

<ion-bottom-drawer [ERROR ->][(state)]="drawerState" [minimumHeight]="minimumHeight" [dockedHeight]="dockedHeight" [shouldBounce"): ng:///MapPagePageModule/MapPagePage.html@32:19 Can't bind to 'minimumHeight' since it isn't a known property of 'ion-bottom-drawer'.

1. If 'ion-bottom-drawer' is an Angular component and it has 'minimumHeight' input, then verify that it is part of this module.
2. If 'ion-bottom-drawer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

<ion-bottom-drawer [(state)]="drawerState" [ERROR ->][minimumHeight]="minimumHeight" [dockedHeight]="dockedHeight" [shouldBounce]="shouldBounce" [distan"): ng:///MapPagePageModule/MapPagePage.html@32:43 Can't bind to 'dockedHeight' since it isn't a known property of 'ion-bottom-drawer'.

1. If 'ion-bottom-drawer' is an Angular component and it has 'dockedHeight' input, then verify that it is part of this module.
2. If 'ion-bottom-drawer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

<ion-bottom-drawer [(state)]="drawerState" [minimumHeight]="minimumHeight" [ERROR ->][dockedHeight]="dockedHeight" [shouldBounce]="shouldBounce" [distanceTop]="distanceTop"> <div cla"): ng:///MapPagePageModule/MapPagePage.html@32:75 Can't bind to 'shouldBounce' since it isn't a known property of 'ion-bottom-drawer'.

1. If 'ion-bottom-drawer' is an Angular component and it has 'shouldBounce' input, then verify that it is part of this module.
2. If 'ion-bottom-drawer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ttom-drawer [(state)]="drawerState" [minimumHeight]="minimumHeight" [dockedHeight]="dockedHeight" [ERROR ->][shouldBounce]="shouldBounce" [distanceTop]="distanceTop">
   Bottom "): ng:///MapPagePageModule/MapPagePage.html@33:2 Can't bind to 'distanceTop' since it isn't a known property of 'ion-bottom-drawer'.
4. If 'ion-bottom-drawer' is an Angular component and it has 'distanceTop' input, then verify that it is part of this module.
5. If 'ion-bottom-drawer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
6. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("tate" [minimumHeight]="minimumHeight" [dockedHeight]="dockedHeight" [shouldBounce]="shouldBounce" [ERROR ->][distanceTop]="distanceTop">
   Bottom Drawer Content "): ng:///MapPagePageModule/MapPagePage.html@33:32 'ion-bottom-drawer' is not a known element:
7. If 'ion-bottom-drawer' is an Angular component, then verify that it is part of this module.
8. If 'ion-bottom-drawer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

[ERROR ->]<ion-bottom-drawer [(state)]="drawerState" [minimumHeight]="minimumHeight" [dockedHeight]="dockedHeig"): ng:///MapPagePageModule/MapPagePage.html@32:0 Can't bind to 'state' since it isn't a known property of 'ion-bottom-drawer'.

1. If 'ion-bottom-drawer' is an Angular component and it has 'state' input, then verify that it is part of this module.
2. If 'ion-bottom-drawer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

<ion-bottom-drawer [ERROR ->][(state)]="drawerState" [minimumHeight]="minimumHeight" [dockedHeight]="dockedHeight" [shouldBounce"): ng:///MapPagePageModule/MapPagePage.html@32:19 Can't bind to 'minimumHeight' since it isn't a known property of 'ion-bottom-drawer'.

1. If 'ion-bottom-drawer' is an Angular component and it has 'minimumHeight' input, then verify that it is part of this module.
2. If 'ion-bottom-drawer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

<ion-bottom-drawer [(state)]="drawerState" [ERROR ->][minimumHeight]="minimumHeight" [dockedHeight]="dockedHeight" [shouldBounce]="shouldBounce" [distan"): ng:///MapPagePageModule/MapPagePage.html@32:43 Can't bind to 'dockedHeight' since it isn't a known property of 'ion-bottom-drawer'.

1. If 'ion-bottom-drawer' is an Angular component and it has 'dockedHeight' input, then verify that it is part of this module.
2. If 'ion-bottom-drawer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

<ion-bottom-drawer [(state)]="drawerState" [minimumHeight]="minimumHeight" [ERROR ->][dockedHeight]="dockedHeight" [shouldBounce]="shouldBounce" [distanceTop]="distanceTop"> <div cla"): ng:///MapPagePageModule/MapPagePage.html@32:75 Can't bind to 'shouldBounce' since it isn't a known property of 'ion-bottom-drawer'.

1. If 'ion-bottom-drawer' is an Angular component and it has 'shouldBounce' input, then verify that it is part of this module.
2. If 'ion-bottom-drawer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ttom-drawer [(state)]="drawerState" [minimumHeight]="minimumHeight" [dockedHeight]="dockedHeight" [ERROR ->][shouldBounce]="shouldBounce" [distanceTop]="distanceTop">
   Bottom "): ng:///MapPagePageModule/MapPagePage.html@33:2 Can't bind to 'distanceTop' since it isn't a known property of 'ion-bottom-drawer'.
4. If 'ion-bottom-drawer' is an Angular component and it has 'distanceTop' input, then verify that it is part of this module.
5. If 'ion-bottom-drawer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
6. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("tate" [minimumHeight]="minimumHeight" [dockedHeight]="dockedHeight" [shouldBounce]="shouldBounce" [ERROR ->][distanceTop]="distanceTop">
   Bottom Drawer Content "): ng:///MapPagePageModule/MapPagePage.html@33:32 'ion-bottom-drawer' is not a known element:
7. If 'ion-bottom-drawer' is an Angular component, then verify that it is part of this module.
8. If 'ion-bottom-drawer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

[ERROR ->]<ion-bottom-drawer [(state)]="drawerState" [minimumHeight]="minimumHeight" [dockedHeight]="dockedHeig"): ng:///MapPagePageModule/MapPagePage.html@32:0 syntaxError@http://localhost:8100/vendor.js:10323:24 parse@http://localhost:8100/vendor.js:19336:19 _parseTemplate@http://localhost:8100/vendor.js:33869:37 _compileTemplate@http://localhost:8100/vendor.js:33857:69 _compileComponents/<@http://localhost:8100/vendor.js:33801:46 _compileComponents@http://localhost:8100/vendor.js:33801:19 _compileModuleAndComponents/<@http://localhost:8100/vendor.js:33714:18 then@http://localhost:8100/vendor.js:10314:71 _compileModuleAndComponents@http://localhost:8100/vendor.js:33713:26 compileModuleAsync@http://localhost:8100/vendor.js:33675:37 compileModuleAsync@http://localhost:8100/vendor.js:83552:50 loadModuleFactory/<@http://localhost:8100/vendor.js:93378:92 _tryNext@http://localhost:8100/vendor.js:118890:27 _next@http://localhost:8100/vendor.js:118880:18 next@http://localhost:8100/vendor.js:114176:18 subscribeToPromise/</<@http://localhost:8100/vendor.js:123681:24 invoke@http://localhost:8100/polyfills.js:3365:26 onInvoke@http://localhost:8100/vendor.js:69411:33 invoke@http://localhost:8100/polyfills.js:3364:52 run@http://localhost:8100/polyfills.js:3130:43 scheduleResolveOrReject/<@http://localhost:8100/polyfills.js:3861:36 invokeTask@http://localhost:8100/polyfills.js:3397:31 onInvokeTask@http://localhost:8100/vendor.js:69392:33 invokeTask@http://localhost:8100/polyfills.js:3396:60 runTask@http://localhost:8100/polyfills.js:3174:47 drainMicroTaskQueue@http://localhost:8100/polyfills.js:3565:35 invokeTask@http://localhost:8100/polyfills.js:3475:21 invokeTask@http://localhost:8100/polyfills.js:4609:14 globalZoneAwareCallback@http://localhost:8100/polyfills.js:4635:27

[RobinGiel]

in your app module add: ...

import { IonBottomDrawerModule } from 'ion-bottom-drawer'; ...

@NgModule({ imports: [ IonBottomDrawerModule,

.........

Also add this you you page module the same.

in your page ts add:

import { DrawerState } from 'ion-bottom-drawer';

[DaniilVysotskiy]

@RobinGiel unfortunatelly, this is not helping. According to manual adding IonBottomDrawerModule to app.module.ts is not enough to get component work on app level. Instead, it's just complaining about unknown properties.

I've looked through the source-code of imported ion-bottom-drawer/app/modules/ion-bottom-drawer/ion-bottom-drawer.module.d.ts (v2.0.0) and found out that it is just an empty class without needed @NgModule decorator and @NgModule.schemas CUSTOM_ELEMENTS_SCHEMA, it's just like this:

export declare class IonBottomDrawerModule {}

Could be a reason of that particular issue?

[RobinGiel]

You also have a module for your page, add it there aswel. So add it in app module and your page module

[RobinGiel]

Also add this to ypur app module ts:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA],

[DennisMuchiri]

Thank you. Closing issue.

[DaniilVysotskiy]

@RobinGiel Thanks! Eventually, it works even if imported with schemas on the component level only.