We Keep Coding

Range Error Maximum call stack size exceeded Angular

So I want to add machine detail and buton bar to my app, and this is what happens. I've used it in other parts aswell and it worked fine, only in core module are the errors.
The error message
main.ts
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
core module (error appears when I add "IfaButtonModule" or "MachineModule")
#NgModule({
declarations: [
TakePhotoComponent,
ConfirmationDialogComponent,
ShareMachineComponent,
NotificationsComponent,
],
imports: [
CommonModule,
WebcamModule,
MatButtonModule,
TranslateModule,
MatDialogModule,
MatFormFieldModule,
MatInputModule,
ReactiveFormsModule,
MatIconModule,
MatExpansionModule,
MatBadgeModule,
MatCardModule,
MatMenuModule,
IfaButtonModule,
MachineModule
],
exports: [
TakePhotoComponent,
ConfirmationDialogComponent,
ShareMachineComponent,
NotificationsComponent
],
providers: [NgxImageCompressService]
})
export class CoreModule { }
button-module
#NgModule({
declarations: [
IfaButtonBarItemComponent,
IfaButtonBarComponent,
IfaButtonBarGroupComponent
],
imports: [
CommonModule,
CoreModule,
MatButtonModule,
TranslateModule
],
exports: [
IfaButtonBarComponent,
IfaButtonBarGroupComponent,
IfaButtonBarItemComponent
]
})
export class IfaButtonModule { }
machine module
#NgModule({
declarations: [
MachineListComponent,
MachineDetailEditComponent,
MachineDetailComponent,
MachineListItemComponent
],
imports: [
CommonModule,
CoreModule,
MatCardModule,
MatMenuModule,
MatListModule,
MatButtonModule,
FormsModule,
ReactiveFormsModule,
NgxPaginationModule,
MatFormFieldModule,
MatInputModule,
TranslateModule,
MatDialogModule,
MatExpansionModule,
IfaButtonModule,
OperationModeModule,
ProtectionModule,
ManipulationModule
],
exports: [
MatMenuModule,
MachineDetailEditComponent,
MachineListComponent,
MachineDetailComponent
]
})
export class MachineModule {
}
the html that uses the components: (inside the core module area)
<ng-container>
<app-machine-detail [machine]="completeMachine">
</app-machine-detail>
<app-ifa-button-bar-group>
<app-ifa-button-bar-item [label]="'MISC.BACK'" (click)="navigateBack()">
</app-ifa-button-bar-item>
</app-ifa-button-bar-group>
</ng-container>

This is probably happening because you import CoreModule in the MachineModule and the MachineModule in the CoreModule. This should not happen, you should re-work your module dependencies and fix the circular import. IfaButtonModule has the exact same issue.

Angular javascript page compiles but shows blank

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.

Angular; Error: Component NewPharmacyComponent is not part of any NgModule or the module has not been imported into your module

NewPharmacy component is part of the Provider module's declarations array and I have imported Provider module in app.module.ts still I'm getting the error Component NewPharmacyComponent is not part of any NgModule or the module has not been imported into your module.
provider.module.ts
#NgModule({
declarations: [NewpharmacyComponent],
imports: [
CommonModule,
ProviderRoutingModule
]
})
export class ProviderModule { }
app.module.ts
import {ProviderModule} from './views/provider/provider.module'
#NgModule({
imports: [
BrowserModule,
HttpClientModule,
ProviderModule
],
I'm not able to figure out the issue.What's wrong with the code?

You have to export it to be used in other modules:
#NgModule({
declarations: [NewpharmacyComponent],
imports: [
CommonModule,
ProviderRoutingModule
],
exports: [NewpharmacyComponent]
})
export class ProviderModule { }
Now the other components will have access to your NewpharmacyComponent.

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

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