Not working in angular2-rc6 and webpack #29

Abrissirba · 2016-09-08T07:25:32Z

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.

BrainCrumbz · 2016-09-14T18:11:47Z

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

maartentibau · 2016-09-15T08:39:51Z

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'
},

BrainCrumbz · 2016-09-15T09:14:04Z

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

BrainCrumbz · 2016-09-15T15:47:24Z

This should be a valid example of another library being adapted to angular-cli compiler, so to generate metadata files:

feature(build): Added @angular/compiler-cli support

BrainCrumbz · 2016-09-15T15:55:02Z

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 => {

maartentibau · 2016-09-15T16:33:09Z

I don't use the Angular-CLI since it still has to many issues, certainly when using 3rd party libraries.

BrainCrumbz · 2016-09-15T17:00:14Z

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

maartentibau · 2016-09-15T17:43:59Z

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

BrainCrumbz · 2016-09-15T21:04:28Z

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?

BrainCrumbz · 2016-09-15T22:59:58Z

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

Alberplz · 2016-09-16T03:39:02Z

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.

gatapia · 2016-09-16T05:23:17Z

Using angular cli this also fails. I think its due to webpack and barrels. See: angular/angular-cli#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.

maartentibau · 2016-09-16T06:52:23Z

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

Download the full source, zip or what ever from GitHub
Create a new folder in your project called e.g. color-picker
Copy all the files and folders from the src folder into the folder you've just created
Add "sass-loader": "4.0.2", and "node-sass": "^3.10.0", to your package.json dev deps and run npm update
Go to your webpack config and add .scss to your config.resolve.extentions array
Add this code (modify it to your own setup of course) to your config.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'
},

Go to your project in your 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...

BrainCrumbz · 2016-09-16T08:13:56Z

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.

maartentibau · 2016-09-16T08:41:17Z

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.

BrainCrumbz · 2016-09-16T09:38:47Z

I'm sure author will address that. It's just something to be aware of when you copy library source over to your project.

BrainCrumbz · 2016-09-16T10:51:29Z

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

mlessio · 2016-09-16T13:30:35Z

Was having this issue too.

Please check e37afec for a working fork. I alto made a PR to @Alberplz

BrainCrumbz · 2016-10-21T08:38:38Z

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!

Alberplz · 2016-10-21T10:48:42Z

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.

Alberplz closed this as completed Oct 20, 2016

Not working in angular2-rc6 and webpack #29

Not working in angular2-rc6 and webpack #29

Comments

Abrissirba commented Sep 8, 2016

BrainCrumbz commented Sep 14, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

maartentibau commented Sep 15, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

BrainCrumbz commented Sep 15, 2016

Uh oh!

BrainCrumbz commented Sep 15, 2016

Uh oh!

BrainCrumbz commented Sep 15, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

maartentibau commented Sep 15, 2016

Uh oh!

BrainCrumbz commented Sep 15, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

maartentibau commented Sep 15, 2016

Uh oh!

BrainCrumbz commented Sep 15, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

BrainCrumbz commented Sep 15, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Alberplz commented Sep 16, 2016

Uh oh!

gatapia commented Sep 16, 2016

Uh oh!

maartentibau commented Sep 16, 2016

Uh oh!

BrainCrumbz commented Sep 16, 2016

Uh oh!

maartentibau commented Sep 16, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

BrainCrumbz commented Sep 16, 2016

Uh oh!

BrainCrumbz commented Sep 16, 2016

Uh oh!

mlessio commented Sep 16, 2016

Uh oh!

BrainCrumbz commented Oct 21, 2016

Uh oh!

Alberplz commented Oct 21, 2016

Uh oh!

BrainCrumbz commented Sep 14, 2016 •

edited

Loading

maartentibau commented Sep 15, 2016 •

edited

Loading

BrainCrumbz commented Sep 15, 2016 •

edited

Loading

BrainCrumbz commented Sep 15, 2016 •

edited

Loading

BrainCrumbz commented Sep 15, 2016 •

edited

Loading

BrainCrumbz commented Sep 15, 2016 •

edited

Loading

maartentibau commented Sep 16, 2016 •

edited

Loading