Replacing Component in Tabs Routing Angular Ionic

Question

In the generic ionic tabs template, I am trying to replace tab 2 with a component. I keep getting this error despite having PeopleComponent imported:

My error:

ERROR Error: Uncaught (in promise): Error: Component PeopleComponent is not part 
of any NgModule or the module has not been imported into your module.
Error: Component PeopleComponent is not part of any NgModule or the module has 
not been imported into your module.

People Component is very simple and does not give errors. I have tried removing the import from one or the other, but that doesn't work. Not sure what to do.

App Module:

...
@NgModule({
  declarations: [
  ...
  PeopleComponent,
]
...

Tabs Routing Module:

import { PeopleComponent } from './../path/people/people.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
 {
    path: 'tabs',
    component: TabsPage,
    children: [
 {
    path: 'tab1',
    loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
  },
  {
    path: 'tab2',
    component: PeopleComponent
    // loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
  },
  {
    path: 'tab3',
    loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
]
},
{
   path: '',
   redirectTo: '/tabs/tab1',
   pathMatch: 'full'
}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

export class TabsPageRoutingModule {}

Tabs Module:

import { PeopleComponent } from './../path/people/people.component';
import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { TabsPageRoutingModule } from './tabs-routing.module';

import { TabsPage } from './tabs.page';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    TabsPageRoutingModule,
  ],
  declarations: [TabsPage]
})
export class TabsPageModule {}

Harish Harish · Accepted Answer · 2020-06-19T09:02:48

Edit:

Instead of doing what was mentioned below, it is better to remove the unwanted modules that ionic tabs starter template creates.

Here is the commit I have done which removes the unnecessary modules and makes the application simpler.

You can do the similar thing to your application and make it simpler.

Old Answer

You will have to add the PeopleComponent inside declarations of the TabsPageModule and not the AppModule.

The problem is TabsPageModule doesn't know about the PeopleComponent because it has been declared in the AppModule. Unless you export the PeopleComponent in AppModule and import the AppModule inside the TabsPageModule, PeopleComponent won't be available for use.

Instead of doing all this, as mentioned on the first line, simply remove PeopleComponent from AppModule declarations and add it to the declarations in TabsPageModule.

Replacing Component in Tabs Routing Angular Ionic

1 Answers

Edit:

Old Answer