Bug fixes and AOT compatibility / support

sconix commented 7 years ago

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.

sconix commented 7 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

sconix commented 7 years ago

@Alberplz I fixed this PR so that it does not conflict anymore, here are the changes that are include in this PR:

Fixes cpWidth and cpPreset* change detection bugs
Fixes demo app typo / wrong option for inline example
Fixes couple errors on initialization in certain situations
Fixes small styling issue when no buttons are used
Change from using dependencies to peerDependencies to avoid problems with multiple angular-core being installed
Changes from typings to @types packages (angular documentation has been updated to use @types packages as well from old typings tool)
Changes build system to produce AOT compatible version of the library (needed by latest angular-cli even when using JIT compilation)
Updates the example apps to work with the AOT compatible version of the library

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.

sconix commented 7 years ago

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.

sconix commented 7 years ago

Now the webpack example works as well. So everything should be working now.

AilisObrian commented 7 years ago

I'll check this tomorrow! THANKS ALWAYS!!!!

Alberplz commented 7 years ago

The gulp file is not compiling now

sconix commented 7 years ago

What do you mean that gulp file is not compiling? At least 'npm run build' runs without errors for me.

Alberplz commented 7 years ago

gulpfile.js doesn't generate the compiled files that are distributed in ./lib

sconix commented 7 years ago

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?

Alberplz commented 7 years ago

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?

sconix commented 7 years ago

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.

sconix commented 7 years ago

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?

sconix commented 7 years ago

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.

seopei commented 7 years ago

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;

karlhaas commented 7 years ago

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

karlhaas commented 7 years ago

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

sconix commented 7 years ago

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.

Alberplz / angular2-color-picker

Bug fixes and AOT compatibility / support #72