Ionic 2/Ionic 3 - How to delete pages and remove app module references

In the previous tutorial ,we covered how to create and add pages in Ionic 2 / Ionic 3 .In this tutorial we are going to see how to delete pages .

This tutorial works for both Ionic 2 and Ionic 3 .

Deleting pages which support lazy loading (Ionic 3 only)


In Ionic 3 you can lazy load a page by providing it with its own page module which has its own declartaions array .for exampe here is a module for a family-list page:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { FamilyListPage } from './family-list';

@NgModule({
declarations: [
    FamilyListPage,
],
imports: [
    IonicPageModule.forChild(FamilyListPage),
],
exports: [
    FamilyListPage
]
})
export class FamilyListPageModule {}

So to delete this page you can just delete the folder which contains the page files including the module then of course you need to get rid of any references to this page from other pages .

Using your terminal ,navigate inside src/pages directory and run

cd src/pages 
rm -r family-list 

Deleting pages without lazy loading


If the page doesn't include lazy loading (Ionic 2) you need to follow these steps to delete pages .

First navigate inside src/pages then delete all page files (HTML ,CSS and TypeScript source files) .

Next head over to app module at src/app/app.module.ts then remove the page import statement then remove page from module declarations array and entryComponents array .

For example to remove a HomePage

/* .. */
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home'; // 1 ) remove this 
/* .. */


@NgModule({
declarations: [
    MyApp,
    HomePage // 2 ) remove this 
],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    HomePage // 3 ) remove this 
],
providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},

]
})
export class AppModule {}

The module should look like

/* .. */
import { MyApp } from './app.component';
/* .. */


@NgModule({
declarations: [
    MyApp
],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp    ],
providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},

]
})
export class AppModule {}

Conclusion


We looked at how to delete pages and remove all references to them in main module in both cases of Ionic 2 and Ionic 3 .

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status