ERROR in DatetimePopupModule is not an NgModule

[andremanoel]

When performing the build process or serve the component is returning that message. Versions:

@angular/cli: 1.2.6
node: 8.1.4
os: linux x64
@angular/animations: 4.3.4
@angular/common: 4.3.4
@angular/compiler: 4.3.4
@angular/core: 4.3.4
@angular/forms: 4.3.4
@angular/http: 4.3.4
@angular/platform-browser: 4.3.4
@angular/platform-browser-dynamic: 4.3.4
@angular/platform-server: 4.3.4
@angular/router: 4.3.4
@angular/service-worker: 1.0.0-beta.16
@angular/cdk: 2.0.0-beta.8
@angular/cli: 1.2.6
@angular/compiler-cli: 4.3.4

[Gillardo]

using what version? I can install it now using @angular/* 4.3.5 absolutely fine. I am using webpack to build my code. What are you using?

[bartont]

same here Angular 4.3.6

[Gillardo]

I am using angular 4.4.3 and mine is fine. I am using webpack for my build process. Have u got a simple example to reproduce?

[Gillardo]

Please give examples and will try and help you out

[figuerres]

I am getting some info but angular cli build gives the error, a coworker has a hack by editing the package in our node_modules folder. will post the edit here so you can see it and how to update the package.

[figuerres]

Ok here is the hack that makes the Angular CLI build command happy:

go to: node-modules/ngx-bootstrap-datetime-popup/lib/datetime-popup.module.d.ts add to that file this code: import { NgModule } from '@angular/core'; @NgModule({ imports: [ ], declarations: [ ], exports: [ ], entryComponents: [], providers: [ ] })

now the command "ng Build" runs with no error.

why it needs this i do not know.

but that does allow it to run.

[Gillardo]

I am unsure how to get that code into the datetime-popup.module.d.ts file during the build process. It is there before building, but not afterwards.... Going to have to do some digging. I got a feeling i have set something up incorrect

[figuerres]

@Gillardo i Hear ya, seems like it's an attribute that should be in the javascript file, i saw the soruce had the attribute, it's a strange one for sure.

[Gillardo]

@figuerres could you try something for me, as been playing but since i havent got a project i cant test ng-build.

In your ngx-bootstrap-datetime-popup\src folder, edit index.ts so it reads

export * from './datetime-popup.component';
export * from './datetime-popup.module';

export declare class DatetimePopupModule {

}

Now in your ngx-bootstrap-datetime-popup\lib folder, edit index.d.ts file, and change it to read

export * from './datetime-popup.component';
export * from './datetime-popup.module';
export declare class DatetimePopupModule {
}

Does it now work??

[juchen0429]

I also have this problem. After adding “import { NgModule } from '@angular/core'; @NgModule({ imports: [ ], declarations: [ ], exports: [ ], entryComponents: [], providers: [ ] }) ” , he worked very well

[Gillardo]

Guys, hoping to have cracked this now. I have used the angular2 library project to recreate my project and it outputs all the different versions needed. This is going to be version 1.1.0.

I have also added some functionality to show and hide buttons as well.

Can someone please get back to me asap and see if this has worked??

[juchen0429]

hi gilllardo So you want to test it? Maybe I can help...

[Gillardo]

@juchen0429 I have uploaded 1.2.0 to github now, and published it to npm. It works on my webpack project and also works on the playground application that i have got in the source to add new features. I am hoping this should work for all now. I have however had to change some code, so you need to use the forRoot method when adding the module, but can you try it and let me know please?

[juchen0429]

@Gillardo ok， got it . I try to update

[juchen0429]

@Gillardo I think it's working now. but I import { DatetimePopupModule } from 'ngx-bootstrap-datetime-popup/dist'; not import { DatetimePopupModule } from 'ngx-bootstrap-datetime-popup';

and imports:[ DatetimePopupModule.forRoot(), ] HTML: <datetime-popup [value]="myDate" (valueChange)="onValueChange($event)" [(showPopup)]="showPicker" [showDate]="showDate" [showTime]="showTime">

it's working now

[Gillardo]

Yeah i am not sure why have to import from /dist.... strange, but if thats what is takes to get it working at the moment, i am happy with that! thank you for testing! appreciate it

[figuerres]

Hey @Gillardo i think i can give you part of the fix and what is wrong with this:

i have some code i got from another project that i can do the import from package name for.

in this folder i have an index.ts that has lines like this:

export from './ngf-Select.directive'; export from './ngf-Background.directive'; export * from './ngf.module';

and the .module.ts is where the stuff that is in your current index.ts goes.

so in the consuming app the app.module imports the .module

but the component level import imports the index.ts by the name of the folder that holds the index.ts file.

for an example take a look at the /shared/ngf folder in my AngleWiki project: AngleWiki

[Gillardo]

@figuerres not sure i understand. Are you saying that i would need an index.ts folder in the root which would export the module/directives etc? if you want to do a PR change to fix, your more then welcome 😄

[Gillardo]

I believe i have now fixed having to reference /dist in the path now guys. Available in 1.2.2