Closed zmnv closed 7 years ago
two weeks of my life was for nothing.
jquery sliders doesn't works because
if(isBrowser) {
$(document).ready(function(){
$('.owl-carousel').owlCarousel();
});
}
compiler not understand owlCarousel and get error, stackoverflow solutions and other google is for usual Angular 2 ........ okay. try to works with typing, usual angular 2 works, webpack works, universal doesnt. there is no any tutorials...
angular 2 page slider doesnt work also because there is no support to 'divectives' in components...
i'm dead.
Animations should work (on the browser side at least), you're not talking about hitting F5 and it running the animations from the server-rendered view right? Because those won't get triggered.
Here's an example of basic animations here
As for jQuery, do you have it set up properly? I need to make sure I add the Gotcha to the seconds here & in the Universal repo. They're more up-to-date here
But to use jQuery, and jQuery plugins, it has to be setup differently:
The gist is, you need to import the plugin in your main-client.ts only, jQuery must be added as a Plugin for webpack so it's global, and you need to import * as $ from 'jquery';
at the top of your component to use jQuery in general within it. Then just wrap it in if (isBrowser) { $('.owl-carousel').owlCarousel(); }
and that should do the trick!
How can I use jQuery and/or some jQuery plugins with Angular Universal?
Note: If at all possible, try to avoid using jQuery or libraries dependent on it, as there are better, more abstract ways of dealing with the DOM in Angular (2+) such as using the Renderer, etc. Yes, of course but there are a few things you need to setup before doing this. First, make sure jQuery is included in webpack vendor file, and that you have a webpack Plugin setup for it. new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' })
Now, make sure any "plugins" etc that you have, are only included in your main-client.ts file. (ie: import 'slick-carousel';) In a Component you want to use jQuery, make sure to import it near the top like so:
import * as $ from 'jquery';
Always make sure to wrap anything jQuery oriented in Universal's isBrowser conditional!
@MarkPieszak
webpack.config.ts
export var commonPlugins = [
....
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' })
];
client.ts
// the polyfills must be the first thing imported
import 'angular2-universal-polyfills';
import 'ts-helpers';
import './__workaround.browser'; // temporary until 2.1.1 things are patched in Core
import * as $ from 'jquery'
import 'owl.carousel';
...
carousel.component.ts
import { Component, OnInit } from '@angular/core';
import { isBrowser } from 'angular2-universal';
import * as $ from 'jquery';
@Component({
changeDetection: ChangeDetectionStrategy.Default,
encapsulation: ViewEncapsulation.Emulated,
selector: 'slider',
templateUrl: './carousel.component.html',
})
export class CarouselComponent implements OnInit {
ngOnInit() {
if (isBrowser) { $('.owl-carousel').owlCarousel(); }
}
}
Compiler returns
**Property 'owlCarousel' does not exist on type 'JQuery'.**
Okay. Then I found folder typings and file index.d.ts inside. Add:
/// <reference path="globals/jquery/index.d.ts" />
interface JQuery {
owlCarousel():void;
}
And there is no error in compiler. But in browser in console I see
**EXCEPTION: $(...).owlCarousel is not a function**
I use pack of universal-starter master
Let me try and take a look tomorrow and see why it's not working, looks fine to me at least, hmm.
@MarkPieszak no problem :) just try to include OwlCarousel2 in master pack of universal-starter. I still think I'm include owl wrong. Because there are so many contradictory information about how to fix that problems in internet. It would be nice if the developer of angular-universal tried to do it, and gave a particular fine example or repository. Because this is not only for owl, It's for all jQuery plugins as well.
Now I try to "carousel" with typescript functions and angular 2 animations. I had to use jquery because ng2-...-slider or other angular 2 components doesnt works ( or probably I'm stupid :) ) because of 'directives: [ ... ]'.
PS: however, jQuery works fine. $('.blabla').click() works. Also all scripts and .js plugins works if I include they in index.html as Githubissues.
Trying to use animation from inside of other functions in component by
this.togglestates("goHide");
. Tryed to use ViewEncapsulation.None also, or without it. No animation.html: