'$ not defined'| Angular 6中的服务器端渲染

Question

我使用Angular 6.0.3,我@ng-toolkit/universal用来存档服务器端渲染.我能够使用此命令成功生成构建' npm run build:prod'但我在运行此命令时发现了以下问题'npm run server': $ is not defined

root @ asif:/ home/asif/projects/dp/df #npm运行服务器

dp@0.0.0 server/home/asif/projects/dp/df

node local.js

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

这是组件文件' 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
      }
    }
  });
});
}

Answer 1

首先,为什么你和Angular一起使用jQuery？你不应该这样做.对于像Angular和React这样的框架来说,这一点非常重要,不要手动弄乱DOM.您正在尝试在服务器端运行jQuery.但是,jQuery需要一个浏览器环境才能工作(因为它与DOM对话),而在服务器端,你没有任何DOM树可供操作.因此,在代码在浏览器中运行之前,类似window或document不存在的事情.