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

【问题标题】：'$ not defined' | Server side rendering in Angular 6'$ 未定义' | Angular 6 中的服务器端渲染
【发布时间】：2019-02-25 10:14:36
【问题描述】：

我使用的是 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 错误参考错误：$ 未定义在 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
      }
    }
  });
});
}

【问题讨论】：

@Mr.Lucier 使用这个declare const $: any;
@Abhishek 我已经声明了
在 'home.component.ts' 或 'server.js' 生成后生成
好吧，让我试试。
使用'import * as $ from "jquery"后；我发现了这个错误： src/app/home/home.component.ts(56,11) 中的错误：错误 TS2339：“JQuery”类型上不存在属性“owlCarousel”。

标签： angular typescript

【解决方案1】：

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

【讨论】：

同意，这里根本不应该使用 jQuery。他写的所有东西都应该在 ngOnInit() 或 ngAfterViewInit() 生命周期钩子中完成。