I'm trying to use prime-ng's p-dialog with a p-footer but I keep getting error:
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: Footer,Footer ("g header="Terminate" icon="pi pi-exclamation-triangle" [(visible)]="termBoolean">
[ERROR ->]<p-footer></p-footer>
</p-dialog>
</div>
html:
<p-dialog header="Terminate" icon="pi pi-exclamation-triangle" [(visible)]="termBoolean">
<p-footer></p-footer>
</p-dialog>
I believe it has to be something with my imports/exports. I have an application thisApp.module.ts where I have some imports. I then import that module to my app.module.ts.
My application's thisApp.module.ts:
import {
ConfirmDialogModule, DialogModule
} from "primeng/primeng";
export const myImports = [
ConfirmDialogModule
DialogModule
];
#NgModule({
declarations: [ComponentOne],
imports: [
myImports
],
providers: []
})
export class MyModule { }
my app.module.ts:
import { ConfirmDialogModule } from 'primeng/confirmdialog';
import { DialogModule } from 'primeng/dialog';
#NgModule({
imports: [
MyModule,
ConfirmDialogModule,
DialogModule
],
declarations: [
AppComponent
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Related
I am creating my app project with ionic 4.
In the past, i.e. ionic 3, I can import TranslateModule.forChild() for every page module.ts. But with ionic 4, if two pages get loading TranslateModule.forChild(), it will cause Maximum call stack size exceeded. If I delete one of them, it will works fine without stack size but just that page cannot translate any more.
Actually, my ionic version is 5.4.6.
Here are my codes:
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouteReuseStrategy } from '#angular/router';
import { IonicModule, IonicRouteStrategy } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { TranslateModule, TranslateLoader } from '#ngx-translate/core';
import { TranslateHttpLoader } from '#ngx-translate/http-loader';
import { HttpClientModule, HttpClient } from '#angular/common/http';
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
}),
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent],
exports: [ TranslateModule ]
})
export class AppModule {}
**home.module.ts**
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { IonicModule } from '#ionic/angular';
import { FormsModule } from '#angular/forms';
import { RouterModule } from '#angular/router';
import { HomePage } from './home.page';
import { TranslateModule } from '#ngx-translate/core';
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild([
{
path: '',
component: HomePage
}
]),
TranslateModule.forChild()
],
declarations: [HomePage]
})
export class HomePageModule {}
**auth.module.ts**
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { IonicModule } from '#ionic/angular';
import { AuthPage } from './auth.page';
import {TranslateModule} from '#ngx-translate/core';
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
TranslateModule.forChild()
],
declarations: [AuthPage]
})
export class AuthPageModule {}
I just pass the same issue and solved it, you should treat all your pages as LazyLoad just as you're actually doing in the home.module:
RouterModule.forChild([
{
path: '',
component: HomePage
}
]),
So in your auth.module the imports declaration must contain the RouterModule too:
RouterModule.forChild([
{
path: '',
component: AuthPage
}
])
...
That should do the trick and avoid the stack size exceeded. If you're using something as a SharedModule, I suggest you to add the TranslateModule in it to make it easier in your app structure:
import { TranslateModule } from '#ngx-translate/core';
#NgModule({
declarations: [],
imports: [
...
TranslateModule,
],
exports: [
...
TranslateModule,
]
})
export class SharedModule { }
Then in any of your next pages modules, just import the SharedModule and it's done:
imports: [
...
SharedModule,
]
Hope it helps!
Here is part of my code along with error showing.While build is successfully created.As for your information I am developing a MEAN Stack application which evolve use of Angular 5 as it's ui component.
Here are code and error
import { AppComponent } from './app.component';
import { BookComponent } from './book/book.component';
import { FormsModule } from '#angular/forms';
import { HttpClientModule } from '#angular/common/http';
import { RouterModule, Routes } from '#angular/router';
const appRoutes : Routes = [
{
path: 'books',
component: BookComponent,
data: { title: 'Book List' }
},
{ path: '',
redirectTo: '/books',
pathMatch: 'full'
}
];
#NgModule({
declarations: [
AppComponent,
BookComponent
],
imports: [
BrowserModule,
HttpClientModule,FormsModule,RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
As you can see I have import the Routermodule && Routes.
Please see the pic which shows visual studio editor commiting reponse .
I am almost surprised because Angular use AOT compilation which fails here.Could you please try ?
It looks like problem with my 'lazy loading'
When I'm trying ng serve, I got this error:
ERROR in No NgModule metadata found for 'ModuleA'.
And compilation is waiting. Then if I edit and save file modulea.module.ts it works. But this trick doesn't work with ng build (there is now 'watch' mode) I hope you know what I'm talking about :D
So how can I fix it?
My folders structure:
src/
app/
views/
moduleA/
componenets/
modulea.module.ts
modulea-routing.module.ts
moduleB/
componenets/
moduleb.module.ts
moduleb-routing.module.ts
... app components etc
app.module.ts
app.routing.ts
My app routing
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
export const routes: Routes = [
{
path: 'modulea',
children: [
{
path: '',
loadChildren: './views/moduleA/modulea.module#ModuleAModule'
},
]
},
{
path: 'moduleb',
children: [
{
path: '',
loadChildren: './views/moduleB/moduleb.module#ModuleBModule'
},
]
},
];
Module A:
import { NgModule } from '#angular/core';
import { ModuleARouting } from './modulea-routing.module';
#NgModule({
imports: [
ModuleARouting
],
})
export class ModuleAModule { }
Module B:
import { NgModule } from '#angular/core';
import { ModuleBRouting } from './moduleb-routing.module';
#NgModule({
imports: [
ModuleBRouting
],
})
export class ModuleBModule { }
Module A and B routing files loading another module:
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
const routes: Routes = [
{
path: '',
data: {
title: 'ModuleA'
},
children: [
{
path: '',
redirectTo: 'module-a-a'
},
{
path: 'module-a-a',
loadChildren: './components/module-a-a.module#ModuleAAModule'
},
]
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ModuleARouting {}
And finally ModuleAA loads components
EDIT
I can edit any file (when compile is fail and waiting) to pass it done.
I had the same issue and was and error on module name . So check all names , routing names, component names and module names of the module that the error is happening.
i am working with project in angular5 , where i have different
modules for different entities.
i need to use primeng for component ui ,i installed it properly, test
with demo angular project with single app module :
i have following module:
app (angular generated , app.module.ts)
user(user.module.ts)
1. create user component
2 update user component
admin(admin.module.ts)
1. create admin component
2 . update user component
problem :
when i am working with multiple modules , how to set up primeng in app.module.ts file ?
i am using primeng button in createuser.component with
> <button pButton type="button" label="Click" ></button> <p-button
> label="Click" ></p-button>
i got following error
'p-button' is not a known element:
1. If 'p-button' is an Angular component, then verify that it is part of this module.
2. If 'p-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
(" [ERROR
->]"): ng:///PreMeritModule/AddformComponent.html#1:0
my app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { LocationStrategy, HashLocationStrategy } from '#angular/common';
//prime ng needs following modules with browser animation module and froms module
import { PanelModule } from 'primeng/components/panel/panel';
import { ButtonModule } from 'primeng/components/button/button';
import { AppComponent } from './app.component';
import { userModule } from './user/user.module';
import { adminModule } from './admin/admin.module';
// Routing Module
import { AppRoutingModule } from './app.routing';
#NgModule({
imports: [
userModule,
adminModule
BrowserModule,
FormsModule,
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
PanelModule,
ButtonModule
],
declarations: [
AppComponent,
],
providers: [{
provide: LocationStrategy,
useClass: HashLocationStrategy
}],
bootstrap: [AppComponent]
})
export class AppModule { }
Modify this import:
import { NgModule } from '#angular/core';
...to add...
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '#angular/core';
...then:
#NgModule({
imports: ...
...
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
In full:
import { BrowserModule } from '#angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '#angular/core';
import { LocationStrategy, HashLocationStrategy } from '#angular/common';
//prime ng needs following modules with browser animation module and froms module
import { PanelModule } from 'primeng/components/panel/panel';
import { ButtonModule } from 'primeng/components/button/button';
import { AppComponent } from './app.component';
import { userModule } from './user/user.module';
import { adminModule } from './admin/admin.module';
// Routing Module
import { AppRoutingModule } from './app.routing';
#NgModule({
imports: [
userModule,
adminModule
BrowserModule,
FormsModule,
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
PanelModule,
ButtonModule
],
declarations: [
AppComponent,
],
providers: [{
provide: LocationStrategy,
useClass: HashLocationStrategy
}],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
I am new to Angular 2. As for now I am trying to fetch user data from Github API. I have one component (user.component) and here is its code:
import {Component} from '#angular/core';
import {userService} from './user.service';
import'rxjs/add/operator/map';
#Component({
selector: 'users',
template: `
<h2>Users</h2>
`,
providers: [userService]
})
export class UserComponent{
constructor(private _userService: userService)
{
this._userService.getUser().subscribe( user => {console.log(user)})
}
}
The code of user.Service.ts:
import {Injectable} from '#angular/core'
import {Http, Headers} from '#angular/http'
import'rxjs/add/operator/map';
#Injectable()
export class userService{
private username : string;
constructor (private _http:Http){
console.log("Github Service is ready...")
this.username = "example"
}
getUser(){
return this._http.get("http://api.github.com/users/"+example)
.map(res => res.json)
}
}
And this is app.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { UserComponent } from './user.component'
import {HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
#NgModule({
imports: [ BrowserModule, HttpModule ],
declarations: [ AppComponent,UserComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
And finally here is app.component.ts:
import { Component } from '#angular/core';
import { UserService } from './user.service'
#Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1><users></users>`,
providers: [CourseService]
})
export class AppComponent { name = 'John'; }
You should add providers: [CourseService] to the module, not the app component.
#NgModule({
imports: [ BrowserModule, HttpModule ],
declarations: [ AppComponent,UserComponent ],
bootstrap: [ AppComponent ],
providers: [ CourseService ]
})
and remove it from the #Component decorator.
Edit: I'm glad you got this working, but the commenter is right - this was not a correct solution, I was mistaken.
example is not a local variable inside getUser()
I think you meant to write is:
getUser(){
return this._http.get("http://api.github.com/users/" + this.username)
.map(res => res.json)
}