ERROR in CronEditorModule is not an NgModule

[claudiuconstantin]

ERROR in CronEditorModule is not an NgModule

[rajeshkdev]

I Made it Work, After spending few hours.

I have uploaded the POC in GitHub as a sample. https://github.com/rajeshkdev/Angular-4-Cron-Editor-with-Bootstrap-3.3.7. Just Download and do npm install from the project root directory.

OR

I followed these steps in order to get it work, I'm using Angular 4+ with CLI + Bootstrap 3.3.7.

Created Angular 4+ Project using the following command in the CLI:

ng new CheckGeek

Install the npm packages:

1. Install the Cron Editor Package

npm i cron-editor -S

2. Install the Bootstrap Package:

npm install [email protected]

In order to get the Look and Feel, Alter your .angular-cli.json file the "style" property must load the Bootstrap Css. It should look like below.,

"styles": [
            "../node_modules/bootstrap/dist/css/bootstrap.min.css",
            "styles.css"
        ],

I have updated the app.component.html and its looks like below.,

app.component.html

<div style="text-align:center">
    <h1>Rajesh updated - Angular 2+ Cron expression editor</h1>
</div>

<hr>

<div class="row">
    <div class="col-sm-2"></div>
    <div class="col-sm-8">
        <cron-editor [(cron)]="cronExpression" [disabled]="isCronDisabled" [(options)]="cronOptions">Cron here...</cron-editor>

        <div class="row alert alert-info" style="text-align:center">
            <h3>
                <b>{{cronExpression}}</b>
            </h3>
            <hr/>
        </div>
    </div>
    <div class="col-sm-2"></div>
</div>

I have updated the app.component.ts the relevant model property declarations are available here with it.

app.component.ts

import { Component } from '@angular/core';
import { NgModule } from '@angular/core';
import { CronOptions } from 'cron-editor/cron-editor';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  public cronExpression = '4 3 2 12 1/1 ? *';
  public isCronDisabled = false;
  public cronOptions: CronOptions = {
    formInputClass: 'form-control cron-editor-input',
    formSelectClass: 'form-control cron-editor-select',
    formRadioClass: 'cron-editor-radio',
    formCheckboxClass: 'cron-editor-checkbox',

    defaultTime: '10:00:00',

    hideMinutesTab: false,
    hideHourlyTab: false,
    hideDailyTab: false,
    hideWeeklyTab: false,
    hideMonthlyTab: false,
    hideYearlyTab: false,
    hideAdvancedTab: true,
    use24HourTime: true,
    hideSeconds: false
  };
}

I have updated the CronEditorModule imports in app.module.ts

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CronEditorModule } from 'cron-editor/cron-editor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CronEditorModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

As i followed @henrikcs comments, i was able to solve the "CronEditorModule is not an NgModule" when running npm start.

I was able to resolve this issue by adding @NgModule() on top of the cron-editor.module.d.ts File under /node_modules/cron-editor/components/cron-editor. It now looks like this:

import { NgModule } from "@angular/core";

@NgModule()
export declare class CronEditorModule {
}

And finally got the Results., Hope this helps.,

[MichaelMalony]

Also tried this with no luck:
npm install https://github.com/claudiuconstantin/cron-editor.git --save

However, if I pull down the repo and run the sample works OK.

[User3290]

We have the same issue. Are you going to solve this problem in closest time? 1 month ago topic has been opened and nothing done...

[claudiuconstantin]

I was able to reproduce the steps from @MichaelMalony (thanks!) - it seems that the module is not correctly packed for angular-cli usage. We're not using cli, but manual webpack in production and so we were able to successfully use cron-editor npm package in that scenario. I will investigate this.

For your concerns, @User3290, calm you're entitlement. I'm maintaining this open-source component in my little spare-time and I'm trying to make it useful for the community as my time allows. I'll gladly accept practical suggestions. Follow this thread for news on the topic

[claudiuconstantin]

Sorry for the long waiting time, I got some busy months lately. I'll try to figure this out and come with a fix soon. Thanks for all the info!

[spmanjunath]

I was getting "ERROR in Error: CronEditorModule is not an NgModule" and this was resolved by adding @NgModule to cron-editor.module.d.ts file. With this i am able to successfully run the application. However, building the application with --aot flag results in the following error,

_ERROR in : Can't bind to 'cron' since it isn't a known property of 'cron-editor'.

1. If 'cron-editor' is an Angular component and it has 'cron' input, then verify that it is part of this module.2. If 'cron-editor' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

][(cron)]="cronExpression" [disabled]="isCronDisabled" [(options)]="cronOptions">Cron here...

][disabled]="isCronDisabled" [(options)]="cronOptions">Cron here...

  <div class="r")_

