Material.angular with Ionic

Ionic Framework ionic-v3
1

Hi,
how to use material.angualr.io datepicker with Ionic ?
here is what I did,

npm install --save @angular/material @angular/cdk
npm install --save @angular/animations

import {MatDatepicker} from '@angular/material';

@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    MatDatepicker,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
  ]
})
export class AppModule {}

also tried import in component module.

and I keep getting below error

image
image.png853Ă—517 36.8 KB

I anyidea what am I doing wrong ? or how to fix the issue of “please add @NgModule annotation”

2

you are not added that datepicker plugin to providers area of this code please add it it will work

3

Tried that too, still same error.

4

hey bro I have one problem : error :uncaught Uncaught(in promise): plugin_not_installed (image picker )
am using image picker plugin for selecting multiple images from gallery …i already install it but when I fired npm install --save imagepicker command then it shows warning…and finally after ionic serve command on Dev-app " Uncaught(in promise): plugin_not_installed " …and also cordova is not available …please help me to solve problem

5

I think you need to import MatDatepickerModule, not MatDatepicker.

like this
import {MatDatepickerModule} from '@angular/material';

@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    MatDatepickerModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
  ]
})
export class AppModule {}

I hope your problem will be fixed
Good Luck
Thanks

1 Like
6

did you follow this guide ? https://ionicframework.com/docs/native/image-picker/
I believe imagepicker is native component, you can test it on ioinc serve, and corodva will not work on ionic serve as well. you have test it on ionic view or emulator or device for cordova to work.
hope this helps

7

am tested it on ionic dev-App but getting same error …ionic view means where ?

8

yes i follow that tutorial

9

import {MatDatepickerModule} from '@angular/material/datepicker';

https://material.angular.io/components/datepicker/api

10

Thank You after importing MatDatepickerModule, its working now

11

Congrats .keep it up

12

please help me to solve problem

13

how can i help you @umeshionic1234 ?

14

am getting error :cordova not available and also i already install image picker plugin in my project …but when i run ionic serve on npm cli and test it on ionic-DEVAPP …it gives me runtime error that …plugin is not installed

15

image
image.png783Ă—610 21.8 KB

16

Angular is running in the development mode. Call enableProdMode() to enable the production mode.
vendor.js:3918:9
Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
vendor.js:58616:9
Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
vendor.js:58616:9
Native: tried calling ImagePicker.getPictures, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
vendor.js:58616:9
ERROR
Error: Uncaught (in promise): cordova_not_available
Stack trace:
c@http://localhost:8100/build/polyfills.js:3:19752
c@http://localhost:8100/build/polyfills.js:3:19461
f/<@http://localhost:8100/build/polyfills.js:3:20233
F</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15649
onInvokeTask@http://localhost:8100/build/vendor.js:4973:24
F</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15562
F</c</r.prototype.runTask@http://localhost:8100/build/polyfills.js:3:10815
o@http://localhost:8100/build/polyfills.js:3:7887
F</h</e.invokeTask@http://localhost:8100/build/polyfills.js:3:16823
p@http://localhost:8100/build/polyfills.js:2:27646
v@http://localhost:8100/build/polyfills.js:2:27893
vendor.js:1703:5
The connection to ws://localhost:35729/livereload was interrupted while the page was loading.
livereload.js:76:20
The connection to ws://localhost:53703/ was interrupted while the page was loading.
ion-dev.js:101:18
Dev server logger closed
ion-dev.js:120:9
Firefox can’t establish a connection to the server at ws://localhost:35729/livereload.
livereload.js:76:20
Source map error: TypeError: NetworkError when attempting to fetch resource.
Resource URL: http://localhost:8100/build/vendor.js
Source Map URL: vendor.js.map

18

Please create a new topic.Your question is not related to this topic
Thanks