window, $, google 未定义

Question

我正在使用 Angular CLI + Universal，但我对 window、$ Jquery 和 google 等浏览器变量有问题。

我试过像这样用 webpack 解决：

  plugins: [
    new webpack.DefinePlugin({
        window: undefined,
        document: undefined,
        location: JSON.stringify({
            protocol: 'https',
            host: 'localhost',
        })
    }),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
    })

]

我的组件中有例如以下代码：

 window.location.reload()

这是行不通的。另外，我在 node_modules 中使用了 window 变量。

我该如何解决这个问题？

Answer 1

这只是对 new webpack.ProvidePlugin 工作原理的误解。它所做的只是简单地为您导入打包文件的那些项目，而不是将它们公开为您可以随意从浏览器控制台访问的变量

如果您希望从外部访问这些内容，我建议您在 application.js 或任何您的入口文件中执行此操作

import jquery from 'jquery'

window.$ = jquery
window.jquery = jquery
window.jQuery = jquery

这样做应该允许您在浏览器的控制台上访问 jquery。至于 window 无法从您的组件中访问，也许下面的代码与它有关

window: undefined,
document: undefined,

Answer 2

这些变量在服务器端不可用。如果你想在你的代码中使用它们，你需要检查当前上下文是浏览器还是服务器：

import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';

constructor(@Inject(PLATFORM_ID) private platformId: Object) { ... }

ngOnInit() {
  if (isPlatformBrowser(this.platformId)) {
     // Client only code.
     ...
  }
}

window, $, google 未定义

window, $, google not defined

javascript

typescript

webpack

angular-universal