Ionic3中setRoot跳转TabsPage出错及模块重复声明问题求助

在Ionic 3中，用字符串名称导航页面（比如'TabsPage'）的前提是该页面已经在AppModule的declarations和entryComponents数组中注册，但你用ionic start生成的tabs项目里，TabsPage默认是有自己的独立模块TabsPageModule的，这种情况下直接用字符串导航就会找不到页面。

正确的做法有两种：

方案1：使用类引用导航（推荐） #

1. 在newpage.ts中先导入TabsPage（根据你的实际文件路径调整）：

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

2. 修改导航代码，直接传入TabsPage类，而不是字符串：

addItem(item: Item) { 
  this.shopping.addItem(item).then(ref =>{ 
    this.navCtrl.setRoot(TabsPage, {key : ref.key}); 
  }) 
}

3. 确保新增页面的模块（比如newpage.module.ts）中导入了TabsPageModule：

// newpage.module.ts
import { TabsPageModule } from '../tabs/tabs.module';

@NgModule({
  imports: [
    // ...其他已导入的模块
    TabsPageModule
  ]
})
export class NewpageModule {}

方案2：将TabsPage注册到AppModule（不推荐，不符合模块化规范） #

如果坚持用字符串导航，需要把TabsPage加到AppModule的declarations和entryComponents中，但注意不要和TabsPageModule的声明冲突：

// app.module.ts
import { TabsPage } from './tabs/tabs';

@NgModule({
  declarations: [
    // ...其他组件
    TabsPage
  ],
  entryComponents: [
    // ...其他组件
    TabsPage
  ]
})
export class AppModule {}

这个错误是因为你把TabsPage同时声明在了AppModule和TabsPageModule中——Angular的核心规则是一个组件只能属于一个NgModule，这不是什么特殊的"常规操作"，只是你操作时的小失误。

解决方法很直接：

1. 打开AppModule，把declarations和entryComponents中的TabsPage彻底删除；
2. 确保TabsPage只在TabsPageModule的declarations和entryComponents中存在：

// tabs.module.ts
import { TabsPage } from './tabs';

@NgModule({
  declarations: [
    TabsPage
  ],
  entryComponents: [
    TabsPage
  ],
  imports: [
    // ...其他导入，比如IonicPageModule.forChild(TabsPage)
  ]
})
export class TabsPageModule {}

3. 回到NewpageModule，确认已经导入了TabsPageModule（参考问题1的方案1），这样就能正常导航到TabsPage了。

总结一下：Ionic 3的模块化项目中，每个页面最好保持自己的独立模块，跨模块导航时导入目标页面的模块，并用类引用的方式导航，这样既符合Angular的规范，也能避免各种导航和模块冲突的问题。

内容的提问来源于stack exchange，提问作者Ke Vin