Has anyone able to resolve this error, any workaround to fix this issue?

[claudiuconstantin]

Hey everyone, there's a new major version of this library, please test it and see if the issues above still occur. Thank you so much for your support!

[claudiuconstantin]

Please explain exactly what are you trying to do, which commands do you run? Attaching your packages.json file would be really helpful

[ravidannani]

Thanks for your quick response.

Below are the steps that I followed

1. Install the package $ npm i cron-editor -S
2. Imported into module file.
3. Added code in html .
   <cron-editor [(cron)]="cronExpression">
4. Finally ran the app.
   And getting the issue.

Attached is my package.json.

Please let me know if I went wrong.

package1.txt

[claudiuconstantin]

The usage should look something like this:

import { NgModule } from "@angular/core";
import { CronEditorModule } from "cron-editor/cron-editor";

@NgModule({
    imports: [CronEditorModule]
})

export class ExampleModule {
}

[ravidannani]

Yes, same thing I did.. But getting issue.

[claudiuconstantin]

Can you paste a more detailed error/call stack? Also do check out this thread, it might be an angular/cli issue

[ravidannani]

Actually I was following the same steps that you provided (even mentioned above). But getting this issue. I tried in multiple projects to see. But getting the same issue.

I have attached the console log issue. Please see

[claudiuconstantin]

This type of error can happen when you're incorrectly using the imports/declarations/providers sections in your NgModule (examples here). Can you attach your "ControlAdministrationModule"?

[bindu1552]

control-administration (3).zip

attached is the control administration and package.json
below i'm adding the [error:]

[bindu1552]

After integrating the code .I have added cron-editor in provider to work to resolve the ngmodule issue

now i'm getting the below error.

[ravidannani]

Hi brother,

After I have followed all the steps mentioned in the below link,
https://github.com/claudiuconstantin/cron-editor

Getting the below issue.

Could you please tell me if something i missed. Thanks in advance for your great help.

[claudiuconstantin]

Can you check out the new 0.1.6 release and see if the issue is still reproducing?

[henrikcs]

Hi!
I also got the error "CronEditorModule is not an NgModule" when running npm run start:

ERROR in Error: CronEditorModule is not an NgModule
    at _getNgModuleMetadata (C:\Users\henri\Documents\MEGA\Arbeit\Datea\Datea_git\LiquidityPlanner\src\main\webapp\node_modules\@angular\compiler-cli\src\ngtools_impl.js:140:15)
    at _extractLazyRoutesFromStaticModule (C:\Users\henri\Documents\MEGA\Arbeit\Datea\Datea_git\LiquidityPlanner\src\main\webapp\node_modules\@angular\compiler-cli\src\ngtools_impl.js:109
:26)
    at C:\Users\henri\Documents\MEGA\Arbeit\Datea\Datea_git\LiquidityPlanner\src\main\webapp\node_modules\@angular\compiler-cli\src\ngtools_impl.js:129:27
    at Array.reduce (native)
    at _extractLazyRoutesFromStaticModule (C:\Users\henri\Documents\MEGA\Arbeit\Datea\Datea_git\LiquidityPlanner\src\main\webapp\node_modules\@angular\compiler-cli\src\ngtools_impl.js:128
:10)
    at Object.listLazyRoutesOfModule (C:\Users\henri\Documents\MEGA\Arbeit\Datea\Datea_git\LiquidityPlanner\src\main\webapp\node_modules\@angular\compiler-cli\src\ngtools_impl.js:53:22)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\Users\henri\Documents\MEGA\Arbeit\Datea\Datea_git\LiquidityPlanner\src\main\webapp\node_modules\@angular\compiler-cli\src\ngtoo
ls_api.js:91:39)
    at AotPlugin._getLazyRoutesFromNgtools (C:\Users\henri\Documents\MEGA\Arbeit\Datea\Datea_git\LiquidityPlanner\src\main\webapp\node_modules\@ngtools\webpack\src\plugin.js:207:44)
    at _donePromise.Promise.resolve.then.then.then.then.then (C:\Users\henri\Documents\MEGA\Arbeit\Datea\Datea_git\LiquidityPlanner\src\main\webapp\node_modules\@ngtools\webpack\src\plugi
n.js:443:24)
    at process._tickCallback (internal/process/next_tick.js:109:7)

webpack: Failed to compile.

I was able to resolve this issue by adding @NgModule() on top of the cron-editor.module.d.ts-File under /node_modules/cron-editor/components/cron-editor. It now looks like this:

import { NgModule } from "@angular/core";

@NgModule()
export declare class CronEditorModule {
}

