Help with components (newbie)

Ionic Framework ionic-v3
1

Hello,
I’m just starting with Ionic-3 and its structure.
I’m writing a simple app starting from tab template and I’ve added two simple components to understand them.
Refreshing the page in a browser I receive the following error:

Error: Unexpected module ‘ComponentsModule’ declared by the module ‘AppModule’. Please add a @Pipe/@Directive/@Component annotation.

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { QrCodePage } from '../pages/qrcode/qrcode';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { QRScanner } from '@ionic-native/qr-scanner';

import { ComponentsModule } from '../components/components.module';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    QrCodePage,
    ComponentsModule
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    QrCodePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    QRScanner,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

The components.module.ts was auto generated by the ionic command and is:

import { NgModule } from '@angular/core';
import { JokeComponent } from './joke/joke';
import { JokeListComponent } from './joke-list/joke-list';
@NgModule({
	declarations: [JokeComponent,
    JokeListComponent],
	imports: [],
	exports: [JokeComponent,
    JokeListComponent]
})
export class ComponentsModule {}

Both the components are annotated by @Component.

Which is the problem?

2

Hello,
move in appmodule.ts ComponentsModule from section declaration to section Imports.

....
QrCodePage,
    
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
ComponentsModule
  ],
....

I hope this helps.

Best regards, anna-liebt

1 Like