Not working with AOT on RC7

[szadrutsky]

As of RC6 directive is no longer on Component so manuals need to be updated. If we are movind directive into section of declarations and running aot compilation its throwing exception: Error: Unexpected value 'ColorPickerDirective' declared by the module 'AppModule'

[ronzeidman]

To fix AOT issues you need to first AOT compile the library and publish the resulting .metadata.json files.

references: https://github.com/PointInside/ng2-toastr/issues/48 https://github.com/angular/angular/issues/11262

[guikubivan]

Do you have any easy way to do this for a newbie? Like can you provide the resulting metadata.json files here? I'm currently getting bundle.js:18565 Uncaught Error: Unexpected value 'e' imported by the module 'AppModule' in the browser in a very simple project (just uses tsconfig..json).

[mwamufiya]

@guikubivan did you get it to work?

[ronzeidman]

Sorry, my comment was meant for @Alberplz since he needs to modify this repository. I'm following this thread since this picker is a nice-to-have for my app but I currently have no time to actually contribute, but it should be simple enough. If you want you can fork this repository then

• npm i @angular/compiler-cli and it's dependencies
• add an npm script "ngc": "ngc"
• npm run ngc
• put the created .json files in the same place as the compiled .js/d.ts files and it should work.
• If you have time, automate this process using gulp and create a pull request.

[webprofusion-chrisc]

@Alberplz can you confirm if you are still working on the color picker plugin? The AoT compilation issue affects all popular derivatives of Angular 2 as it has become the standard way to pre-compile for tree-shaking (rollup/webpack etc) and is used by both angular-cli and Ionic 2. This means that the current popular ways of building/bundling angular 2 apps are currently incompatible with this color picker module.

[mwamufiya]

@ronzeidman I had tried running the ngc based on the Angular tutorial here however I ran into issues.

After mucking around a little, I was finally able to get it to work by modifying the package.json to remove typings and use "@types/core-js": "^0.9.34", "@types/node": "^6.0.45",

ngc was also throwing errors about not being able to access items defined in the "DynamicCpModule" defined in Color-picker.directive.

I had to add an export to that and include it in the color-picker.module.

I'm not sure if this is the right approach, especially about removing typings in favor of @types. However, once these steps were taken, I'm able to get ngc to not fail on color-picker. and I can proceed with tree shaking in my app.

Update: the following properties of the "DialogComponent" class in color-picker.directive also need to be made public, otherwise AOT will throw errors.

cpPresetColors, cpPresetColors, cpCancelButton, show, cpHeight, cpWidth, top, left, position, cpPosition, arrowTop, hueSliderColor, slider, slider, outputColor, slider, alphaSliderColor, slider, format, hslaText, hslaText, hslaText, hslaText, format, rgbaText, rgbaText, rgbaText, rgbaText, format, hexText,

Thanks

[guikubivan]

@mwamufiya I ended up just importing the source code into my app.module.ts:

import { ColorPickerModule }      from "./color-picker/index";
@NgModule({
    imports:      [ ..., ColorPickerModule],
    ....
})

[hansl]

@Alberplz Hi Alberto. If you wish to fix this issue, simple run ngc as a replacement to tsc.

See this documentation: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

It should be relatively simple to do.

[webprofusion-chrisc]

@hansl I tried this on my own copy and didn't have any luck (no .metadata.json created when I tried it) , so it's not a drop in replacement and various upgrades are probably needed in the build process. I think the 'real' fix (for all such libraries) would be for AOT not to require the metadata.json to build (so if you can't optimise the compile then bundle the whole thing)