Comments (9)
@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
from angular2-color-picker.
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
angular/angular#11262
from angular2-color-picker.
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).
from angular2-color-picker.
@guikubivan did you get it to work?
from angular2-color-picker.
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.
from angular2-color-picker.
@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.
from angular2-color-picker.
@mwamufiya I ended up just importing the source code into my app.module.ts:
import { ColorPickerModule } from "./color-picker/index";
@NgModule({
imports: [ ..., ColorPickerModule],
....
})
from angular2-color-picker.
@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.
from angular2-color-picker.
@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)
from angular2-color-picker.
Related Issues (20)
- Can't bind to 'colorPicker' since it isn't a known property of 'input' HOT 19
- IE10 - Colorpicker not closing HOT 1
- Using the 'top' position causes weird functionality HOT 3
- Positioning seems to be broken if the input field is inside a modal
- Dialog height only being set once. HOT 2
- System.config.js can't find ionic 3 angular 2
- Issue when loading ColorPickerModule in App Module HOT 10
- Is there any event binded to ok button click ? HOT 2
- error in build --proad --aot mode
- App Stops loading after adding colorPicker
- Can compile in Aot mode
- cpType is undefined HOT 1
- Angular5 issue HOT 1
- Cannot read property 'a' of undefined HOT 3
- Getting Error for ng build--aot HOT 4
- Angular Application is taking more than 20 seconds to load application
- Error in npm istall HOT 1
- ERROR in node_modules/angular2-color-picker/node_modules/rxjs/Subject.d.ts(24,5): HOT 3
- cpDialogDisplay=inline with a custom cpWidth leads to unusable hue slider
- Cancel button works in Firefox but not in Google Chrome
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 angular2-color-picker.