#MatDatepicker: No provider found

54 messages · Page 1 of 1 (latest)

shell olive
#

Please post your files in their entirety:
The last one is your component, or some kind of NgModule?

obtuse leaf
#

no problem i can post the full file

#

add-order.component.ts:

shell olive
#

Please post your main.ts

#

You got to add one of the suggested provider functions to your bootstrapApplication method

modern palm
#

I had the same issue and I added Date Module to app.module.ts und it worked. You might have a same scenario where you have a parent comp or something like that?

obtuse leaf
#

i dont have a app.modules.ts, i think because my components are standalone

obtuse leaf
shell olive
# 
bootstrapApplication(AppComponent, {
  providers: [provideNativeDateAdapter()]
})
.catch((err) => console.error(err));
obtuse leaf
#

now i cant see anything 😄

shell olive
#

did you import provideNativeDateAdapter?

obtuse leaf
#

yes

# 
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { provideNativeDateAdapter } from '@angular/material/core';

bootstrapApplication(AppComponent, {
  providers: [ provideNativeDateAdapter() ]
})
.catch((err) => console.error(err));
shell olive
#

try to restart your app

obtuse leaf
#

i did, nothing change

#

u want to see it via anydesk?

shell olive
#

Just put a repro on stackblitz

obtuse leaf
#

my full project?

#

my order folder is in app

#

on stackblitz in main.ts are errors, in my project not

shell olive
obtuse leaf
#

i put my files in

shell olive
#

do you have it in a public github repo?

obtuse leaf
#

no just local on my pc :/

#

i can create a respo

shell olive
#

Why?

obtuse leaf
#

im creating a repo on github moment

shell olive
obtuse leaf
#

in my project it doesnt work for me, got provider error when i open add order every time

shell olive
#

retry now

#

btw, in the code you pushed on github there's not the provider I suggested earlier

obtuse leaf
#

when i click "+" button it doesnt open it, i think the same error like on my project

shell olive
#

Because you didn't add the code I suggested for provider before pushing to github

obtuse leaf
#

i added it but deleted it before i push it to github

#

with ur provider code i see nothing

#

check on blitzstack

#

i changed the main.ts code to the new code with provider

#

idk if its changes with you too, if not paste that into main.ts:

import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { provideNativeDateAdapter } from '@angular/material/core';

bootstrapApplication(AppComponent, {
  providers: [provideNativeDateAdapter()]
})
.catch((err) => console.error(err));
shell olive
#

That's because you already had an appConfig in place

obtuse leaf
#

yea it worked

#

thank u so much!!

#

@shell olive one question more, it is possible to change the format into DE format?
DD/MM/YYYY?

shell olive
#

It's all in the docs.
Read it carefully, because you can do many things with date format and locale.

obtuse leaf
#

i read and tried it, but nothing changed.

on add-order.component.ts

import { MAT_DATE_LOCALE, MAT_DATE_FORMATS } from '@angular/material/core';
// Definiere deutsche Datumsformat
export const GERMAN_DATE_FORMATS = {
  parse: {
    dateInput: 'DD.MM.YYYY',
  },
  display: {
    dateInput: 'DD.MM.YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'DD.MM.YYYY',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};


@Component({
  selector: 'app-add-order',
  standalone: true,
  imports: [
    MatCardModule, 
    MatFormFieldModule, 
    MatSelectModule, 
    MatIconModule, 
    MatButtonModule, 
    MatInputModule,
    MatMenuModule,
    MatPaginatorModule,
    MatTableModule,
    ReactiveFormsModule,
    CommonModule,
    MatDatepickerModule,
  ],
  templateUrl: './add-order.component.html',
  styleUrl: './add-order.component.scss',
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'de-DE' },
    { provide: MAT_DATE_FORMATS, useValue: GERMAN_DATE_FORMATS } 
  ]
})
export class AddOrderComponent {
shell olive
#

use a different provider

#

like provideDateFnsAdapter

obtuse leaf
#

all good

#

i think i got it with documentation