CODEWITHSUNDEEP
angulartypescript
Mr. Lucifer
Mr. Lucifer

Reputation: 119

'$ not defined' | Server side rendering in Angular 6

I have using Angular 6.0.3 and I am using @ng-toolkit/universal to archive server-side rendering. I am able to generate build successfully using this command 'npm run build:prod' but I found the following issue while running this command 'npm run server': $ is not defined

root@asif:/home/asif/projects/dp/df# npm run server

[email protected] server /home/asif/projects/dp/df

node local.js

Listening on: http://localhost:4200 ERROR ReferenceError: $ is not defined at HomeComponent.module.exports../src/app/home/home.component.ts.HomeComponent.ngOnInit (/home/asif/projects/dp/df/dist/server.js:124683:9) at checkAndUpdateDirectiveInline (/home/asif/projects/dp/df/dist/server.js:9341:19) at checkAndUpdateNodeInline (/home/asif/projects/dp/df/dist/server.js:10605:20) at checkAndUpdateNode (/home/asif/projects/dp/df/dist/server.js:10567:16) at prodCheckAndUpdateNode (/home/asif/projects/dp/df/dist/server.js:11107:5) at Object.updateDirectives (/home/asif/projects/dp/df/dist/server.js:124631:473) at Object.updateDirectives (/home/asif/projects/dp/df/dist/server.js:10896:72) at checkAndUpdateView (/home/asif/projects/dp/df/dist/server.js:10549:14) at callViewAction (/home/asif/projects/dp/df/dist/server.js:10790:21) at execEmbeddedViewsAction (/home/asif/projects/dp/df/dist/server.js:10753:17)

that is the component file 'home.component.ts'

ngOnInit() {

$(document).ready(function () {
  var owl = $('#client');
  owl.owlCarousel({
    margin: 10,
    loop:true,
    autoplay: true,
    autoplayTimeout: 10000,
    autoplayHoverPause: true,
    pagination: true,
    navigation: true,
    animateOut: 'fadeOut',
    nav: true,
    dots: false,
    responsive: {
      0: {
        items: 1

      },
      600: {
        items: 2
      },
      1000: {
        items: 5
      }
    }
  });
});
}

Upvotes: 4

Views: 538

Answers (1)

Jimmy Hedström
Jimmy Hedström

Reputation: 571

First of all, why are you using jQuery together with Angular? You should not do that. It's the whole point with frameworks like Angular and React, to not mess with the DOM manually. You are trying to run jQuery on the server side. However, jQuery requires a browser environment to work (since it talks with the DOM), and on server side, you don't have any DOM tree to manipulate. Therefore, things like window or document won't exist until the code runs in the browser.

Upvotes: 3

Related Questions