JW Angular Pagination Doesn't Work if used in Feature Module - node.js

Question

I'm using Angular 10 and the JW Angular Pagination module works fine if I import it into app.module.ts and then use it in a view that uses the app.component.ts component. However, when I try to import it into a custom feature module and use a component that imports the feature module, the pagination element does not display in the view template. It seems that Angular cannot see the pagination module.
App.module.ts
import { NgModule, Component, OnInit } from '#angular/core';
import { CoreModule } from "./core/core.module"
import { MessageModule } from "./messages/message.module";
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import * as $ from 'jquery';
import { BrowserModule } from '#angular/platform-browser';
import { AuthService } from "./model/auth.service"
import { JwPaginationModule } from 'jw-angular-pagination';
#NgModule({
imports: [AppRoutingModule, MessageModule, CoreModule, BrowserModule, JwPaginationModule],
declarations: [AppComponent,],
providers: [AuthService],
bootstrap: [AppComponent]
})
export class AppModule {
}
Core.module.ts
import { NgModule } from "#angular/core";
import { ModelModule } from "../model/model.module";
import { FormsFeatureModule } from "../view/forms.module";
import { ViewFeatureModule } from "../view/view.module";
import { routing } from "../app.routing";
import { MessageModule } from "../messages/message.module";
import { MessageService } from "../messages/message.service";
import { Message } from "../messages/message.model";
import { AuthService } from "../model/auth.service";
import { EncrDecrService } from '../utils/EncrDecr.service';
import { CommonModule } from '#angular/common';
//import { NotFoundComponent } from "./notFound.component";
//import { UnsavedGuard } from './unsaved.guard';
#NgModule({
imports: [ModelModule, MessageModule, routing, FormsFeatureModule, ViewFeatureModule, CommonModule],
declarations: [],
exports: [ModelModule, FormsFeatureModule, ViewFeatureModule, MessageModule ],
providers: [AuthService, EncrDecrService],
})
export class CoreModule {
}
Forms.module.ts
import { NgModule } from "#angular/core";
import { FormsModule, Validators, FormGroup, FormBuilder, NgForm } from '#angular/forms';
import { ReactiveFormsModule } from '#angular/forms';
import { BrowserModule } from '#angular/platform-browser';
import { RouterModule } from '#angular/router';
//import { NotFoundComponent } from "./notFound.component";
//import { UnsavedGuard } from './unsaved.guard';
import { ActivatedRoute, Router } from "#angular/router";
import { AuthService } from "../model/auth.service";
import { JwPaginationModule } from 'jw-angular-pagination';
#NgModule({
imports: [FormsModule, ReactiveFormsModule, BrowserModule, RouterModule, JwPaginationModule],
declarations: [],
exports: [FormsModule, ReactiveFormsModule, RouterModule, JwPaginationModule],
providers: [AuthService],
})
export class FormsFeatureModule {
constructor(private router: Router) { }
View.module.ts
import { RecipeViewComponent } from "../view/recipeView.component";
import { NgModule } from "#angular/core";
import { FormsModule } from '#angular/forms';
import { ReactiveFormsModule } from '#angular/forms';
import { BrowserModule } from '#angular/platform-browser';
import { RouterModule } from '#angular/router';
import { HomePageComponent } from "./homePage.component";
import { AdminComponent } from "../admin/admin.component";
import { AuthService } from "../model/auth.service";
//import { NotFoundComponent } from "./notFound.component";
//import { UnsavedGuard } from './unsaved.guard';
#NgModule({
imports: [FormsModule, ReactiveFormsModule, BrowserModule, RouterModule],
declarations: [RecipeViewComponent, HomePageComponent, AdminComponent],
exports: [RecipeViewComponent, HomePageComponent,AdminComponent, RouterModule],
providers: [AuthService],
})
export class ViewFeatureModule { }
admin.component.ts
import { Component, Inject, DoCheck, ChangeDetectorRef, OnInit } from "#angular/core";
import { ActivatedRoute, Router } from "#angular/router";
import { ModelRepo } from "../model/repository.model";
import { Category } from "../model/category.model";
import { Ingredient } from "../model/ingredient.model";
import { RecipeBook } from "../model/recipeBook.model";
import { User } from "../model/user.model";
import { FormsFeatureModule } from "../view/forms.module"
import { ViewChild, ElementRef } from '#angular/core';
import { EncrDecrService } from '../utils/EncrDecr.service';
import { AppComponent } from '../app.component'
import { Observable, throwError } from "rxjs";
//import { MODES, SharedState, SHARED_STATE } from "./sharedState.model";
//import { Observer} from "rxjs"
#Component(
{
selector: "admin",
templateUrl: "admin.component.html"
}
)
export class AdminComponent implements OnInit {
ModNewCategory = new Category(0,"");
ModNewIngredient = new Ingredient(0,"");
ModNewRecipeBook = new RecipeBook();
selectedConfig = "categories"; //initilze for first page load
selectedCategoryOperation = "addCategory"; //initilze for first page load
selectedIngredientOperation = "addIngredient"; //initilze for first page load
selectedUserOperation = "addUser"; //initilze for first page load
userRoles = new Array<string>("visitor", "member", "administrator");
searchRole = "";
id;
mode;
operation;
defaultObject = new Object();
public pageOfItems: Array<any>;
public items = [];
constructor(public dataRepo: ModelRepo, private EncrDecr: EncrDecrService, private appComponent:AppComponent, activeRoute: ActivatedRoute, public router: Router, public fieldValidator: FormsFeatureModule) {
activeRoute.params.subscribe(params => {
this.id = params["id"];
this.mode = params["mode"];
this.operation = params["operation"]
if (this.operation != null && this.mode != null) {
this.modifyItem(this.id, this.operation);
}
}
)
}
ngOnInit() {
// an example array of 150 items to be paged
// this.items = this.dataRepo.users;
this.items = Array(150).fill(0).map((x, i) => ({ id: (i + 1), name: `Item ${i + 1}` }));
}
onChangePage(pageOfItems: Array<any>) {
// update current page of items
alert('onChangePage got called');
this.pageOfItems = pageOfItems;
}
admin.component.html
<div class="card text-center m-3">
<h3 class="card-header">Angular Pagination Example</h3>
<div class="card-body">
<div *ngFor="let item of pageOfItems">{{item.name}}</div>
</div>
<div class="card-footer pb-0 pt-3">
<jw-pagination [items]="items" (changePage)="onChangePage($event)"></jw-pagination>
</div>
</div>

Answer 1

The Problem
You are using Angular10...
Have a look at the below statement Ivy is not complaining about unknown element inside ng-template
#36171
This is due to an architectural change in Ivy. In the previous compiler (ViewEngine), the check for unknown elements would occur during parsing of the template. In Ivy, templates are parsed independently from the corresponding NgModule, so information on components/directives in scope is not available.
Instead, checking of elements is pushed into the template type checking phase and it's currently affected by the type checker's configuration. With fullTemplateTypeCheck set to true however, it should descend into templates to check them (when it's false, it won't for backwards compatibility reasons). This conflicts however with your statement here:
The issue can only be found in runtime (no component being rendered) or with fullTemplateTypeCheck: true.
Consider the imports array in the module you are declaring AdminComponent
imports: [FormsModule, ReactiveFormsModule, BrowserModule, RouterModule],
This module does not have any idea about a JwPaginationModule
Solution
The simplest solution is to simply add JwPaginationModule to this array
imports: [FormsModule, ReactiveFormsModule, BrowserModule, RouterModule, JwPaginationModule],
Now the module will know about this component and render correctly.