Node.js JW角度分页不'；如果在功能模块中使用，则无法工作

我使用的是Angular 10，如果我将JW Angular Pagination模块导入app.module.ts，然后在使用app.component.ts组件的视图中使用它，那么JW Angular Pagination模块工作正常。但是，当我尝试将其导入自定义要素模块并使用导入要素模块的组件时，分页元素不会显示在视图样板中。似乎Angular无法看到分页模块

应用程序模块.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 {
}

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

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

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

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

核心模块.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 {
}

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

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

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

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

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

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

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

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

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

查看.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 {
}

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

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

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

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

管理组件.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 {
}

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

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

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

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

从“@angular/core”导入{Component、Inject、DoCheck、ChangeDetectorRef、OnInit}；
从“@angular/Router”导入{ActivatedRoute，Router}”；
从“./model/repository.model”导入{ModelRepo}；
从“./model/Category.model”导入{Category}；
从“./model/component.model”导入{component}；
从“./model/RecipeBook.model”导入{RecipeBook}；
从“./model/User.model”导入{User}”；
从“./view/forms.module”导入{FormsFeatureModule}
从'@angular/core'导入{ViewChild，ElementRef}；
从“../utils/EncrDecr.service”导入{EncrDecrService}；
从“../app.component”导入{AppComponent}
从“rxjs”中导入{可观察，投掷者}；
//从“/SharedState.model”导入{MODES，SharedState，SHARED_STATE}”；
//从“rxjs”导入{Observer}
@组成部分(
{
选择器：“管理员”，
templateUrl:“admin.component.html”
}
)
导出类AdminComponent实现OnInit{
ModNewCategory=新类别（0，“”）；
ModNewComponent=新成分（0，“”）；
ModNewRecipeBook=新RecipeBook（）；
selectedConfig=“categories”；//第一页加载的初始化
selectedCategoryOperation=“addCategory”；//第一页加载的初始化
选择EdingRedientOperation=“AddingCredit”；//第一页加载的初始化
选择edUserOperation=“addUser”//initilze以加载第一页
userRoles=新数组（“访问者”、“成员”、“管理员”）；
searchRole=“”；
身份证件
模式
活动
defaultObject=新对象（）；
publicpageofitems:Array
问题
您正在使用Angular10

请看下面的陈述

这是由于Ivy中的架构更改。在以前的编译器（ViewEngine）中，模板解析期间会检查未知元素。在Ivy中，模板解析独立于相应的
NgModule
，因此范围内的组件/指令信息不可用。


相反，元素的检查被推到模板类型检查阶段，当前受类型检查器配置的影响。当
fullTemplateTypeCheck
设置为
true
时，它应该下降到模板中检查它们（如果为false，则不会因为向后兼容性的原因）但是，这与您在此处的陈述相冲突：


该问题只能在运行时（未呈现任何组件）或使用
fullTemplateTypeCheck:true
查找

考虑要声明的模块中的imports数组
AdminComponent

imports: [FormsModule, ReactiveFormsModule, BrowserModule, RouterModule],

此模块对
JwPaginationModule

解决方案
最简单的解决方案是简单地将
JwPaginationModule
添加到此数组中

imports: [FormsModule, ReactiveFormsModule, BrowserModule, RouterModule, JwPaginationModule],

现在，模块将了解此组件并正确呈现。
您在控制台中是否有任何错误。o，您在声明admin.component的位置共享的控制台中没有错误或警告。ts@OwenKelvin我在上面包含了我的模块代码，以便更深入地了解应用程序结构将ULE导入core.module.ts中的一个核心模块。然后，我将核心模块导入app.module.ts。为了回答您的问题，我在view.module.ts中声明了admin.component.ts