Hi my application was working fine till i added NgxDatetimeRangePickerModule, Once i added it in my shared module , I am getting BrowserModule has already been loaded error. Borwser module is present in only app.module and not in any module. What might be the issue.
Error :
vendor.js:77185 ERROR Error: Uncaught (in promise): Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.
Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.
App.module.ts
import { NgModule, ApplicationModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { HttpClientModule, HTTP_INTERCEPTORS } from '#angular/common/http';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { NgHttpLoaderModule } from 'ng-http-loader';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// 3rd party module
import { NgxDatetimeRangePickerModule } from 'ngx-datetime-range-picker';
// import { Cardscomponent } from './cards/cards.component';
import { NotificationToastComponent } from './_shared/notification-toast/notification-toast.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './_services/auth.guard';
import { AuthInterceptor } from './_services/auth.interceptor';
import { ErrorInterceptor } from './_services/error.interceptor';
import { SharedModule } from './_shared/shared.module';
#NgModule({
declarations: [
AppComponent,
NotificationToastComponent,
LoginComponent,
],
imports: [
SharedModule,
BrowserModule,
BrowserAnimationsModule,
ApplicationModule,
FormsModule,
ReactiveFormsModule,
AppRoutingModule,
HttpClientModule,
NgHttpLoaderModule.forRoot(),
NgbModule,
],
providers: [
AuthGuard,
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
],
entryComponents: [
NotificationToastComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
My Shared Module:
import { NgModule } from '#angular/core';
import { FilterDataPipe } from '../_pipes/filter-data.pipe';
import { AngularMaterialModule } from '../angular-material.module';
import { CommonModule } from '#angular/common';
import { AngularKendoModule } from '../angular-kendo.module';
import { NgxDatetimeRangePickerModule } from 'ngx-datetime-range-picker';
import { MustMatchDirective } from '../_helpers/must-match.directive';
#NgModule({
imports:[
CommonModule,
AngularMaterialModule,
AngularKendoModule,
],
declarations: [
FilterDataPipe,
MustMatchDirective
],
exports: [
CommonModule,
FilterDataPipe,
AngularMaterialModule,
MustMatchDirective,AngularKendoModule,
NgxDatetimeRangePickerModule
]
})
export class SharedModule {}
My child Module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { Cardscomponent } from './cards.component';
import { SharedModule } from '../_shared/shared.module';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { CardsRoutingModule } from './cards-routing.module';
import { CardDetailsComponent } from './card-details/card-details.component';
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
#NgModule({
imports: [
CommonModule,
SharedModule,
FormsModule,
ReactiveFormsModule,
CardsRoutingModule,
NgbModule,
NgMultiSelectDropDownModule.forRoot(),
],
declarations: [Cardscomponent,CardDetailsComponent]
})
export class CardsModule { }
Remove NgxDatetimeRangePickerModule from app.module move it to shared module.
In shared.module import NgxDatetimeRangePickerModule.forRoot() inside import section.
Thanks
Rahul Tokase
Related
What I did so far:
I imported a component into the share module because I want to use it on 2 different Modules. Now when I'm recompiling the app it says that jodit-editor which is used by the shared component is not a known element. (worked completely normal before shared the component)
This is how the shared Component look like:
import { Component, forwardRef, Input, OnInit, ViewChild } from '#angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '#angular/forms';
import { JoditAngularComponent } from 'jodit-angular';
import { NGXLogger } from 'ngx-logger';
import { Widget } from 'src/app/models/widget';
import { IFile } from 'src/interfaces';
import { WysiwygTemplates } from './wysiwyg.templates';
import { FileService } from 'src/app/services/file.service';
import { StorageService } from 'src/app/services/storage.service';
#Component({
selector: 'app-wysiwyg',
templateUrl: './wysiwyg.component.html',
providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: forwardRef(() => WysiwygComponent),
}
],
})
This is how the share module look like:
import { CommonModule, registerLocaleData } from '#angular/common';
import { NgModule } from '#angular/core';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { AppButtonComponent } from 'src/app/utils/app-button/app-button.component';
import { ConfirmDialogComponent } from 'src/app/utils/confirm-dialog/confirm-dialog.component';
import { MatDialogModule } from '#angular/material/dialog';
import { FormErrorComponent } from 'src/app/utils/form-error/form-error.component';
import { HttpClient } from '#angular/common/http';
import { TranslateHttpLoader } from '#ngx-translate/http-loader';
import { TranslateModule, TranslateLoader, TranslateService } from '#ngx-translate/core';
import localeDe from '#angular/common/locales/de';
import { DragDropDirectiveModule } from './directives/filedrag-drop.directive';
import { DragDropModule } from '#angular/cdk/drag-drop';
import { WysiwygComponent } from 'src/app/utils/inputs/wysiwyg/wysiwyg.component';
registerLocaleData(localeDe);
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, '../i18n/', '.json');
}
#NgModule({
imports: [
DragDropDirectiveModule,
CommonModule,
MatDialogModule,
NgbModule,
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
},
isolate: false
}),
],
declarations: [
WysiwygComponent,
AppButtonComponent,
ConfirmDialogComponent,
FormErrorComponent
],
exports: [
WysiwygComponent,
DragDropDirectiveModule,
AppButtonComponent,
ConfirmDialogComponent,
FormErrorComponent,
MatDialogModule,
CommonModule,
FormsModule,
ReactiveFormsModule,
NgbModule,
TranslateModule,
DragDropModule
],
providers: [TranslateService]
})
export class SharedModule {}
When recompiling I getting this error:
The JoditAngularModule should be added to the imports of the shared module for your shared component to 'know' the element 'jodit-editor'.
This is the import statement.
import { JoditAngularModule } from 'jodit-angular';
Add it to the imports of shared module
imports:
[
// Other imports ,
JoditAngularModule
]
Hope this helps. Let me know if it works!
I am trying to start an Angular / Kendo UI project but the browser gives me the following error in the console:
Error: Unexpected value 'DecoratorFactory' imported by the module 'AppModule'. Please add a #NgModule annotation.
(there's no error in the CLI while compiling, only at runtime)
This is my app.module.ts file:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule, Injectable } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { TabModule } from 'angular-tabs-component';
import { HttpClient, HttpClientModule, HttpClientJsonpModule } from '#angular/common/http';
import { NotificationModule } from '#progress/kendo-angular-notification';
import { FormsModule } from '#angular/forms';
import { GridModule } from '#progress/kendo-angular-grid';
import { LayoutModule } from '#progress/kendo-angular-layout';
import { ToolBarModule } from '#progress/kendo-angular-toolbar';
import { DialogModule } from '#progress/kendo-angular-dialog';
import { EditService } from './edit.service';
import { ReactiveFormsModule } from '#angular/forms';
import { GridEditFormComponent } from './edit-form.component';
#NgModule({
imports: [ BrowserModule, BrowserAnimationsModule, AppRoutingModule, TabModule, HttpClientModule, HttpClientJsonpModule, FormsModule, GridModule, NotificationModule,
Injectable, LayoutModule, ToolBarModule, DialogModule, EditService, ReactiveFormsModule, GridEditFormComponent ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
I needed to import NgModule, else the #NgModule interface declaration gives me this error:
Cannot find name 'NgModule'. Did you mean 'module'?
Note: this is not a duplicate of this question (I followed the instructions but that didn't fix the error).
I want to use Owl Carousel slider in my Angular page. I have installed Owl Carousel and imported all needed code. However, I get this error when I run the file:
Unexpected value 'undefined' imported by the module 'AppModule' angular js 6
Can anyone kindly find the error for me?
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { HeaderComponent } from './header/header.component';
import { NavbarComponent } from './navbar/navbar.component';
import { FooterComponent } from './footer/footer.component';
import { AppRoutingModule } from './app-routing.module';
import {OwlCarousel} from 'angular-owl-carousel2';
import { SlickModule } from 'ngx-slick';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent,
HeaderComponent,
NavbarComponent,
FooterComponent
],
imports: [
BrowserModule,
AppRoutingModule,
OwlCarousel,
SlickModule.forRoot()
//RouterModule.forRoot(appRoutes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Datatable.component. html
<tr *ngFor="let articles of art">
I have added CommonModule/BrowserModule in appmodule/Datatablemodule nothing works....`same kind of error in FormBuilder also when using "form [formGroup]="loginForm" (ngSubmit)="onSubmit()">" even imported the #angular/forms
//app.module.ts
import { NgModule } from '#angular/core';
import { HttpClientModule } from '#angular/common/http';
import { AppComponent } from './/app.component';
import { AppRoutingModule } from './/app-routing.module';
import { BrowserModule } from '#angular/platform-browser';
import { ReactiveFormsModule } from '#angular/forms';
import {AddArticleModule} from './pages/add-articles/add-article.module';
import {DatatablesModule} from './pages/datatables/datatables.module';
#NgModule({
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule,
LayoutModule,
ReactiveFormsModule,
AddArticleModule,
DatatablesModule
],
declarations: [
AppComponent
],
providers: [ScriptLoaderService],
bootstrap: [AppComponent]
})
export class AppModule { }
//Datatables
.module.ts
import { NgModule } from '#angular/core';
import {CommonModule} from '#angular/common';
#NgModule({
declarations: [
],
imports: [
CommonModule
],
exports: []
})
export class DatatablesModule {}
`
Hello im using Angular 4. I have a component with some html that i want it to be showned in various components. But when i import my module into various others moduels it says that it only can be defined in one module... how can i make it work?
i want param-var to be showned in globales and resumen.
Console Error
ERROR Error: Uncaught (in promise): Error: Type ParamVarComponent is part of the declarations of 2 modules: GlobalesModule and ResumenModule! Please consider moving ParamVarComponent to a higher module that imports GlobalesModule and ResumenModule. You can also create a new NgModule that exports and includes ParamVarComponent then import that NgModule in GlobalesModule and ResumenModule.
PARAM VAR MODULE
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { ParamVarRoutingModule } from './param-var-routing.module';
import { ParamVarComponent } from './param-var.component';
import { FormsModule, ReactiveFormsModule} from '#angular/forms';
#NgModule({
imports: [
CommonModule,
ParamVarRoutingModule,
FormsModule,
ReactiveFormsModule
],
declarations: [ParamVarComponent,
]
})
export class ParamVarModule { }
GLOBALES MODULE
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { GlobalesRoutingModule } from './globales-routing.module';
import { GlobalesComponent } from './globales.component';
import {ParamVarComponent} from '../param-var/param-var.component';
import { FormsModule, ReactiveFormsModule} from '#angular/forms';
#NgModule({
imports: [
CommonModule,
GlobalesRoutingModule,
FormsModule,
ReactiveFormsModule,
],
declarations: [GlobalesComponent,ParamVarComponent,
]
})
export class GlobalesModule { }
RESUMEN MODULE
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { ResumenRoutingModule } from './resumen-routing.module';
import { ResumenComponent } from './resumen.component';
import { FormsModule, ReactiveFormsModule} from '#angular/forms';
import {ParamVarComponent} from '../param-var/param-var.component';
#NgModule({
imports: [
CommonModule,
ResumenRoutingModule,
FormsModule,
ReactiveFormsModule,
],
declarations: [ResumenComponent,ParamVarComponent,
]
})
export class ResumenModule { }
Create new SharedModule (or any other name, but that one matches Angular's Style Guide). Declare and export your ParamVarComponent there. Now you can import SharedModule in any other module in your application as many times as you want. Since ParamVarComponent is exported, you can use it inside of other modules as soon as those modules import SharedModule.
#NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule
],
declarations: [ParamVarComponent],
exports: [ParamVarComponent]
})
export class SharedModule { }
#NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
SharedModule
]
})
export class OtherModule#{ }