cannot resolve symbol NgxPaginationModule - angular5

I am trying to use NgxPaginationModule in my Angular5 project cannot resolve symbol NgxPaginationModule, I followed all step as documented
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { GlobalModule } from './global/global.module';
import { ProtectedModule} from './protetcted/protect-module.component';
import { AppRoutingModule } from './app.routing.module';
import {NgxPaginationModule} from 'ngx-pagination';//cannot resolve symbol NgxPaginationModule
#NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
GlobalModule,
ProtectedModule,
AppRoutingModule,
NgxPaginationModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I checked node modules and ngx-pagination folder exist.
Can any one suggest what is causing this error?


I was having the same issue and tried deleting node_modules and package-lock.json and then reinstalling everything with npm -i.
It worked for me.


This same thing is happening to me during an Azure CI build:
Could not resolve ngx-pagination relative to D:/a/7/s/src/app/app.module.ts.
Cannot find module 'ngx-pagination'
app.module.ts:
// import { NgxPaginationModule } from 'ngx-pagination'; // <-- import the module
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
AppRoutingModule,
NgbModule.forRoot(),
// NgxPaginationModule
],
Works fine locally.

Related

More than one component matched on this element

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 { }

ionic 4 translateModule for two pages will cause ERROR RangeError: Maximum call stack size exceeded

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!

How to integrate CK-editor with angular 5. I am trying to integrate ck-editor v4 with application, i am getting 'Element Ref is not generic'

I tried integrating ck-editor version5, but so many options are not working. I tried with ck-editor version4, since there are more options but i got "Element Ref is not generic".
I am attaching reference code here....
installed ck-editor through npm
---->> npm install --save ckeditor4-angular
added module to my module
---->> import { CKEditorModule } from 'ckeditor4-angular';
My Code ::
{
import { BrowserModule } from "#angular/platform-browser";
import { NgModule } from "#angular/core";
import { FormsModule } from '#angular/forms';
import { RouterModule, Routes } from "#angular/router";
import { HttpClientModule, HTTP_INTERCEPTORS } from
"#angular/common/http";
import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
import { CKEditorModule } from 'ckeditor4-angular';
#NgModule({
declarations: [],
imports: [
NgxDatatableModule, ModalModule.forRoot(),
BrowserModule,
HttpClientModule,
FormsModule,
TooltipModule.forRoot(),
RouterModule.forRoot(
appRoutes,
{ useHash: true }
),
CKEditorModule
],
providers: [],
bootstrap: []
})
export class AppModule { }
}

import Routes [ts] 'types' can only be used in a .ts file.While they are already in app.module.ts

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 ?

prime ng as root angular5

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 { }