Comments (36)
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:
- Install the Cron Editor Package
npm i cron-editor -S
- 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.,
from cron-editor.
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.
from cron-editor.
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...
from cron-editor.
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
from cron-editor.
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!
from cron-editor.
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'.
- 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.
- To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<div class="r")_
Has anyone able to resolve this error, any workaround to fix this issue?
from cron-editor.
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!
from cron-editor.
Please explain exactly what are you trying to do, which commands do you run? Attaching your packages.json
file would be really helpful
from cron-editor.
Thanks for your quick response.
Below are the steps that I followed
- Install the package $ npm i cron-editor -S
- Imported into module file.
- Added code in html .
<cron-editor [(cron)]="cronExpression"> - Finally ran the app.
And getting the issue.
Attached is my package.json.
Please let me know if I went wrong.
from cron-editor.
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 {
}
from cron-editor.
Yes, same thing I did.. But getting issue.
from cron-editor.
Can you paste a more detailed error/call stack? Also do check out this thread, it might be an angular/cli issue
from cron-editor.
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
from cron-editor.
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"?
from cron-editor.
control-administration (3).zip
attached is the control administration and package.json
below i'm adding the [error:]
from cron-editor.
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.
from cron-editor.
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.
from cron-editor.
Can you check out the new 0.1.6
release and see if the issue is still reproducing?
from cron-editor.
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
from cron-editor.
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
from cron-editor.
There seems to be a problem with the way we pack the module. I'll look into it
from cron-editor.
Same issue
from cron-editor.
I'm getting the same issue:
ERROR in Error: CronEditorModule is not an NgModule
from cron-editor.
instead of giving npm reference ..add the cron editor in project and refer the project folder it may resolve the issue.
from cron-editor.
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?
from cron-editor.
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?
from cron-editor.
same error in my project. at last , i copy the src into my project ....
from cron-editor.
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 !
from cron-editor.
I am also getting the same issue as
spmanjunath.
Will this component work with AOT ?
Some workaround that can be done ?
from cron-editor.
@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.
from cron-editor.
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:
- If 'cron-editor' is an Angular component, then verify that it is part of this module.
- 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")
from cron-editor.
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.
from cron-editor.
from cron-editor.
This issue seems to be resolved. With the new version of this module, I can build my project without any problems.
from cron-editor.
Glad to hear that, @henrikcs! I'll leave this open for a few days for any additional feedback, then I'll consider it Resolved
from cron-editor.
How to have minutes tab as default?
from cron-editor.
Related Issues (20)
- Where is the CSS? HOT 11
- Render not working HOT 7
- Wrong expression generated HOT 1
- Translations HOT 4
- `hideMinutes` of Undefined
- Component value is not nullable
- use24HourTime AM/PM binding incorrect.
- The editor is not display when hideMonthlyTab is true as default HOT 1
- Generated wrong expression for seconds.
- Instantiate with default values while reopening cron editor
- Instantiate with default values while reopening cron editor HOT 1
- How to set minutes tab as default initially ?
- How to show the value use formcontrol in cron editor
- Type '{}' is not assignable to type 'string' HOT 1
- How to get the separate values for all fields.
- In Daily just show Every day or Every working day. How to implement this?
- How to generate CRON expression in angular 12
- autofill cron expression comes from the backend
- Modify UI with help of angular/ionic library
- drop-down arrow is not visible
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cron-editor.