Angular javascript page compiles but shows blank - javascript

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.

Related

NullInjectorError: No provider for GoogleAnalyticsService - fixed

after installing Ngx Google Analytics module from NPM, I have implemented it in my app module, for auto tracking I have imported two modules, NgxGoogleAnalyticsModule and NgxGoogleAnalyticsRouterModule, and I got this error:
import { BrowserModule } from "#angular/platform-browser";
import { NgModule } from "#angular/core";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { SharedModule } from "./shared/shared.module";
import { HttpClientModule } from "#angular/common/http";
import {
NgxGoogleAnalyticsModule,
NgxGoogleAnalyticsRouterModule,
} from "ngx-google-analytics";
const pages = [];
#NgModule({
declarations: [AppComponent, pages],
imports: [
AppRoutingModule,
BrowserModule,
HttpClientModule,
SharedModule,
ReactiveFormsModule,
BrowserAnimationsModule,
NgxGoogleAnalyticsModule.forRoot(environment.ga),
NgxGoogleAnalyticsRouterModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
Error after ng serve in the console:
My Solution
I was trying to solve it and I have fixed it this way:
in providers, I have added this service >>> GoogleAnalyticsService
#NgModule({
declarations: [AppComponent, pages],
imports: [
AppRoutingModule,
BrowserModule,
HttpClientModule,
SharedModule,
ReactiveFormsModule,
BrowserAnimationsModule,
NgxGoogleAnalyticsModule.forRoot(environment.ga),
NgxGoogleAnalyticsRouterModule
],
providers: [
GoogleAnalyticsService
],
bootstrap: [AppComponent],
})
export class AppModule {}

Inputting/importing MatButtonModule, MatMenuModule, MatIconModule into my project

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';

Cannot connect theme for Angular Material

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

How to use angular/material version 7.0.1 component in my project?

I start, learning the Angular with Google Material Design, so far so good, I create my front-end app with the official documentation from https://angular.io/tutorial and https://material.angular.io/guides websites.
I read a similar question but that won't work for me, my app uses the Angular 7.0.0 with Angular Material 7.0.0.
So, I want to use most of the Angular Material Components in my demo app, what is the best way to have, all of them.
I read many articles and tutorials like Getting Started With Angular Material 2 or this one, but in all of them, they just using the basic components or the tutorial is about old version of Angular Material and the current official documentation doesn't provide the list of available component to Import for current version and how to use those components by the way?
My app.module.ts with basic component:(Updated code)
// angular component and
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from "#angular/forms";
// my components
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { NavigationComponent } from "./header/navigation/navigation.component";
import { ContainerComponent } from './container/container.component';
import { NavComponent } from './nav/nav.component';
// add animaitons for material
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
// add CDK layout for material
import { LayoutModule } from "#angular/cdk/layout";
// add material to module
import { MaterialModule } from "./class/material.module"
#NgModule({
imports: [
BrowserModule,
FormsModule, ReactiveFormsModule,
BrowserAnimationsModule,
LayoutModule,
MaterialModule
],
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
NavigationComponent,
ContainerComponent,
NavComponent
],
bootstrap: [AppComponent]
})
export class AppModule {}
I find this code in similar question, but when is add it in a separate file and then importing to the app.module.ts, my app stop working and just I will see the loading message in the browser. (Updated code)
import { NgModule } from "#angular/core";
import {
MatButtonModule,
MatToolbarModule,
MatSidenavModule,
MatCheckboxModule,
MatIconModule,
MatListModule
} from "#angular/material";
#NgModule({
imports: [
MatButtonModule,
MatToolbarModule,
MatSidenavModule,
MatCheckboxModule,
MatIconModule,
MatListModule
],
exports: [
MatButtonModule,
MatToolbarModule,
MatSidenavModule,
MatCheckboxModule,
MatIconModule,
MatListModule
]
})
export class MyMaterialModule {}
(Updated)
For now, I just fix the material.module.ts in my class folder, but still, I can't add other components. like the following components:
import {
MatNativeDateModule,
MatSnackBarModule,
MatDialogModule,
MatTableModule,
MatPaginatorModule,
MatSortModule,
MatTabsModule,
MatCheckboxModule,
MatCard,
MatCardModule,
MatFormField,
MatFormFieldModule,
MatProgressSpinnerModule,
MatInputModule
} from "#angular/material";
import { MatDatepickerModule } from "#angular/material/datepicker";
import { MatRadioModule } from "#angular/material/radio";
import { MatSelectModule } from "#angular/material/select";
import { MatSliderModule } from "#angular/material/slider";
import { MatDividerModule } from "#angular/material/divider";
You need to use comman module while using seprate file:
1] material.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { CdkTableModule } from '#angular/cdk/table';
import { CdkTreeModule } from '#angular/cdk/tree';
import {
MatAutocompleteModule,
MatBadgeModule,
MatBottomSheetModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatStepperModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatTreeModule
} from '#angular/material';
#NgModule({
exports: [
CdkTableModule,
CdkTreeModule,
MatAutocompleteModule,
MatBadgeModule,
MatBottomSheetModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatTreeModule
],
imports: [CommonModule],
declarations: []
})
export class MaterialModule {}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { NgForm,ReactiveFormsModule } from '#angular/forms';
import {
HttpClient,
HTTP_INTERCEPTORS,
HttpClientModule
} from '#angular/common/http';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MaterialModule } from './material/material.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { NavigationComponent } from "./header/navigation/navigation.component";
import { ContainerComponent } from './container/container.component';
import { NavComponent } from './nav/nav.component';
import { LayoutModule } from "#angular/cdk/layout";
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
NavigationComponent,
ContainerComponent,
NavComponent,
NgForm
],
imports: [
CommonModule,
MaterialModule,
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
ReactiveFormsModule,
HttpClientModule,
LayoutModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }

Angular 6: Can't bind to 'formGroup' since it isn't a known property of 'form'?

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]
});

Categories