ERROR in A2Edatetimepicker is not an NgModule

[dttrung]

When I import from module and run build and get an error follow

ERROR in A2Edatetimepicker is not an NgModule

[tomcatmwi]

Same here.

[souravmondal93]

The readme file in this repository doesn't give the appropriate steps to install it.

I am writing all the required steps.

1. Run npm install ng2-eonasdan-datetimepicker --save
2. In Module where you using this element, add the following snippets.

   
   ...
   import { DateTimePickerDirective } from 'ng2-eonasdan-datetimepicker/dist/datetimepicker.directive';
   ...

@NgModule({ imports: [ ... ], declarations: [ ... DateTimePickerDirective ], providers: [], exports: [ ... ] })

4. I am assuming you guys are using angular-cli. Add this line to the `app.module.ts`.
`import 'eonasdan-bootstrap-datetimepicker';`
5. In `angular-cli.json`, add the following code in the styles array for proper styling.
```javascript
"styles": [
        "styles.scss",
    "../node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css"
            ],

After modifying the angular-cli.json, you need to restart the development server. Because this change is not recorded by webpack and hence the project is not re-bundled.

If any doubt, feel free to ask. @tomcatmwi @dttrung

[gardziej]

@souravmondal93 Did you manage to build for prod? i got this "ERROR in Error encountered resolving symbol values statically..." error and don't know what to do.

[souravmondal93]

@gardziej No, I didn't try to build the production version as of yet. If you can share the entire error log, it can help us to find the cause of the problem.

[nodejs-practice]

While trying ng-prod, I get this error

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in /media/vijay/DDrive/wip/cleanroom/ui/node_modules/ng2-eonasdan-datetimepicker/node_modules/@angular/core/src/di/metadata.d.ts, resolving symbol OpaqueToken in /media/vijay/DDrive/wip/cleanroom/ui/node_modules/ng2-eonasdan-datetimepicker/node_modules/@angular/core/src/di/opaque_token.d.ts, resolving symbol OpaqueToken in /media/vijay/DDrive/wip/cleanroom/ui/node_modules/ng2-eonasdan-datetimepicker/node_modules/@angular/core/src/di/opaque_token.d.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/media/vijay/DDrive/wip/cleanroom/ui/src'
 @ ./src/main.ts 4:0-74
 @ multi ./src/main.ts

[ghost]

has anyone been able to build production? I've followed the steps from @souravmondal93 but I get Unexpected value 'DateTimePickerDirective [...] declared by the module

@tomcatmwi @dttrung

ng serve works without issue, as does an ng build without the prod switch

[thiagovito]

@srg-avai I'm getting same issue even in ng serve Unexpected value 'DateTimePickerDirective [...] declared by the module. Did you manage to get it working at the end?

[MadEddieFFS]

Anyone get this working ?

[ghost]

@souravmondal93 This is the error that I get: Uncaught Error: Unexpected value 'DateTimePickerDirective' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation. And I can somehow agree on that because the class DateTimePickerDirective indeed doesn't have the @Directive annotation.

Yes, I'm using Webpack. And yes, I'm using Angular CLI. And no, I'm not using SystemJS (and why should I these days?). And yes, I have to migrate an old AngularJS application - which uses this web component - to Angular 4. It would be great to reuse this component so I can also reuse the styling.

And yes, there are alternatives for this web component which supports Webpack and Angular CLI (at least, that's what they say, I still have to find out): https://github.com/DanielYKPan/date-time-picker https://github.com/ng2-ui/datetime-picker But these ones have different API's and I have to style it all over again.

[atais]

I would be really glad to accept any PR that would help to resolve those problems. It has been 4 months from the first report but still, no solutions have been presented.

As I have mentioned in other tickets - I am not using Angular 2 anymore so I do not know what is working and what is not.

[kashcode]

@atais Please check my example I think it's a little bit better. https://plnkr.co/edit/OxM4f078ekKWAn85Sr87?p=preview

There I import A2Edatetimepicker as module into my app module and use directive from A2Edatetimepicker module, also i figured out how to get rid of using ngOnInit() inside Component where you need output into console datetimepicker.

[atais]

@kashcode Thanks! I looked into it - good job!

Quick question though: Does it help with the problem mentioned in the title or it is more about #2 (read the last comment) and #3 ?

[kashcode]

@atais both dirty import and 'is not NgModule' I think if you go through my example you will understand what I change I use SystemJS.

[atais]

I understand the change but I did not know if it affects is not NgModule since I do not know SystemJS at all. It was a miracle I managed to get the example working :smile:

Thanks! I will update the homepage shortly!

@dttrung @tomcatmwi @souravmondal93 @gardziej @nodejs-practice @srg-avai @thiagovito @MadEddieFFS @ronh73 Could anyone confirm that following https://plnkr.co/edit/OxM4f078ekKWAn85Sr87?p=preview example solved his problem?

[ghost]

The plinkr example https://plnkr.co/edit/OxM4f078ekKWAn85Sr87?p=preview has a config.js file containing the used npm dependencies. This is SystemJS (by convention this file should be called system.config.js instead of config.js).

Otherwise you would have a package.json file like I have which contains all npm dependencies. This is Webpack.

[atais]

@ronh73 I do not follow?

Yes, it is example based on SystemJS. One file might not be aligned with the current convention, but it is not most important here. Important is if it fixes ERROR in A2Edatetimepicker is not an NgModule for your builds.

---

wait you have completely other error. Please create separate issue

[kashcode]

My systemjs.config.js file:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'libs/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

            // other libraries
            'eonasdan-bootstrap-datetimepicker': 'npm:eonasdan-bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js',
            'ng2-eonasdan-datetimepicker': 'npm:ng2-eonasdan-datetimepicker',
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
            'jquery': 'npm:jquery/jquery.js',
            'bootstrap': 'npm:bootstrap/js/bootstrap.min.js',
            'moment': 'npm:moment'            
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            },
            'moment': {
                main: './moment-with-locales.js',                
                defaultExtension: 'js'
            },            
            'ng2-eonasdan-datetimepicker': {
                main: './datetimepicker.module.js',
                defaultExtension: 'js'
            }
        }
    });    
})(this);

[ghost]

I adapted the Plunkr example of @atais (that is https://plnkr.co/edit/OxM4f078ekKWAn85Sr87?p=preview) to a Webpack / Angular CLI version. You can check for yourselves whether this works:

• Git clone my repo https://github.com/ronh73/datetimeng2
• Run npm install from the root directory of the project
• Start npm run ng serve from the root directory of the project (in case the Angular CLI is installed globally, ng serve will do)
• The result: ERROR in A2Edatetimepicker is not an NgModule

As far as I know, it's not possible to drop an Angular CLI project on Plunkr (on the other hand, making a production version of an Angular CLI project is as easy as ng build -prod).

[atais]

I remember using this library with my webpack project without any problems. I did not use Angular CLI though. Unfortunately, I do not have those sources anymore.

SystemJS version is worked out by @kashcode and I remember @4-Eyes told me that he used it with webpack without any problem. I think it might be worth adding those examples as offline sources into the project.

Currently, I have my head busy with another project but I think most of the issues are caused because it is not clear how to install/use this library.

[ghost]

I have noticed a few things:

• The file datetimepicker.module.ts doesn't end with a newline which is a convention.
• The file datetimepicker.directive.d.ts and datetimepicker.module.d.ts (which are distributed versions of datetimepicker.directive.ts and datetimepicker.module.ts) do not have annotations. The distributed versions are imported.

[ghost]

I've imported all Typescript sources of this project into my project and then it works: https://github.com/ronh73/datetimeng2

ng serve, ng build and ng build -prod succeed. Don't know yet whether I can start the production version. It will take me some time to find out.

[zhaoyufei9]

I have to try it in my own ways. ERROR in A2Edatetimepicker is not an NgModule, I confront the same question . so the first, you can move something like angular/core in ng2-eonasdan-datetimepicker's packages to devDependencies && delete the node_modules in ng2-eonasdan-datetimepicker, then npm install, and the second, import the directive to your feature module. you can try it.

[gharia]

Solution suggested by @ronh73 working for me. Just add style to .angular-cli.json as suggested by @souravmondal93:

"styles": [
        "styles.scss",
    "../node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css"
            ],

[kashcode]

I think this issue must be divided into three different issues. One for anguar-cli, one for SystemJS and for webpack. In each case are different setup.

[atais]

@kashcode Since angular-cli uses webpack I hope those could be solved together :-) Also, SystemJS works fine, I believe?

[amantarento]

this.dpElement.datetimepicker is not a function when using same plugin.

[ssgiant]

Ok guys, I managed to make it work with Angular 4 and CLI with webpack. These are my steps: I had jquery installed previously for bootstrap. so I referenced, the js and css file from the datetimepicker. In the .angular-cli.json file,

      "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "../node_modules/moment/moment.js",
        "../node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"
      ],

In app.module.ts file, I just imported the directive (I used src folder rather than the dist folder) similar to @ronh73

import { DateTimePickerDirective } from 'ng2-eonasdan-datetimepicker/src/datetimepicker.directive';
..................

  declarations: [
    DateTimePickerDirective,
...................

And in app.component.html file

<div class="input-group">
    <input class="form-control" a2e-datetimepicker [date]="startTime" [options]="dpOptions" (onChange)="dateChange($event)"/>
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
  </div>

And as for the this.dpElement.datetimepicker is not a function error, I commented out a line in \node_modules\ng2-eonasdan-datetimepicker\src\datetimepicker.directive.ts I believe it made reference to a different version of the jquery.

import { Directive, ElementRef, Renderer, Input, OnInit, EventEmitter, Output, OnChanges, SimpleChanges } from '@angular/core';
//import * as $ from 'jquery';
import {SetOptions} from 'eonasdan-bootstrap-datetimepicker';

I can do ng serve , ng build and ng build --prod successfully.

[atais]

@ssgiant great work. if you want you can make a PR and change certain things in the lib itself, to build it properly and make it easier to use. I would gladly accept the PR.

[atais]

i think it was done #27