Laravel 回显 angular 6 webpack 错误。 Echo 不是构造函数

Question

我正在使用 Laravel 后端和 Angular 6 作为前端，我正在尝试使用 socket.io.

实现广播

我安装了 npm laravel-echo socket.io。按照 laravel 文档 here 中的教程，我正在导入适当的库并尝试实例化一个新的 echo 实例。这就是我的 app.module.ts:

中的样子

import { Echo } from 'laravel-echo';

declare global {
    interface Window { io: any; }
    interface Window { Echo: any; }
}

window.io = window.io || require('socket.io-client');
window.Echo = window.Echo || new Echo({
    broadcaster: 'socket.io',
    host: 'http://localhost:6001'
});

然后当我尝试编译应用程序时出现此错误：

未捕获的类型错误：laravel_echo__WEBPACK_IMPORTED_MODULE_32__.Echo 不是构造函数

引用的第 59 行是新的 Echo... 调用。感谢任何建议，谢谢。

Answer 1

为了解决这个问题，我删除了 app.module.ts 文件中包含的所有内容，并在 angular.json 文件的脚本数组中包含了节点模块的路径：

"scripts": [
   "node_modules/hammerjs/hammer.min.js",
   "node_modules/laravel-echo/dist/echo.js"
],

在组件中，我可以这样引用 Echo 对象：

// At the top of the file
declare global {
    interface Window { io: any; }
    interface Window { Echo: any; }
}

declare var Echo: any;

window.io = window.io || require('socket.io-client');
window.Echo = window.Echo || {};

每当您想开始收听时：

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: 'https://host-address.com:6001'
});
window.Echo.channel('channel-name')
    .listen('.channelEvent', (data) => {
       console.log('From laravel echo: ', data);
    });

希望这能为其他人节省一些时间！

Answer 2

我通过在 src 文件夹中创建 "laravel-echo.d.ts" 文件解决了这个问题。并按以下方式在其中声明模块。

                      declare module 'laravel-echo';

然后将代码从

更改为

       import {Echo} from 'laravel-echo';

至

       var Echo=require('laravel-echo');

问题已解决。

Answer 3

它不是最漂亮的，但它很管用：

安装依赖项

yarn add laravel-echo
yarn add types/node

添加到tsconfig.json

"types" : ["node"],

添加到app.module.ts

import Echo from 'laravel-echo';

(window as any).global = window;
declare var require: any;

declare global {
  interface Window {
    io: any;
  }

  interface Window {
    Echo: any;
  }
}

window.io = window.io || require('socket.io-client');
window.Echo = window.Echo || {};

window.Echo = new Echo({
  broadcaster: 'socket.io',
  host: 'http://localhost:6001'
});

window.Echo.channel('channel-name')
  .listen('.channelEvent', (data) => {
    console.log('From laravel echo: ', data);
  });

Laravel 回显 angular 6 webpack 错误。 Echo 不是构造函数

Laravel echo with angular 6 webpack error. Echo is not a constructor

socket.io

webpack

laravel-echo

angular6