时间戳

首页 > 解决方案 > '$ 未定义' | Angular 6 中的服务器端渲染

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

问题描述

我使用的是 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

节点本地.js

监听：http://localhost:4200 错误 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) 在 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
      }
    }
  });
});
}

标签： angulartypescript

解决方案

首先，您为什么将 jQuery 与 Angular 一起使用？你不应该那样做。Angular 和 React 等框架的重点在于不要手动弄乱 DOM。您正在尝试在服务器端运行 jQuery。然而，jQuery 需要一个浏览器环境才能工作（因为它与 DOM 对话），并且在服务器端，您没有任何 DOM 树可以操作。因此，在代码在浏览器中运行之前，类似window或document不会存在的东西。

推荐阅读