Closed sconix closed 6 years ago
If somebody wants to try AOT compatible version of this library you can get one installing the library with npm from: git://github.com/zefoy/angular2-color-picker.git#npm-package
@Alberplz I fixed this PR so that it does not conflict anymore, here are the changes that are include in this PR:
Let me know if you want me to change something or something is not working. I did quick tests after clearing the conflicts and will do some more now.
I just noticed that making clean npm install resulted unworking webpack example so there was some version change that broke it. I will make a commit to fix that soon.
Otherwise I tested that the systemjs example works and the library also works in our angular-cli based project.
Now the webpack example works as well. So everything should be working now.
I'll check this tomorrow! THANKS ALWAYS!!!!
The gulp file is not compiling now
What do you mean that gulp file is not compiling? At least 'npm run build' runs without errors for me.
gulpfile.js doesn't generate the compiled files that are distributed in ./lib
For me it does, if I wipe lib directory and run npm run build all the files are generated into the lib directory. Do you get some errors or anything?
Stops at compile:lib task Until now the ./lib was compatible with systemjs and webpack, there are 2 examples showing that, could be posible having aot too?
I will try once more with clean npm install if I could get the problem re-produced and check the lib task what could be problematic there. I am not very familiar with gulp, but I looked at angular libs how they had gulp configured for aot building and studied it so that I would like to say it should be correctly setup.
Did you have Linux/OSX or windows setup?
Yes the lib is still compatible with systemjs and webpack and the examples work and sure there could be one example for aot as well. And I can make one next week if you want, but this week I am bit busy. Basically it is almost exactly like the webpack example, but with couple configuration changes so there could be aot build/run script added for the webpack example.
Even with fresh npm install I don't get any errors when running build. The compile:lib task only runs the angular ngc compiler so it sound weird that you would have problems with that. You don't get any errors it just stops?
I had bit of spare time so I added the built:aot and start:aot for the webpack example with the needed webpack configuration. So now the example has also an example for building with aot.
your change are not working for us because you also have to make private template members public (see: https://medium.com/@isaacplmann/making-your-angular-2-library-statically-analyzable-for-aot-e1c6f3ebedd5#.l6z4qgvyi) we are using angular-seed (https://github.com/mgechev/angular-seed) with aot and rollup.js can you please change DialogComponent to this:
export class DialogComponent implements OnInit, AfterViewInit {
public cpPosition: string;
public cpPositionOffset: number;
public cpOutputFormat: string;
public cpPresetLabel: string;
public cpPresetColors: Array<string>;
public cpCancelButton: boolean;
public cpCancelButtonClass: string;
public cpCancelButtonText: string;
public cpOKButton: boolean;
public cpOKButtonClass: string;
public cpOKButtonText: string;
public cpHeight: number;
public cpWidth: number;
public cpIgnoredElements: any;
public cpDialogDisplay: string;
public cpSaveClickOutside: boolean;
public cpAlphaChannel: string;
public rgbaText: Rgba;
public hslaText: Hsla;
public selectedColor: string;
public alphaSliderColor: string;
public hueSliderColor: string;
public slider: SliderPosition;
public show: boolean;
public top: number;
public left: number;
public position: string;
public format: number;
public hexText: string;
public arrowTop: number;
private hsva: Hsva;
private outputColor: string;
private sliderDimMax: SliderDimension;
private directiveInstance: any;
private initialColor: string;
private directiveElementRef: ElementRef;
private listenerMouseDown: any;
private listenerResize: any;
private dialogArrowSize: number = 10;
private dialogArrowOffset: number = 15;
@ViewChild('hueSlider') hueSlider: any;
@ViewChild('alphaSlider') alphaSlider: any;
In addition to the problem @seopei mentioned, your version can't be used in dev mode with angular-seed (https://github.com/mgechev/angular-seed).
http://localhost:5555/node_modules/traceur.js Failed to load resource: the server responded with a status of 404 (Not Found)
localhost/:99 (SystemJS) XHR error (404 Not Found) loading http://localhost:5555/node_modules/traceur.js
Error: XHR error (404 Not Found) loading http://localhost:5555/node_modules/traceur.js
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:5555/node_modules/zone.js/dist/zone.js?1486893066339:1039:29) [
@sconix tried https://github.com/zefoy/ngx-color-picker. The problem mentioned by @seopei also exists in your project.
Using your UMD Bundles works in dev mode but not with AoT and Rollup.
Error: 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 /home/karl/Work/cnc/feedbackr/Frontend/node_modules/ngx-color-picker/node_modules/@angular/core/src/di/metadata.d.ts, resolving symbol OpaqueToken in /home/karl/Work/cnc/feedbackr/Frontend/node_modules/ngx-color-picker/node_modules/@angular/core/src/di/opaque_token.d.ts, resolving symbol OpaqueToken in /home/karl/Work/cnc/feedbackr/Frontend/node_modules/ngx-color-picker/node_modules/@angular/core/src/di/opaque_token.d.ts
at SyntaxError.BaseError [as constructor] (/home/karl/Work/cnc/feedbackr/Frontend/node_modules/@angular/compiler/bundles/compiler.umd.js:1597:31)
at new SyntaxError (/home/karl/Work/cnc/feedbackr/Frontend/node_modules/@angular/compiler/bundles/compiler.umd.js:1795:20)
at simplifyInContext (/home/karl/Work/cnc/feedbackr/Frontend/node_modules/@angular/compiler/bundles/compiler.umd.js:25783:27)
at StaticReflector.simplify (/home/karl/Work/cnc/feedbackr/Frontend/node_modules/@angular/compiler/bundles/compiler.umd.js:25795:17)
at StaticReflector.annotations (/home/karl/Work/cnc/feedbackr/Frontend/node_modules/@angular/compiler/bundles/compiler.umd.js:25291:64)
at NgModuleResolver.resolve (/home/karl/Work/cnc/feedbackr/Frontend/node_modules/@angular/compiler/bundles/compiler.umd.js:17771:86)
at CompileMetadataResolver.getNgModuleMetadata (/home/karl/Work/cnc/feedbackr/Frontend/node_modules/@angular/compiler/bundles/compiler.umd.js:18272:64)
at addNgModule (/home/karl/Work/cnc/feedbackr/Frontend/node_modules/@angular/compiler/bundles/compiler.umd.js:25053:62)
at /home/karl/Work/cnc/feedbackr/Frontend/node_modules/@angular/compiler/bundles/compiler.umd.js:25064:18
at Array.forEach (native)
Compilation failed
In https://medium.com/@isaacplmann/getting-your-angular-2-library-ready-for-aot-90d1347bcad#.rawiw332r I found:
If you use webpack to build your library, you’ll need to run ngc first and then run webpack on the compiled code. This issue is tracking changes needed to have webpack manage the whole process. This repo is an example of using the npm run ngc && npm run webpack strategy.
Please can you make issues to my repo (https://github.com/zefoy/ngx-color-picker) directly so I can fix them. I have only used angular-cli / example apps for testing so its very likely that there are some issues left on other build systems but I will gladly fix them. I don't want to pollute this project at least not before these fixes are merged.
Modified the building process to produce AOT compatible library and modified examples accordingly. Also upgraded to using newer typescript and angular versions.
This PR also includes the cpWidth, preset change detection and example app fixes.