Removing a Page / Component

Steps to remove undesired page from the App

  • Go to app-routing.module.ts file.

  • Select the route link that you want to remove and just press Delete, eg. here we have choose to remove 'uber-map-flow'.

Now remove the line from this file as shown in screenshot above. You can identify this line from the url . The url here should match the path in app-routing.module.ts

  • Press Ctrl+S to save the changes made.

  • Now go to app.component.ts file.

Now save the changes made.

In this way we can remove the pages that we do not want in our app.

=============================================================

Steps to remove undesired component from the App

  • Above steps remove the module from the app. But the code files and folders still exist. In this example we will go to the path fullApp\Ionic5FullApp\src\app\pages\layouts and delete the corresponding folder 'uber-map-flow'. Similarly you have to search for the folder of the page that you want to remove and then just simply go and delete it.

  • Look for the exact component that you want to remove from your app. For example here we want to remove 'facebook login' component.

As shown above paste the selector here by adding the < in front of it.

  • Now go to 4th file in that particular component i.e. component.ts file.

It will take some time to search.

As shown above select the lower file from the search result. Now select the code related to the component that you want to remove and then click on Delete. And then don't forget to save the changes made.

Click on the component that you want to remove.

  • Copy the selector form here as shown above. Now go to Search option from the menu on the left. We'll search for all instances of the component

Now we have to delete the component from declarationand exports. Refer to below images for example.

Remember to finally save all the changes made.

Now go to the location fullApp\Ionic5FullApp\src\app\components where the components are placed and delete the 'facebook-login' folder from here.

=========================================================

  • Now go to sharable.module.ts file.

So before removal of component it looks like this

And after removal of component the screen looks like this

Last updated