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服务器/ home / asif / projects / dp / df

节点local.js

收听：http://localhost:4200   错误ReferenceError：未定义$       在HomeComponent.module.exports ../ src / app / home / home.component.ts.HomeComponent.ngOnInit（/home/asif/projects/dp/df/dist/server.js:124683:9）       在checkAndUpdateDirectiveInline（/home/asif/projects/dp/df/dist/server.js:9341:19）       在checkAndUpdateNodeInline（/home/asif/projects/dp/df/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/dist/server.js:124631:473）       在Object.updateDirectives（/home/asif/projects/dp/df/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）       在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

首先，为什么将jQuery和Angular一起使用？你不应该那样做。像Angular和React这样的框架的全部意义就是不要手动弄乱DOM。您正在尝试在服务器端运行jQuery。但是，jQuery需要一个浏览器环境才能工作（因为它与DOM通讯），并且在服务器端，您没有任何可操作的DOM树。因此，在代码在浏览器中运行之前，window或document之类的东西将不存在。

'$未定义'| Angular 6中的服务器端渲染

1 个答案: