Problems creating an Ionic 3 component

Ionic Framework ionic-v3
1

I have this error while creating a component


Unexpected directive 'DatePicker' imported by the module 'AppModule'. Please add a @NgModule annotation.
Stack
Error: Unexpected directive 'DatePicker' imported by the module 'AppModule'. Please add a @NgModule annotation.
    at g (http://localhost:8100/build/polyfills.js:3:7133)
    at syntaxError (http://localhost:8100/build/main.js:83082:34)
    at http://localhost:8100/build/main.js:95537:44
    at Array.forEach (native)
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8100/build/main.js:95520:49)
    at JitCompiler._loadModules (http://localhost:8100/build/main.js:106622:64)
    at JitCompiler._compileModuleAndComponents (http://localhost:8100/build/main.js:106581:52)
    at JitCompiler.compileModuleAsync (http://localhost:8100/build/main.js:106543:21)
    at PlatformRef_._bootstrapModuleWithZone (http://localhost:8100/build/main.js:5160:25)
    at PlatformRef_.bootstrapModule (http://localhost:8100/build/main.js:5145:21)
    at Object.<anonymous> (http://localhost:8100/build/main.js:117728:124)
    at __webpack_require__ (http://localhost:8100/build/main.js:48:30)
    at http://localhost:8100/build/main.js:140:18
    at http://localhost:8100/build/main.js:143:10

Ionic Framework: 3.0.1
Ionic App Scripts: 1.3.4
Angular Core: 4.0.0
Angular Compiler CLI: 4.0.0
Node: 6.10.2
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

app.module.ts

  //....
  imports: [
    BrowserModule,
    HttpModule,
    DatePicker,
    IonicModule.forRoot(Feel)
  ],

date-picker.ts

import { Component } from '@angular/core';

/**
 * Generated class for the DatePicker component.
 *
 * See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
 * for more info on Angular Components.
 */
@Component({
  selector: 'date-picker',
  templateUrl: 'date-picker.html'
})
export class DatePicker {

  text: string;

  constructor() {
    console.log('Hello DatePicker Component');
    this.text = 'Hello World';
  }

}

date-picker.module.ts


import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { DatePicker } from './date-picker';

@NgModule({
  declarations: [
    DatePicker,
  ],
  imports: [
    IonicModule
  ],
  exports: [
    DatePicker
  ]
})
export class DatePickerModule {}

I think is a problem with angular 4
Any suggestions?

2

‘declarations’ section is for declaring components, directives etc
’imports’ section is for importing the modules.

You have to import the ‘DatePickerModule’ inside the imports section. Instead of that, you tried to import the ‘DatePicker’ component.

So, change the ‘DatePicker’ to ‘DatePickerModule’ in imports section of app.module.ts

3

How many pages are you using this date picker in?

4

(I changed your post to format your code or error message correctly. Please use the </> button above the post input field to format your code or error message or wrap it in ``` (“code fences”) manually. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.)