I using Angular Material component and try to use a prebuilt theme
I added this row to my component css #import '#angular/material/prebuilt-themes/deeppurple-amber.css';
But still get an error
Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming
Here is app.module.ts code
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {CustomMaterialModule} from "./CustomMaterialModule";
import { PaymentsComponent } from './payments/payments.component';
import { MatPaginatorModule, MatCheckboxModule} from '#angular/material';
import {FormsModule, ReactiveFormsModule} from '#angular/forms';
#NgModule({
declarations: [
AppComponent,
PaymentsComponent
],
imports: [
BrowserModule,
CustomMaterialModule,
AppRoutingModule,
MatPaginatorModule,
MatCheckboxModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Where can be my trouble?
Seems like I found answer
I need to add
providers: [
{
provide: MATERIAL_SANITY_CHECKS,
useValue: false
}
],
Into app.module.ts and now I don't have this error
Related
I have AngularJS project which summarize data and visualizes it by number of female and male in months. Now I want to allow user to select a year and view visualization for all months of that particular year.
Currently my graph look like this:
Here is my code so far:
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '#angular/common/http';
import { ChartsModule } from 'ng2-charts';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ChartsModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Here is my full project https://angular-ivy-gewusg.stackblitz.io
I have an Angular app, but I am not sure how I can add MatButtonModule, MatMenuModule, MatIconModule into my project.
Whenever I try to, I get the below error:
"Module has no exported member"
I believe this may have something to do with the Angular material installation but I am not too sure.
MatButtonModule, MatMenuModule, MatIconModule are all underlined as red in my IDE but I currently have MatFormFieldModule and MatInputModule and those are working fine.
Even if I add them to the Imports section, that does not help.
Here is my code for app.module.ts, does anything stick out:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '#angular/common/http';
import { ItemService } from './items.service';
import { NewItemFormComponent } from './new-item-form/new-item-form.component';
import { MatFormFieldModule } from '#angular/material/form-field';
import { MatInputModule, MatButtonModule, MatMenuModule, MatIconModule } from '#angular/material/input';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { FormsModule } from '#angular/forms';
import { NavigationMenuComponent } from './navigation-menu/navigation-menu.component';
#NgModule({
declarations: [
AppComponent,
NewItemFormComponent,
NavigationMenuComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
MatFormFieldModule,
MatInputModule,
BrowserAnimationsModule,
FormsModule
],
providers: [ItemService],
bootstrap: [AppComponent]
})
export class AppModule { }
You are trying to import MatButtonModule, MatMenuModule and MatIconModule from input (#angular/material/input), which is not the correct way, you should import them from their respective modules like below
import { MatButtonModule } from '#angular/material/button';
import { MatMenuModule } from '#angular/material/menu';
import { MatIconModule } from '#angular/material/icon';
When I compile my Angular app it works, but the HTML page is blank and it my application will not display. I've had issues like this before and usually it has been one of the Imports, but I'm not sure now. When I use Google Chrome to inspect, the error that I see is record.factory is not a function. Is anyone familiar with this?
Here is my module.ts code:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '#angular/common/http';
import { ItemService } from './items.service';
import { NewItemFormComponent } from './new-item-form/new-item-form.component';
import { MatFormFieldModule } from '#angular/material/form-field';
import { MatInputModule } from '#angular/material/input';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { FormsModule } from '#angular/forms';
#NgModule({
declarations: [
AppComponent,
NewItemFormComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
MatFormFieldModule,
MatInputModule,
BrowserAnimationsModule,
FormsModule
],
providers: [ItemService, BrowserModule,
AppRoutingModule,
HttpClientModule,
MatFormFieldModule,
MatInputModule,
BrowserAnimationsModule,
FormsModule],
bootstrap: [AppComponent]
})
export class AppModule { }
You placed in wrong place couple of your modules. You should put them into imports section, not providers. I am talking
BrowserModule,
AppRoutingModule,
HttpClientModule,
MatFormFieldModule,
MatInputModule,
BrowserAnimationsModule,
FormsModule
Also there might be problem if you have #Injectable and #NgModule decorators added to same class.
I am Beginner and following tutorials, in which i am working in angular with firebase. I use HTML table which was working fine but after using angular-4-data-table i got following error
Unexpected value 'undefined' imported by the module 'AppModule' in console and with this error
This is my app.module
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import {RouterModule} from '#angular/router';
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
import { FormsModule} from '#angular/forms';
import { CustomFormsModule } from 'ng2-validation';
import { DataTableModule } from 'angular-4-data-table';
#NgModule({
declarations: [
AppComponent,
BsNavbarComponent,
HomeComponent,
ProductsComponent,
ShoppingCartComponent,
CheckCheckoutComponent,
OrderSucessComponent,
MyOrderComponent,
AdminProductsComponent,
AdminOrdersComponent,
LoginComponent,
ProductFormComponent
],
imports: [
BrowserModule,
FormsModule,
DataTableModule,
CustomFormsModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AngularFireAuthModule,
NgbModule.forRoot()
],
providers: [
AuthService,
AuthGaurd,
AdminAuthGuard,
UserService,
CategoryService,
ProductsComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
and this is Import in component
import { Component, OnInit, OnDestroy } from '#angular/core';
import { ProductService } from 'src/app/product.service';
import { Subscription } from 'rxjs';
import { Product } from 'src/app/models/product';
import { DataTableResource } from 'angular-4-data-table';
I also watched previously asked questions on this forum but did not work for me.
Your AppModule the decorator NgModule.
A typical ngModule looks like this:
#NgModule({
declarations: [...],
imports: [...]
})
export class AppModule{}
Pay attention that the imports that look like
import { BrowserModule } from '#angular/platform-browser'; are meant to "include" the modules from different files but without a declaration like the one above you cannot use them in the current NgModule.
In the end, your AppModule should look like this:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import {RouterModule} from '#angular/router';
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
import { FormsModule} from '#angular/forms';
import { CustomFormsModule } from 'ng2-validation';
import { DataTableModule } from 'angular-4-data-table';
#NgModule({
imports: [
BrowserModule,
FormsModule,
DataTableModule,
CustomFormsModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AngularFireAuthModule
....
],
declarations: [....]
})
export class AppModule{}
I was facing same problem with Angular-4-Data-table
Actually i was using a higher version of angular which was not working with angular-4-data-table so i try this and upgrade
npm install angular5-data-table --save
In App Module i use
import {DataTableModule} from 'angular5-data-table';
And same in component
import { DataTableResource } from 'angular5-data-table';
it worked for me hopefully it will work for you.
imports: [
BrowserModule,
FormsModule,
DataTableModule,
CustomFormsModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AngularFireAuthModule,
NgbModule.forRoot(),
]
problem is in last comma remove comma after NgbModule.forRoot()
I have worked with form builder in angular 2/4, But now I am using it in angular 6. I have seen this question (Can't bind to 'formGroup' since it isn't a known property of 'form') but it was for angular 2.
I doing exact same against angular 4 but I am getting this error. Please help:
my code are:
app.module.ts: ( I have exported FormsModule & ReactiveFormsModule) :
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { LocalStorage } from './services/localStorage.service';
import { HttpModule, RequestOptions, XHRBackend } from '#angular/http';
import { Router } from '#angular/router';
import { RouterModule } from '#angular/router';
import { AppComponent } from './app.component';
import { routing } from './app.route';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { LoginComponent } from './components/login/component';
import { ForgotComponent } from './components/forgotPassword/component';
#NgModule({
exports: [
FormsModule,
ReactiveFormsModule
],
declarations: [
AppComponent,LoginComponent,ForgotComponent
],
imports: [
BrowserModule,
routing,
],
providers: [
LocalStorage,
],
bootstrap: [AppComponent],
})
export class AppModule { }
login.component.ts:
import { Component, ViewContainerRef, OnInit } from '#angular/core';
import { Router } from '#angular/router';
import { FormBuilder, FormGroup, Validators, NgForm } from '#angular/forms';
import { LocalStorage } from '../../services/localStorage.service';
import { environment } from '../../../environments/environment';
import { HttpService } from '../../services/http.service';
import { emailRegexp, passwordRegexp } from '../../constants';
#Component({
selector: 'login-app',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
/**
* LoginComponent class
*/
export class LoginComponent {
private loginForm: any;
loginValue:any;
constructor(
private formBuilder: FormBuilder,
private _router: Router,
private httpService: HttpService,
private localStorage: LocalStorage,
) {
this.loginValue = new LocalStorage(environment.localStorageKeys.ADMIN).value;
this.loginForm = this.formBuilder.group({
email: ['', Validators.compose([Validators.required, Validators.pattern(emailRegexp)])],
password: ['', Validators.compose([Validators.required, Validators.minLength(8)])]
});
}
}
login.component.html: ( Something like this)
<form [formGroup]="loginForm" (ngSubmit)="loginForm.valid && login()" novalidate>
<input type="email" autocomplete="off" (focus)="focusFunction()" placeholder="User Name" formControlName="email" class="form-control">
<div class="col-12">
<input autocomplete="off" type="password" (focus)="focusFunction()" placeholder="Password" formControlName="password" class="form-control">
</div>
<button [disabled]="!loginForm.valid" type="submit" class="btn btn-inverse btn-rounded btn-block">
<div *ngIf="!loading" class="sign-in">Sign in</div>
</button>
</form>
Add below code in your app.module.ts:
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
and in imports array:
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule
]
The FormGroup is a selector for the FormGroupDirective Directive which mainly used to Binds an existing FormGroup to a DOM element and FormGroupDirective is available in the ReactiveFormsModule module.
So fiddling around with the same frustrating issue -- a clean angular-cli install and a custom subcomponent/module (component.html... ) and the same error ("Can't bind to 'formGroup' since it isn't a known property of 'form' ").
Angular CLI: 7.2.3, Node: 10.9.0, OS: win32 x64, Angular: 7.2.2
I finally got it to work based on the above but with a twist
I put the FormsModule & ReactiveFormsModule imports in app-routing.module.ts (not app.module.ts) + the subcomponent's ts (in my case: forms-demo.component.ts) :
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
....
#NgModule({
imports: [
RouterModule.forRoot(routes),
FormsModule, ReactiveFormsModule
....
Afterward ng build/serve worked without any errors.
I'm not an Angular expert but my guess is that the v7 approach whereby app.module.ts delegates to app-routing, that latter file is where the app & component imports & dependencies take place.... YMMV but hopefully it helps.
Similar to #gloomy.penguin's answer in comment, but a different scenario with the same error.
In my case, I was using a second module and its own routing file.
│ app-routing.module.ts
│ app.module.ts
│
└───second-module
│ second-routing-module.module.ts
│ second.module.ts
│
└───component-1
I had to import the following in second.module.ts rather than app-routing.module.ts
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { BrowserModule } from '#angular/platform-browser';
....
#NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
BrowserModule
]})
anyone using a second module, please follow this.
import these things in your appmodule.ts
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule
],
Update app.module.ts as follows in belows diff
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from "#angular/platform-browser/animations";
import { MatButtonModule, MatCheckboxModule , MatTableModule, MatDialogModule, MatTabsModule, MatNativeDateModule, MatInputModule, MatSelectModule, MatFormFieldModule} from "#angular/material";
import { MyDialogComponent } from './my-dialog/my-dialog.component';
import {MatDatepickerModule} from '#angular/material/datepicker';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
import { CommonModule } from '#angular/common';
import { HighlightDirective } from './highlight.directive';
#NgModule({
declarations: [
AppComponent,
MyDialogComponent,
HighlightDirective,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatButtonModule,
MatCheckboxModule,
MatTableModule,
MatDialogModule,
MatTabsModule,
MatNativeDateModule,
MatInputModule,
MatSelectModule,
MatDatepickerModule,
FormsModule,
ReactiveFormsModule,
NgxMaterialTimepickerModule,
CommonModule,
MatFormFieldModule,
AppRoutingModule
],
Can't bind to 'formGroup' since it isn't a known property of 'form'? why means ? Answer: ' ReactiveFormsModule ' could not load in your component.you just add component name into rootmodule (app.module.ts)
My solution:
**WITHOUT ROUTING**
**app.modules.ts**
STEP1 : import { FormsModule,ReactiveFormsModule } from '#angular/forms';
STEP2 : check your component (AppComponent)loaded or not
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
app.component.html
use and check <form [formGroup]="registerForm"></form>
**WITH ROUTING**
Eg;I have 2 files - form.component.html,form.component.ts
STEP1:Import and add component(FormComponent) loaded or not in app.component.ts(rootcomponent) below here.
import { FormComponent } from "./form/form.component";
#NgModule({
declarations: [
AppComponent,
FormComponent
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
});