JQuery not working with slick with Angular 6

[abebraham]

I'm submitting a...

[X] Bug report  
[ ] Feature request
[ ] Documentation issue or request

In package

[ ] @ng-toolkit/init
[ ] @ng-toolkit/serverless
[X] @ng-toolkit/universal

Current behavior

I created a new Angular 6 application that is using a Angular Slick Carousel Plugin: https://github.com/devmark/ngx-slick.

Currently the application works fine when I run ng serve -o and even when I host my dist/browser/* contents in an S3 Bucket.

When I try to use either @ng-toolkit/universa I get the following problem from npm run server (btw all I see in localhost:8080 is this -> {}):

Listening on: http://localhost:8080
ERROR ReferenceError: jQuery is not defined
    at /Users/AbeBook/codecommit/somos-travel/dist/server.js:111069:13
    at ZoneDelegate.module.exports.ZoneDelegate.invoke (/Users/AbeBook/codecommit/somos-travel/dist/server.js:136491:26)
    at Zone.module.exports.Zone.run (/Users/AbeBook/codecommit/somos-travel/dist/server.js:136241:43)
    at NgZone.module.exports.NgZone.runOutsideAngular (/Users/AbeBook/codecommit/somos-travel/dist/server.js:4208:28)
    at SlickComponent.module.exports.SlickComponent.initSlick (/Users/AbeBook/codecommit/somos-travel/dist/server.js:111068:19)
    at SlickComponent.module.exports.SlickComponent.addSlide (/Users/AbeBook/codecommit/somos-travel/dist/server.js:111111:18)
    at SlickItemDirective.module.exports.SlickItemDirective.ngAfterViewInit (/Users/AbeBook/codecommit/somos-travel/dist/server.js:111254:23)
    at callProviderLifecycles (/Users/AbeBook/codecommit/somos-travel/dist/server.js:9992:18)
    at callElementProvidersLifecycles (/Users/AbeBook/codecommit/somos-travel/dist/server.js:9966:13)
    at callLifecycleHooksChildrenFirst (/Users/AbeBook/codecommit/somos-travel/dist/server.js:9956:29)
TypeError: Cannot read property 'slick' of undefined
    at /Users/AbeBook/codecommit/somos-travel/dist/server.js:111130:29
    at ZoneDelegate.module.exports.ZoneDelegate.invoke (/Users/AbeBook/codecommit/somos-travel/dist/server.js:136491:26)
    at Object.onInvoke (/Users/AbeBook/codecommit/somos-travel/dist/server.js:4249:33)
    at ZoneDelegate.module.exports.ZoneDelegate.invoke (/Users/AbeBook/codecommit/somos-travel/dist/server.js:136490:32)
    at Zone.module.exports.Zone.run (/Users/AbeBook/codecommit/somos-travel/dist/server.js:136241:43)
    at NgZone.module.exports.NgZone.run (/Users/AbeBook/codecommit/somos-travel/dist/server.js:4163:28)
    at SlickComponent.module.exports.SlickComponent.removeSlide (/Users/AbeBook/codecommit/somos-travel/dist/server.js:111129:19)
    at SlickItemDirective.module.exports.SlickItemDirective.ngOnDestroy (/Users/AbeBook/codecommit/somos-travel/dist/server.js:111263:23)
    at callProviderLifecycles (/Users/AbeBook/codecommit/somos-travel/dist/server.js:9998:18)
    at callElementProvidersLifecycles (/Users/AbeBook/codecommit/somos-travel/dist/server.js:9966:13)

Expected behavior

Application should compile as it does when I run ng serve

Minimal reproduction of the problem with instructions

To reproduce the error do the following:

• create a new Angular Application
• add @ng-toolkit/universal
• Follow instructions to add slick https://github.com/devmark/ngx-slick

app.module.ts

import { NgtUniversalModule } from '@ng-toolkit/universal';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LandingPageComponent } from './landing-page/landing-page.component';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { MaterialModule } from './material';
import { HomePageComponent } from './home-page/home-page.component';
import { ToolbarComponent } from './home-page/toolbar/toolbar.component';

// Import your library
import { SlickModule } from 'ngx-slick';

@NgModule({
  declarations: [
    AppComponent,
    LandingPageComponent,
    HomePageComponent,
    ToolbarComponent
  ],
  imports:[
 	  CommonModule,
	  NgtUniversalModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule,
    SlickModule.forRoot()
  ],
  providers: [],
})
export class AppModule { }

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Website Name</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lobster+Two|Montserrat:400,700|Raleway:400,700" rel="stylesheet">

  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
  <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="//unpkg.com/slick-carousel@1.8.1/slick/slick.js"></script>

</head>
<body>
  <app-root></app-root>
</body>
</html>

Environment

Angular CLI: 6.0.8
Node: 8.11.2
OS: darwin x64
Angular: 6.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cdk                      6.4.3
@angular/cli                      6.0.8
@angular/material                 6.4.3
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.2
typescript                        2.7.2
webpack                           4.8.3

[vikash09]

I am facing the same issue, is there any update on this?

[dhruvangg]

I'm facing same issue. How to solve??

[vikash09]

I solved my problem using this.

   constructor(
        @Inject(PLATFORM_ID) private platformId: Object
    ) { }

isPlatformBrowser() {
        if (isPlatformBrowser(this.platformId)) {
            return true;
        }
        return false;
    }

please try with this condition <div *ngIf="isPlatformBrowser()">your code</div>
Hope this will help you.

[thaissarojas]

vikash09's resolution did not work on my project, is there any update on this????

[Dadabhau]

Thank you, You saved me a lot of time. It's working fine.