CODEWITHSUNDEEP
javascriptangularionic-framework
Marc Rasmussen
Marc Rasmussen

Reputation: 20545

ionic-native/date-picker StaticInjectorError

So I am attempting to use the DatePicker, however I am getting a StaticInjectorError

Here is what I've tried:

import {Component} from '@angular/core';
import {TextService} from '@core/services/text/text.service';
import {Router} from '@angular/router';
import {FeaturePage} from '@feature/paths';
import {User} from '@core/classes/user';
import {DatePicker} from '@ionic-native/date-picker/ngx';

@Component({
    selector: 'app-setup',
    templateUrl: 'setup.page.html',
    styleUrls: ['setup.page.scss'],
})
export class SetupPage {

    user: User;

    constructor(private textService: TextService, private router: Router, private datePicker: DatePicker) {
        this.user = new User();

        this.datePicker.show({
            date: new Date(),
            mode: 'date',
            androidTheme: this.datePicker.ANDROID_THEMES.THEME_HOLO_DARK
        }).then(
            date => console.log('Got date: ', date),
            err => console.log('Error occurred while getting date: ', err)
        );
    }

}

and I get the following error:

core.js:15724 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[SetupPage -> DatePicker]: 
  StaticInjectorError(Platform: core)[SetupPage -> DatePicker]: 
    NullInjectorError: No provider for DatePicker!
Error: StaticInjectorError(AppModule)[SetupPage -> DatePicker]: 
  StaticInjectorError(Platform: core)[SetupPage -> DatePicker]: 
    NullInjectorError: No provider for DatePicker!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8896)
    at resolveToken (core.js:9141)
    at tryResolveToken (core.js:9085)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8982)
    at resolveToken (core.js:9141)
    at tryResolveToken (core.js:9085)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8982)
    at resolveNgModuleDep (core.js:21218)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:21907)
    at resolveNgModuleDep (core.js:21218)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)

Usually this happens if you haven't imported the module, however in the documentation there is no module to import?

Upvotes: 3

Views: 1353

Answers (1)

Augustin R
Augustin R

Reputation: 7799

Try to add this in app.module.ts :

import { DatePicker } from '@ionic-native/date-picker/ngx';

[...]

@NgModule({
...
providers: [
    ...,
    DatePicker
]
...
})

Usually all @ionic-native packages have to be imported in app.module.ts's providers array, even if it's not mentioned in the ionic documentation.

Upvotes: 7

Related Questions