However, when trying to run an AOT-Compilation, I am getting the following error:

ERROR in Error: Template parse errors:
Can't bind to 'cron' since it isn't a known property of 'cron-editor'.
1. If 'cron-editor' is an Angular component and it has 'cron' input, then verify that it is part of this module.
2. If 'cron-editor' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
</ul>

<cron-editor [ERROR ->][(cron)]="cronExpression" [options]="cronOptions"></cron-editor>
"): ng:///C:/Users/henri/Desktop/temp/cron-test/src/app/app.component.html@20:13
Can't bind to 'options' since it isn't a known property of 'cron-editor'.
1. If 'cron-editor' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'cron-editor' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
</ul>

<cron-editor [(cron)]="cronExpression" [ERROR ->][options]="cronOptions"></cron-editor>
"): ng:///C:/Users/henri/Desktop/temp/cron-test/src/app/app.component.html@20:39
'cron-editor' is not a known element:
1. If 'cron-editor' is an Angular component, then verify that it is part of this module.
2. If 'cron-editor' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</ul>

[ERROR ->]<cron-editor [(cron)]="cronExpression" [options]="cronOptions"></cron-editor>
"): ng:///C:/Users/henri/Desktop/temp/cron-test/src/app/app.component.html@20:0
    at Error (native)
    at syntaxError (C:\Users\henri\Desktop\temp\cron-test\node_modules\@angular\compiler\bundles\compiler.umd.js:1729:34)
    at TemplateParser.parse (C:\Users\henri\Desktop\temp\cron-test\node_modules\@angular\compiler\bundles\compiler.umd.js:12967:19)
    at AotCompiler._compileComponent (C:\Users\henri\Desktop\temp\cron-test\node_modules\@angular\compiler\bundles\compiler.umd.js:24189:39)
    at C:\Users\henri\Desktop\temp\cron-test\node_modules\@angular\compiler\bundles\compiler.umd.js:24070:55
    at Array.forEach (native)
    at AotCompiler._compileImplFile (C:\Users\henri\Desktop\temp\cron-test\node_modules\@angular\compiler\bundles\compiler.umd.js:24053:20)
    at C:\Users\henri\Desktop\temp\cron-test\node_modules\@angular\compiler\bundles\compiler.umd.js:23964:87
    at Array.map (native)
    at AotCompiler.emitAllImpls (C:\Users\henri\Desktop\temp\cron-test\node_modules\@angular\compiler\bundles\compiler.umd.js:23964:52)
    at CodeGenerator.emit (C:\Users\henri\Desktop\temp\cron-test\node_modules\@angular\compiler-cli\src\codegen.js:42:46)
    at C:\Users\henri\Desktop\temp\cron-test\node_modules\@angular\compiler-cli\src\codegen.js:33:61
    at process._tickCallback (internal/process/next_tick.js:109:7)

I am using the 0.1.6 version of your project.

npm version returns the following:

npm version
{ 'cron-test': '0.0.0',
  npm: '3.10.10',
  ares: '1.10.1-DEV',
  http_parser: '2.7.0',
  icu: '58.2',
  modules: '48',
  node: '6.11.3',
  openssl: '1.0.2l',
  uv: '1.11.0',
  v8: '5.1.281.107',
  zlib: '1.2.11' }

ng-version returns the following:

@angular/cli: 1.4.2
node: 6.11.3
os: win32 x64
@angular/animations: 4.4.3
@angular/common: 4.4.3
@angular/compiler: 4.4.3
@angular/core: 4.4.3
@angular/forms: 4.4.3
@angular/http: 4.4.3
@angular/platform-browser: 4.4.3
@angular/platform-browser-dynamic: 4.4.3
@angular/router: 4.4.3
@angular/cli: 1.4.2
@angular/compiler-cli: 4.4.3
@angular/language-service: 4.4.3
typescript: 2.3.4

[MichaelMalony]

I'm seeing the same thing.

Steps to reproduce:

• Create new project: ng new my-app
• Add cron-editor: npm i cron-editor -S
• Update AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CronEditorModule } from "cron-editor/cron-editor";
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
	CronEditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• Run: ng serve --open

