Closed Abrissirba closed 7 years ago
In our team we're trying to import and export ColorPickerModule
, which seems to be present in 'angular2-color-picker'
, and we're getting what seems to be a similar error at runtime:
compiler.umd.js:14126 Uncaught Error: Unexpected value 'ColorPickerModule' imported by the module 'SharedModule'
where SharedModule
is a custom module where we import and export commonly used third-party modules (e.g. angular's FormsModule, ReactiveFormsModule, as well as ColorPickerModule).
EDIT
Also, if dropping completely ColorPickerModule and just working with plain "old" service and directive, ColorPickerDirective cannot be added to custom module declarations:
compiler.umd.js:14174 Uncaught Error: Unexpected value 'ColorPickerDirective' declared by the module 'SharedModule'
and of course not even re-exported, so as soon as some component view uses that, following console error shows up:
main.browser.ts:17 Error while bootstrapping application. Error: Template parse errors:
Can't bind to 'colorPicker' since it isn't a known property of 'input'. ("ound"
[style.background]="finalColorBackground"
[ERROR ->][colorPicker]="finalColorBackground" cpNoAlpha
(colorPickerChange)="onColor"): RelaxingMainComponent@34:25
Any news on this? We're now on the final release of ng2, would be great if this issue could be fixed, because there are A LOT of webpack users out there.
Thx!
One way to "fix" this. Is just to copy paste the typescript source code into a folder of your own project and just import the ColorPickerModule. Just make sure you have this in your webpack config (or something a like) and the sass-loader and node-sass dep installed
{
test: /\.scss$/,
exclude: root('src', 'app'),
loader: ExtractTextPlugin.extract({ notExtractLoader: 'style-loader', loader: 'css?sourceMap!postcss!sass' })
},
{
test: /\.scss$/,
include: root('src', 'app'),
loader: 'raw!postcss!sass'
},
@webtrix yep we were doing the same with a fork of this project: manually copying library source code into our own project subfolder.
Having seen recent commits on original library, we opted to switch back to it, but now we're stuck on those errors.
This should be a valid example of another library being adapted to angular-cli compiler, so to generate metadata files:
BTW @webtrix the copy-source-in-place trick does not seem to work for us now. All is fine at build time and when browsing the application. Then when user clicks the field to open color picker popup, the following error shows up in console:
EXCEPTION: Uncaught (in promise): Error: Template parse errors:
'web-admin-app' is not a known element:
1. If 'web-admin-app' is an Angular component, then verify that it is part of this module.
2. If 'web-admin-app' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
<body>
[ERROR ->]<web-admin-app>
<div class="col-md-12 app-loading-page">
<p class="text-muted">"): DialogComponent@19:4
but that doesn't make a lot of sense: the reported component is the root app component, which of course has already been parsed correctly as the application runs already in client. That is the actual original body of page, before angular kicks in.
It looks like somehow the DialogComponent tries to "inflate" the whole body again. Maybe it's an issue related to dynamic component creation, don't know really. Or maybe is due to the presence of BrowserModule
within library: there were other libraries where this was mentioned as an issue, as they should import some common module or what else, don't remember precisely.
EDIT
After some debugging, error happens somewhere within this call in ColorPickerDirective:
this.compiler.compileModuleAndAllComponentsAsync(DynamicCpModule) // <--
.then(factory => {
I don't use the Angular-CLI since it still has to many issues, certainly when using 3rd party libraries.
We're not using it either, we're on webpack too. The angular-cli seems to be needed for the author, in order to build the library so to generate metadata files.
We copied source code in our project and are getting that error. It looks like dynamic component creation has changed:
Equivalent of $compile in Angular 2
We're still on RC7 and get the mentioned error. Does this library currently work for you, when copying its source code? Thanks
That seems to be strange... I'm using webpack as well and I have had no problems what so ever.
I created a folder in my project called "color-picker". I pasted all the files in there (Typescript only of course) and the template folder. Then added the sass-loader and node-sass to my webpack config.
And then in my app, I added "ColorPickerModule" in the imports array and that was it, all works fine. I'm on Angular 2.0.0
Thanks. Moved to angular 2 final. Initially had still same issue. Then, after some experiments with webpack CSS loaders, it seems like issue is somehow related to color picker CSS not being correctly included during build phase.
If you copied library source code as-is (styleUrls: ['./templates/default/color-picker.css']
) and you're on webpack, I guess you're chaining angular2-template-loader after (awesome-?)typescript loader in order to turn template/style URLs into inlined template/style + require()
calls. Is that the case?
Until now, the only way we were able to make this work is with this change to color-picker.directive.ts:
@Component({
selector: 'color-picker',
//templateUrl: './templates/default/color-picker.html',
//styleUrls: ['./templates/default/color-picker.css']
template: require('./templates/default/color-picker.html'),
styles: [require('./templates/default/color-picker.scss')], // <-- note also extension change
})
// ...
and then of course enable dedicated Sass loading in webpack, with following loader:
{
test: [/component\.scss$/, /color-picker\.scss$/],
loaders: ['raw-loader', 'postcss-loader', 'sass-loader'],
// ...
}
EDIT
Further improvement by chaining angular2-template-loader
. This brought back template/style URLs as original, but still with SCSS extension for style:
@Component({
selector: 'color-picker',
templateUrl: './templates/default/color-picker.html',
//styleUrls: ['./templates/default/color-picker.css']
styleUrls: ['./templates/default/color-picker.scss'] // <-- note extension
})
// ...
Sorry, I'm updating the library very soon. Adding this line (in gulpfile.js): .pipe(gulp.dest('lib'))
after ->.pipe(inlineNg2Template({base: '/lib'})) in compile task should solve the problem.
Using angular cli this also fails. I think its due to webpack and barrels. See: https://github.com/angular/angular-cli/issues/1831
Which implies that export * from ...
does not work, you have to explicitly export {Item1, Item2, etc} from ...
.
I tried modifying node_modules/angular2_color_picker/index.ts to:
export {Hsva, Hsla, Rgba, SliderPosition, SliderDimension} from './lib/classes';
export {ColorPickerDirective} from './lib/color-picker.directive';
export {ColorPickerModule} from './lib/color-picker.module';
export {ColorPickerService} from './lib/color-picker.service';
no luck tho, still the same issue.
@BrainCrumbz you shouldn't use the .css, but the real source and that's the .scss file indeed. Angular doesn't care if it's .css of or .scss as long as you have the right loaders in your webpack everything is fine.
I'll lay out the steps one more time for everybody else.
color-picker
src
folder into the folder you've just created"sass-loader": "4.0.2",
and "node-sass": "^3.10.0",
to your package.json
dev deps and run npm update
.scss
to your config.resolve.extentions
arrayconfig.module.loaders
{
test: /\.scss$/,
exclude: root('src', 'app'),
loader: ExtractTextPlugin.extract({ notExtractLoader: 'style-loader', loader: 'css?sourceMap!postcss!sass' })
},
{
test: /\.scss$/,
include: root('src', 'app'),
loader: 'raw!postcss!sass'
},
app.module
file and add ColorPickerModule
to your imports
array, or if you use the color picker in a specific module go to that file and add ColorPickerModule
to that imports
array.Run your app, you should be good...
Just to be clear, the original library source code references CSS, not SCSS:
styleUrls: ['./templates/default/color-picker.css']
So it's not that I'm intentionally using CSS. I got that from original source, and had then to change it in order to work.
So if you "just" copy the original source, leaving CSS extension, very likely the SCSS loading is not really being involved, probably CSS file is processed by its corresponding loader I guess.
That's a typo (for webpack users), it needs to point to '.scss' and then it works fine. Because in the template folder, the file itself is a '.scss' file.
Since webpack will use the actual path of the file, that isn't there, it's normal it will throw an error. If you're using Gulp or something else, the compiling probably will be done before, so a '.css' variant will be created, and then the path is correct, but in our case it never will be.
I'm sure author will address that. It's just something to be aware of when you copy library source over to your project.
@gatapia I'm not sure editing .ts files within node_module package has any effect. Maybe at that point it's the .js one to be picked up, and .ts is basically ignored?
Was having this issue too.
Please check https://github.com/Alberplz/angular2-color-picker/pull/38/commits/e37afec4767b0a2f7140feac940e8ffbc2a28c00 for a working fork. I alto made a PR to @Alberplz
Hello there
Are you closing this issue because it has been solved or what? Also, mentioned PR by @mlessio does not seem merged, so cannot really figure out what happened.
Could you share some more info @Alberplz ? Thank you!
I added a new release (https://github.com/Alberplz/angular2-color-picker/releases/tag/1.2.1 ) to solve that, also included a webpack example. Sorry not to mention that.
The library doesn't work with webpack and the angular 2 rc6. It seems like external libraries that are compiled to .js needs to have a metadata.json (https://github.com/orizens/angular2-infinite-scroll/issues/77, ). I'm having the same issue as described here, http://stackoverflow.com/questions/39335621/angular2-metadata-error-when-pre-compiling-feature-module.