I'm trying to use the Datepicker component in Angular Material. Here is my HTML code:
<input matInput [matDatepicker]="picker" placeholder="Choose a date" disabled>
<mat-datepicker #picker disabled="false"></mat-datepicker>
However, it's not working for me and I'm getting the following error:
Error: MatDatepicker: No provider found for DateAdapter.
The error message tells me that I need to import MatNativeDateModule as well as MatDatepickerModule but I have done that. Here is my import code below from app.module.ts:
import {
MatFormFieldModule,
MatMenuModule,
MatCheckboxModule,
MatIconModule,
MatDatepickerModule,
MatNativeDateModule
} from '#angular/material';
Is there anything else I'm missing?
You need to import both MatDatepickerModule and MatNativeDateModule under imports and add MatDatepickerModule under providers
imports: [
MatDatepickerModule,
MatNativeDateModule
],
providers: [
MatDatepickerModule,
],
Angular 8, 9
import { MatDatepickerModule } from '#angular/material/datepicker';
import { MatNativeDateModule } from '#angular/material/core';
Angular 7 and below
import { MatDatepickerModule, MatNativeDateModule } from '#angular/material';
You need to import both MatDatepickerModule and MatNativeDateModule under imports and add MatDatepickerModule under providers
imports: [
MatDatepickerModule,
MatNativeDateModule
],
providers: [
MatDatepickerModule,
MatNativeDateModule
],
Just import the
MatNativeDateModule
along with the
MatDatepickerModule
at the app.module.ts or app-routing.module.ts.
#NgModule({
imports: [
MatDatepickerModule,
MatNativeDateModule
]
})
Official docs: Error: MatDatepicker: No provider found for DateAdapter/MAT_DATE_FORMATS
The datepicker was built to be date implementation agnostic. This means that it can be made to work with a variety of different date implementations. However it also means that developers need to make sure to provide the appropriate pieces for the datepicker to work with their chosen implementation. The easiest way to ensure this is just to import one of the pre-made modules: MatNativeDateModule, MatMomentDateModule.
Fix:
#NgModule({
imports: [MatDatepickerModule, MatNativeDateModule],
})
export class MyApp {}
In contrast on what has been said previously by some colleagues, you should NOT put MatDatepickerModule in prodivers array unless you have a good reason for it.
As a reminder (https://angular.io/guide/providers), and as it is well explained in the official documentation: A provider is an instruction to the Dependency Injection system on how to obtain a value for a dependency. Most of the time, these dependencies are services that you create and provide. In addition to this, providers are available to all the classes in the application which is not i guess, the purpose of MatDatepickerModule ! (since you should use it just in some few components)
So all what you need is to follow of course the examples well documented in the Angular official website (https://material.angular.io/components/datepicker/overview)
But before to check the solution, let's have a look at the self-explanatory error message:
ERROR Error: MatDatepicker: No provider found for DateAdapter. You must import one of the following modules at your application root: MatNativeDateModule, ....
It is not because the error talks initially about provider, that you just need to inject the staff in provider. Continue reading the full error...
Just one word about DateAdapter: DateAdapter is a class which adapts an object to be usable as a date by cdk-based components that work with dates. This DateAdapter needs to use some native functions from MatNativeDateModule
The suggested solution is:
In your app.module.ts import both MatDatepickerModule and MatNativeDateModule
...
import {MatDatepickerModule} from '#angular/material/datepicker';
import { MatNativeDateModule } from '#angular/material/core';
...
#NgModule({
imports: [MatDatepickerModule, MatNativeDateModule],
})
export class MyApp {}
When using the MatNativeDateModule together with MatDatepicker or MatCalendar inside your "sub module" (when you create your own module inside main app) you might need to import the MatNativeDateModule inside your main app module. Without this I was still getting
core.js?4dd3:1673 ERROR Error: MatDatepicker: No provider found for DateAdapter. You must import one of the following modules at your application root: MatNativeDateModule, MatMomentDateModule, or provide a custom implementation.
at createMissingDateImplError (datepicker.es5.js?d462:38:1)
at new MatCalendar (datepicker.es5.js?d462:1563:1)
Please not what the message is saying "at your application root".
My "submodule" delaration was looking like this:
#NgModule({
imports: [
(...)
MatDatepickerModule
],
providers: [MatDatepickerModule],
})
export class MySubModule
Adding MatNativeDateModule to above submodule delaration was not helping. I was getting another error:
core.js?4dd3:1673 ERROR Error: Uncaught (in promise): Error: Unexpected value 'undefined' imported by the module 'DexGridCalendarCellEditorModule'
Error: Unexpected value 'undefined' imported by the module 'DexGridCalendarCellEditorModule'
at syntaxError (compiler.js?db2b:1021:1)
at eval (compiler.js?db2b:10589:1)
at Array.forEach (<anonymous>)
at CompileMetadataResolver.getNgModuleMetadata (compiler.js?db2b:10558:1)
Finally when I added the import to main app module it started working correctly:
// NOTE: see the import below
import { MatNativeDateModule } from "#angular/material/";
#NgModule({
imports: [
MatNativeDateModule
],
})
export class AppModule {
Related
I am new to angular and construction my first angular front end to use an OAS generated angular-typescript package. The OAS is also generated from code and then used to generate the angular-typescript package (angular version 8.2.14). Then I just created a new angular project with "ng new ..." and installed the before generated package with "npm install local/dir --save". Then I imported the module in the app.module.ts with "import { ApiModule } from "package name". So far it works (but also nothing happens).
When I import he ApiModule in the #NgModule angular just stops working, no error, no debug. I tried using demo apis from HowTos, these to import without problems. So I guess that there is a problem with the generated package, everything I tried and change in the last weeks didn't help.
Maybe you have some ideas where I can start debugging. Thank you.
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment } from "../environments/environment";
import { HttpClientModule } from "#angular/common/http";
import { ApiModule, BASE_PATH} from "#angular-schule/book-monkey-api"; // Works
// import { ApiModule, BASE_PATH} from "#jakoberpf/congstats-typescript-angular-api"; // Does not work
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ApiModule,
],
providers: [{ provide: BASE_PATH, useValue: environment.CONGSTATS_BASE_PATH }],
bootstrap: [AppComponent]
})
export class AppModule { }
Found the issue. When importing an using an open api or swagger generated package you have to not only import the HttpClientModule ( see angular issue 20575 ) but also provide it in the providers of the app module.
ISSUE FIXED
I am using Angular 5 with Angular material and WebStorm version 2017.3.1
When I try to use the <mat-toolbar> element with the following code
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import {MatToolbarModule} from '#angular/material';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
MatToolbarModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<mat-toolbar>
<span>Title</span>
</mat-toolbar>
WebStorm gives me an error:
'mat-toolbar' is not a known element:
1. If 'mat-toolbar' is an Angular component, then verify that it is part of this module.
However, this renders correctly in the browser:
Because it is included in the module with this line import {MatToolbarModule} from '#angular/material'; and
imports: [
BrowserModule,
MatToolbarModule
],
Is there something I'm missing here? Why does WebStorm (and also when running tests via ng test) give me this error? How can I prevent this error/warning?
This error is generated via TypeScript.
You can see the error in the console if you click on the TypeScript tab at the bottom.
It's possible to make this error go away if you force the TypeScript service to restart by clicking on the arrow in a circle.
This requires a compile first.
So far, I cannot find a way to map this to a shortcut.
Thanks to #lena and #Z.Bagley for helping me figure this out.
The error comes from Angular language service.
Looks related to https://github.com/angular/angular/issues/14961; see if updating Typescript to 2.5.2+ helps
I know this isn't the problem the OP had, but wanted to share this in case someone comes across this post and is still experiencing this problem in WebStorm and are not getting TypeScript compile errors, here's what worked for me: In WebStorm select menu item File > Invalidate Caches / Restart. This problem happened to me in WebStorm 2019.3 .
I am pretty new angular 2, I have a requirement to create a module say that account module which should be shared across two different projects say that project A and B.
I am not sure how to proceed with my design. Do I have to create an angular module in node JS? If anyone could help me on how to proceed to give some design idea I will take it further.
I tried googling it but no luck, to be frank, I don't know what to search for.
Note: I am using Angular 2
Create Module and export from NgModule
#NgModule({
declarations: [TestComponent],
exports: [TestComponent],
imports: [OtherModule],
providers: []
})
export class TestModule{}
and Import same Module from different project
import {TestModule} from '<path of Test Module>'
#NgModule({
declarations: [NewComponent],
exports: [NewComponent],
imports: [TestModule], // import that module in NgModule
providers: []
})
export class NewModule{}
Hope this is helpful for you
I think learning imports and NgModule in Angular 2 are good start
Module Holds all the services,component and other module which are required by the component in your case it is account module
Once you are done with create account component next step will be configuration of module.
let take AccountManagementComponent.ts
#Component({
selector: 'app-account-management',
templateUrl: './account-management.component.html',
styleUrls: ['./account-management.component.css']
})
export class AccountManagementComponent implements OnInit {
constructor(private accountservice: AccountService, ) {}
ngOnInit() {
}
}
Create New ts File Called Account Module in the same directory of AccountComponent.ts. Which includes all the services,component and other modules which are required to that component CommonModule is needed directive as used in your component such as NgIf, NgFor as follow:
import {NgModule} from "#angular/core";
import {CommonModule} from "#angular/common";
import {FormsModule} from "#angular/forms";
import {AccountService} from "../shared/services/Account-data.service";
import {AccountManagementComponent} from "./account-management.component";
#NgModule({
declarations: [AccountManagementComponent],
imports: [CommonModule, FormsModule],
providers: [AccountService],
})
export class AccountModule {}
Finally instead of importing Component and services required by the component
Need to import the module in the root module that is app.module.ts because that module contains all the things which are required to an component
In app.module.ts
#NgModule({
declarations: [],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AccountModule,
],
I am pretty new in Angular 2. I am studying how to create modules into an Angular app and I have the following doubt related a tutorial that I am following.
My doubt is related to the routing.
So in my example there is defined this AuthModule module:
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { SigninComponent } from './signin/signin.component';
import { SignupComponent } from './signup/signup.component';
import { AuthRoutingModule } from './auth-routing.module';
#NgModule({
// Components and directives used by the module:
declarations: [
SigninComponent,
SignupComponent
],
// Import modules used by this features module:
imports: [
FormsModule,
AuthRoutingModule
]
})
export class AuthModule {}
and I have the related rotues configuration class defined:
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { ShoppingListComponent } from './shopping-list/shopping-list.component';
const appRoutes: Routes = [
{ path: '', redirectTo: '/recipes', pathMatch: 'full' },
{ path: 'shopping-list', component: ShoppingListComponent }
];
#NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
So I think that the export keyword means that the content related to this class can be exported and used somewhere else (in this case I think into the imports array of the AuthModule class).
Is it? Or am I missing something? What it the exact meaning of the export statment?
I am not understanding if it is something related to Angular or more generally to TypeScript (because here I found https://www.typescriptlang.org/docs/handbook/modules.html). So it seems to me that this module concept is not directly bounded to Angular 2 framework but is a TypeScript concept to subdivide our code in a smart way (then Angular 2 can use this kind of feature of the language).
Is it or am I missing something?
Angular imports/exports and TypeScript imports/exports are two different concepts.
TypeScript imports/exports work at language level to make it clear what
a used identifier references exactly. This is entirely unrelated to Angular.
So, if you use FormsModule there can't be any ambiguity, what FormsModule is meant. If there is more than one FormsModule in your code or any of your dependencies, then you need to make it clear with imports which one is meant. You can't import 2 FormsModule from different locations without disambiguation (for example using as foo in the import and then reference it using foo.FormsModule).
This way you can use code from arbitrary 3rd-party libraries and avoid name collisions.
Angular imports/exports are used to make the content of one module available to be used in another module.
Your:
imports: [
FormsModule,
AuthRoutingModule
]
Allows you to use the directives from FormsModule and AuthRoutingModule in AuthModule and registers the services provided by these modules in the AppModule scope or the closed lazy-loaded root scope.
If you reference any of Angulars directives or services in TypeScript code, you also need to add TypeScript imports. Above FormsModule and AuthRoutingModule need to be imported with TypeScript imports, to make the Angular imports: [...] work.
For example like
<form #f="ngForm">
<input type="text">
</form>
works only if FormsModule is listed in imports: [ ... ] of your current module.
There is no TypeScript import required, because there is no TypeScript code.
Yes you are right by using export keyword before your typescript class you can use that class somewhere else .. in your project
I'm ramping up on Angular 2 and have created my project using Angular 2 CLI's
ng new <my project name>
However, I noticed that this project doesn't include an app.module.ts file by default.
When I try creating my own file and setting it up with my default settings
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
#NgModule({
imports: [
BrowserModule
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
I get a build error saying
... #angular/core has no exported member 'NgModule'.
Any ideas on how to get the module file to work with Angular CLI?
Thanks
May be due to reasons please make sure
please update all your #angular dependencies in package.json to at least "2.0.0-rc.5"
check this property in tsconfig.json file
moduleResolution": "node", // <-----
like here https://stackoverflow.com/a/38900745/5043867