Ionic 3 在应用程序模块问题中引用新页面

Question

我使用 generate 命令在 ionic 3 中生成了一个新页面。当我尝试将它添加到应用程序模块时，它会抛出以下错误，

Uncaught Error: Unexpected value 'NewTodo' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.

以前在使用 ionic 2.x 时我从未手动添加注释。知道我该如何解决吗？

更新

新建-todo.ts文件

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {Data} from '../../providers/data';
import { ToastController } from 'ionic-angular';

@Component({
  selector: 'page-new-todo',
  templateUrl: 'new-todo.html',
})
class Todo { 
  public title: string; 
  public completed: boolean; 
  constructor() { 
    this.title = ''; 
    this.completed = false; 
  } 
}

export class NewTodo {
  todo: Todo;
  constructor(public navCtrl: NavController, public navParams: NavParams,public _data: Data,public toastCtrl: ToastController) {
    this.todo = new Todo();
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad NewTodo');
  }

  save(){
    var key = this._data.save(this.todo);
    if(key){
      // console.log('saved');
      let toast = this.toastCtrl.create({
        message: '',
        duration: 3000
      });
      toast.onDidDismiss(() => {
        this.navCtrl.pop();
        console.log('toast dismissed');
      });
      // this.navCtrl.present(toast);
      toast.present();
    }
  }

}

app-module.ts文件

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { NewTodo } from '../pages/new-todo/new-todo';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { HttpModule } from '@angular/http';
import { AngularFireModule } from 'angularfire2';
import {Data} from '../providers/data';
import * as firebase from 'firebase';
// AF2 Settings
export const firebaseConfig = {
  apiKey: "AIzaSyBiVsxqjSlsPpcHCzJi0anzInr2N9FLv5E",
  authDomain: "test-project-5f51f.firebaseapp.com",
  databaseURL: "https://test-project-5f51f.firebaseio.com",
  storageBucket: "test-project-5f51f.appspot.com",
  messagingSenderId: "341872568316"
};
// firebase.initializeApp(firebaseConfig)
@NgModule({
  declarations: [
    MyApp,
    HomePage,
    NewTodo
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    NewTodo
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    [Data]
  ]
})
export class AppModule {}

UPDATE-2

new-todo.module.ts 文件

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { NewTodo } from './new-todo';

@NgModule({
  declarations: [
    NewTodo,
  ],
  imports: [
    IonicModule.forChild(NewTodo),
  ],
  exports: [
    NewTodo
  ]
})
export class NewTodoModule {}

Answer 1

在 NgModule 的声明部分，您列出了一个 class 'NewTodo' ，它需要是组件、指令或管道。删除 class 名称或添加相应的声明符 @Pipe/@Directive/@Component

Answer 2

在 ionic 3 中。默认情况下，每个页面都设置为单独的模块，以实现 lazy loading 个页面。

您的页面将在 new-todo.module.ts.

中声明

@NgModule({
    declarations: [
        NewTodo
    ],
    imports: [
        IonicPageModule.forChild(NewTodo)
    ],
    entryComponents: [
        NewTodo
    ]
})

查看 IonicPageModule docs as well as IonicPage。

在您的组件 new-todo.ts 页面中，在组件装饰器上方添加 @IonicPage() 装饰器。

@IonicPage()
@Component({
  selector: 'page-new-todo',
  templateUrl: 'new-todo.html',
})

同时 删除页面模块外的所有导入。 将页面推入时使用字符串 'NewTodo' 而不是导入的 class导航控制器。您不必在 app.module.ts

中声明页面

Answer 3

$ ionic generate 在 ionic3 中创建延迟加载页面的模块

如果您不想利用延迟加载，请使用

$ ionic generate [type] [name] --no-module

// 不为组件生成 NgModule

https://ionicframework.com/docs/cli/generate/

Ionic 3 在应用程序模块问题中引用新页面

Ionic 3 refer a new page in app module issue

ionic-framework

ionic2

ionic3

angular