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#{ }
Related
i have 2 libs.
1 - ui-templates
2 - ui-components
To import ui-templates from app, im doing that:
import {UiTemplatesModule} from '#growerdiaries-web/ui-templates';
import { AppComponent } from './app.component';
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule, UiTemplatesModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
And everything works fine.
But now, i want to use some components of ui-components into ui-templates.
To do that, on ui-templates module, i created this code:
//if i use #growerdiaries-web/ui-components dosent works. Dosent find the reference.
import {UiComponentsModule} from '../../../ui-components/src/lib/ui-components.module';
import { LoginTemplateComponent } from './login-template/login-template.component';
#NgModule({
imports: [CommonModule, UiComponentsModule],
declarations: [
LoginTemplateComponent
],
exports: [
LoginTemplateComponent
],
})
export class UiTemplatesModule {}
Why module cant find the reference from ui-components library direcly? Im doing something wrong?
ui-components module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { ButtonComponent } from './button/button.component';
import { InputComponent } from './input/input.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
#NgModule({
imports: [CommonModule],
declarations: [
ButtonComponent,
InputComponent,
HeaderComponent,
FooterComponent
],
exports: [
ButtonComponent,
InputComponent,
HeaderComponent,
FooterComponent
],
})
export class UiComponentsModule {}
It was necessary to clear the visual studio code cache. Resolved.
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
I have an ionic app and created a custom component for ion-navbar but, how could I use this component in all of my pages? If I declare him on all the pages i get this error
Here's my Github if u want https://github.com/tiagosilveiraa/PManager
You can create a shared module and include that new shared module as an import for the page modules that need the header:
shared.module.ts
import { NgModule } from '#angular/core';
import {CommonModule} from '#angular/common';
import {HeaderComponent} from './header/header.component';
import {IonicModule} from '#ionic/angular';
#NgModule({
imports: [
CommonModule,
IonicModule
],
declarations: [HeaderComponent],
exports: [HeaderComponent]
})
export class SharedModule {}
Then for the home.module.ts
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
SharedModule,
RouterModule.forChild(routes),
],
declarations: [HomePage]
})
export class HomePageModule {}
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 {}
`
I have my main module like this, where I import the basic Libraries :
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { MaterialModule } from '#angular/material';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { MapModule } from './map/map.module';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
MapModule,
MaterialModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
My question is when I create a new Module within the app i.e Map Module do I need to reimport all those libraries to that Module. I was under the impression that if I import the libraries on the module it would work under child modules.
But in my Map Module I am getting errors like.
Can't bind to 'ngClass' since it isn't a known property of 'div'.
My Current MapModule looks like
import { NgModule } from '#angular/core';
import { MapComponent } from './map.component';
import { MapMenuComponent } from './map-menu/map-menu.component';
import { MapControlsComponent } from './map-controls/map-controls.component';
import { MapService } from './map.service';
#NgModule({
imports: [],
exports: [],
declarations: [MapMenuComponent, MapControlsComponent, MapComponent],
providers: [MapService],
})
export class MapModule { }
Do I need to reimport the MaterialModule, Forms etc into module again for the components in this module to work ?
You only need to reimport modules with declarations, i.e. modules that define new components, directives and pipes. Modules that register providers don't need to be imported.
In this list:
imports: [
BrowserModule,
FormsModule,
HttpModule,
MapModule,
MaterialModule.forRoot()
],
FormsModule modules need to be imported, by HttpModule need not. BrowserModule re-exports CommonModule, so in the other modules you would probably want to import CommonModule, not BrowserModule to get built-in directives like NgClass. By importing CommonModule you will not have this error:
Can't bind to 'ngClass' since it isn't a known property of 'div'.
You can use SharedModule. All modules those are used in multiple modules
sharedModule example
import { NgModule } from '#angular/core';
import { anyService} from './any.service';
#NgModule({
providers: [anyService]
})
export class SharedModule {}
Now you can import this shared module in any modules in which want to use this module