Skip to content
This repository has been archived by the owner on Sep 21, 2024. It is now read-only.

ERROR in CronEditorModule is not an NgModule #2

Closed
ravidannani opened this issue Sep 21, 2017 · 36 comments
Closed

ERROR in CronEditorModule is not an NgModule #2

ravidannani opened this issue Sep 21, 2017 · 36 comments
Assignees
Labels

Comments

@ravidannani
Copy link

First of all, Thank You for making it available for angular2.

I have below issue after installing the package and start the application.

"ERROR in CronEditorModule is not an NgModule"

Could you please help me.

@claudiuconstantin
Copy link
Owner

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

@ravidannani
Copy link
Author

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
Copy link
Owner

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
Copy link
Author

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

@claudiuconstantin
Copy link
Owner

claudiuconstantin commented Sep 21, 2017

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

@ravidannani
Copy link
Author

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
cron-issue

@claudiuconstantin
Copy link
Owner

claudiuconstantin commented Sep 21, 2017

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
Copy link

control-administration (3).zip

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

@bindu1552
Copy link

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.

image

@ravidannani
Copy link
Author

Hi brother,

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

Getting the below issue.

image

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

@claudiuconstantin
Copy link
Owner

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

@henrikcs
Copy link

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
Copy link

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

@MichaelMalony
Copy link

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.

@claudiuconstantin
Copy link
Owner

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

@xcorpio
Copy link

xcorpio commented Oct 16, 2017

Same issue

@User3290
Copy link

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
Copy link
Owner

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

@camposfyi
Copy link

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

@bindu1552
Copy link

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

@thudont
Copy link

thudont commented Nov 14, 2017

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:
image
I also added the cron editor in project and refer the project folder, but this error still occur.
Could you please help me?

@rajeshkdev
Copy link

rajeshkdev commented Dec 8, 2017

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

  1. Install the Bootstrap Package:

npm install bootstrap@3.3.7

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.,

@amolpowar
Copy link

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
Copy link

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

@claudiuconstantin
Copy link
Owner

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!

@layely2
Copy link

layely2 commented Feb 13, 2018

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 !

@spmanjunath
Copy link

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?

@ubiqs
Copy link

ubiqs commented May 7, 2018

I am also getting the same issue as
spmanjunath.

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

@PheelaV
Copy link

PheelaV commented May 27, 2018

@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
Copy link

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
Copy link

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
Copy link

ubiqs commented Jun 19, 2018 via email

@claudiuconstantin
Copy link
Owner

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!

@henrikcs
Copy link

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

@claudiuconstantin
Copy link
Owner

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

@davidst davidst closed this as completed Jun 19, 2019
@Saitejas1997

This comment has been minimized.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests