@ng-toolkit/Universal ERROR ReferenceError: jQuery is not defined

[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

[abebraham]

Anyone?

[nikhilthakur001]

Same JQuery not defined issue.

[fahadsaeed]

I have same issue on angular7 SSR ERROR ReferenceError: jQuery is not defined

[gaurav150493]

same issue happened to me. Any update??

[vumai2308]

I have the same issue on angular8 when I tried to run ssr. Anyone can help me resolve this problem? Thanks

[KingDarBoja]

For anyone steping into this, you should be aware of common pitfalls on server side rendering, one of them is being unable to manipulate direclty the DOM as it does not exists on server.

Also, closing now, as seems it was already asked on ngx-slick repo. Someone posted setting some *ngIf statement on your index file and load the script files based on isPlatformBrowser(this.platformId) check at you app.component.ts.

Could work but not really confident about it.

Cheers!

[Dalal007]

try to follow below steps for resolving 'slick' issue:

1. npm i nodemon@1.6.1 //(optional)
2. npm uninstall ngx-slick --save
3. npm i slick-carousel --save //version - 1.8.1
4. npm i ngx-slick-carousel --save //version - 0.5.1
5. in server.ts - at the top add import "jasmine";
6. rename SlickModule.forRoot() to SlickCarouselModule and change library ngx-slick to ngx-slick-carousel
7. rename <ngx-slick> tag name to <ngx-slick-carousel>
8. rename #slickModal="slick-modal" template reference to #slickModal="slick-carousel"
9. in all html files replace slick-modal to slick-carousel
10. replace all SlickComponent with SlickCarouselComponent and change library ngx-slick to ngx-slick-carousel
11. replace all SlickModule with SlickCarouselModule and change library ngx-slick to ngx-slick-carousel
12. try to run it locally and production build