Bug fixes and AOT compatibility / support #72

sconix · 2017-01-03T09:22:16Z

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 · 2017-01-03T09:23:14Z

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 · 2017-01-30T16:53:28Z

@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 · 2017-01-30T16:54:29Z

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 · 2017-01-30T17:08:12Z

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

AilisObrian · 2017-01-31T13:13:37Z

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

Alberplz · 2017-01-31T14:50:33Z

The gulp file is not compiling now

sconix · 2017-01-31T17:33:04Z

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

Alberplz · 2017-02-01T05:13:47Z

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

sconix · 2017-02-01T07:12:41Z

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 · 2017-02-01T17:23:55Z

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 · 2017-02-01T21:24:30Z

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 · 2017-02-02T14:51:32Z

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 · 2017-02-02T16:31:15Z

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 · 2017-02-11T18:22:42Z

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 · 2017-02-12T10:19:42Z

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 · 2017-02-12T11:34:45Z

@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 · 2017-02-12T12:27:18Z

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.

sconix added 4 commits January 3, 2017 11:07

Fixed permanent color picker displaying in the demo apps

2f3daac

Newer angular / typescript and aot compatibility fixes

286ab0a

Updated examples to work with new library format

cc12b8b

Newer library files from new the build

55424cc

sconix changed the title ~~Bug fixes and AOT compatibility changes~~ Bug fixes and AOT compatibility / support Jan 3, 2017

sconix added 3 commits January 30, 2017 18:35

Fixed merge conflicts and newer build files

12d774d

Fixed gulpfile for newer gulp and removed unneeded changes

3a86d41

Removed more unneeded changes

6abcc96

Fixed webpack example configuration

0d2e79b

Added aot build and start scripts for the webpack example

b5cc38b

Small fix for webpack aot configs

538d440

karlhaas mentioned this pull request Feb 12, 2017

UMD bundles not working in AoT mode zefoy/ngx-color-picker#2

Closed

Changed template variables to be public

d2748dd

sconix closed this Nov 19, 2017

Bug fixes and AOT compatibility / support #72

Bug fixes and AOT compatibility / support #72

Uh oh!

Conversation

sconix commented Jan 3, 2017

Uh oh!

sconix commented Jan 3, 2017

Uh oh!

sconix commented Jan 30, 2017

Uh oh!

sconix commented Jan 30, 2017

Uh oh!

sconix commented Jan 30, 2017

Uh oh!

AilisObrian commented Jan 31, 2017

Uh oh!

Alberplz commented Jan 31, 2017

Uh oh!

sconix commented Jan 31, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Alberplz commented Feb 1, 2017

Uh oh!

sconix commented Feb 1, 2017

Uh oh!

Alberplz commented Feb 1, 2017

Uh oh!

sconix commented Feb 1, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sconix commented Feb 2, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sconix commented Feb 2, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

seopei commented Feb 11, 2017

Uh oh!

karlhaas commented Feb 12, 2017

Uh oh!

karlhaas commented Feb 12, 2017

Uh oh!

sconix commented Feb 12, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

sconix commented Jan 31, 2017 •

edited

Loading

sconix commented Feb 1, 2017 •

edited

Loading

sconix commented Feb 2, 2017 •

edited

Loading

sconix commented Feb 2, 2017 •

edited

Loading

sconix commented Feb 12, 2017 •

edited

Loading