Error:

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
10% building modules 8/9 modules 1 active ...ode_modules\style-loader\addDate: 2017-10-10T16:08:15.216Z
Hash: fdbd5bb6930b28207d29
Time: 2075ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 1.06 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 323 bytes {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.3 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 338 kB [initial] [rendered]
ERROR in Error: CronEditorModule is not an NgModule
at _getNgModuleMetadata (D:\User Files\mlm\Desktop\test2\my-app\node_modules@angular\compiler-cli\src\ngtools_impl.js:140:15)
at _extractLazyRoutesFromStaticModule (D:\User Files\mlm\Desktop\test2\my-app\node_modules@angular\compiler-cli\src\ngtools_impl.js:109:26)
at D:\User Files\mlm\Desktop\test2\my-app\node_modules@angular\compiler-cli\src\ngtools_impl.js:129:27
at Array.reduce (native)
at _extractLazyRoutesFromStaticModule (D:\User Files\mlm\Desktop\test2\my-app\node_modules@angular\compiler-cli\src\ngtools_impl.js:128:10)
at Object.listLazyRoutesOfModule (D:\User Files\mlm\Desktop\test2\my-app\node_modules@angular\compiler-cli\src\ngtools_impl.js:53:22)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (D:\User Files\mlm\Desktop\test2\my-app\node_modules@angular\compiler-cli\src\ngtools_api.js:91:39)
at AotPlugin._getLazyRoutesFromNgtools (D:\User Files\mlm\Desktop\test2\my-app\node_modules@ngtools\webpack\src\plugin.js:207:44)
at _donePromise.Promise.resolve.then.then.then.then.then (D:\User Files\mlm\Desktop\test2\my-app\node_modules@ngtools\webpack\src\plugin.js:443:24)
at process._tickCallback (internal/process/next_tick.js:109:7)
webpack: Failed to compile.

ng version output:

@angular/cli: 1.4.5
node: 6.11.2
os: win32 x64
@angular/animations: 4.4.4
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/router: 4.4.4
@angular/cli: 1.4.5
@angular/compiler-cli: 4.4.4
@angular/language-service: 4.4.4
typescript: 2.3.4

[claudiuconstantin]

There seems to be a problem with the way we pack the module. I'll look into it

[xcorpio]

Same issue

[camposfyi]

I'm getting the same issue:
ERROR in Error: CronEditorModule is not an NgModule

[bindu1552]

instead of giving npm reference ..add the cron editor in project and refer the project folder it may resolve the issue.

[thudont]

Hi,
I'm using cron-editor v0.1.6 for my Angular2 project + node v6.0.38. When I load page, I get this error:

I also added the cron editor in project and refer the project folder, but this error still occur.
Could you please help me?

[amolpowar]

After following @henrikcs suggestion I could make it work

import { NgModule } from "@angular/core";

@NgModule()
export declare class CronEditorModule {
}

Do you have any plans for committing the changes?

[FreezeSoul]

same error in my project. at last , i copy the src into my project ....

[layely2]

Any update ?
Using manual webpack, I got the same error ... and looking forward to a fix.
Suggested workarround above works but is far from good practices !

[ubiqs]

I am also getting the same issue as
spmanjunath.

Will this component work with AOT ?
Some workaround that can be done ?

[PheelaV]

@spmanjunath The exact same issue here too, It wowks fine and dandy on the test server using ng serve, but when I tri to build for production, it eventually builds and right after that I get that error.

WHAAAAAAAAAA -> My build just succeded, the only thing I did was that I tried several other options, like making a new app from scratch just to test the cron editor. I started to get frustraited so I went back and tried again. Boom, magick, it builds. I am kinda happy, because I have spent the last 2 days modifying this editor to use @angular/material2 instead of bootstrap and now it finally builds.

[sainathraoghanate]

I am also getting the same issue as @henrikcs
Can anyone help me out to close this issue?

ERROR in : 'cron-editor' is not a known element:

1. If 'cron-editor' is an Angular component, then verify that it is part of this module.
2. If 'cron-editor' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
   ("-editor [(cron)]="cronExpression" [options]="cronOptions"> -->
   [ERROR ->]Cron here...
   
   <!-- Genera")

[sainathraoghanate]

After a long struggle, it worked for me.
I removed the cron-edito package from the package.json.
I created on cron folder with the required files and added the necessary files to it.
Then I build for the production. It succeeded.

[ubiqs]

Hi can you share the files on GitHub? Thanks

…

On Tue, Jun 19, 2018, 11:07 AM Sainath Rao Ghante ***@***.***> wrote: After a long struggle, it worked for me. I removed the cron-edito package from the package.json. I created on cron folder with the required files and added the necessary files to it. Then I build for the production. It succeeded. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIGwnffZmzgUShYXvIvTq_iQsKJRVaR7ks5t-I4bgaJpZM4Pe8qY> .

[henrikcs]

This issue seems to be resolved. With the new version of this module, I can build my project without any problems.

[claudiuconstantin]

Glad to hear that, @henrikcs! I'll leave this open for a few days for any additional feedback, then I'll consider it Resolved

[Saitejas1997]

How to have minutes tab as default?