# Problems creating an Ionic 3 component

**URL:** <https://forum.ionicframework.com/t/problems-creating-an-ionic-3-component/87712>\
**Category:** ionic-v3\
**Created:** [April 25, 2017, 2:46am UTC](https://forum.ionicframework.com/t/problems-creating-an-ionic-3-component/87712 "2017-04-25T02:46:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![salamanca\_solutions](https://avatars.discourse-cdn.com/v4/letter/s/3ec8ea/32.png) [@salamanca\_solutions](https://forum.ionicframework.com/u/salamanca_solutions)\
**Post date:** [April 25, 2017, 2:46am UTC](https://forum.ionicframework.com/t/problems-creating-an-ionic-3-component/87712/1 "2017-04-25T02:46:15Z")

</div>

I have this error while creating a component

```auto

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

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

```

date-picker.ts

```auto
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

```auto

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?

---

<div class="post-metadata">

**Author:** ![subhash-ztech](https://avatars.discourse-cdn.com/v4/letter/s/898d66/32.png) [@subhash-ztech](https://forum.ionicframework.com/u/subhash-ztech)\
**Post date:** [April 25, 2017, 2:52am UTC](https://forum.ionicframework.com/t/problems-creating-an-ionic-3-component/87712/2 "2017-04-25T02:52:00Z")

</div>

‘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

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [April 25, 2017, 3:05am UTC](https://forum.ionicframework.com/t/problems-creating-an-ionic-3-component/87712/3 "2017-04-25T03:05:30Z")

</div>

How many pages are you using this date picker in?

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [April 25, 2017, 9:39am UTC](https://forum.ionicframework.com/t/problems-creating-an-ionic-3-component/87712/4 "2017-04-25T09:39:40Z")

</div>

(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.)