Laravel echo出现角度为6的webpack错误。 Echo不是构造函数

Question

我正在使用Laravel后端和Angular 6作为前端，并且正在尝试使用socket.io实现广播。

我已经安装了npm laravel-echo socket.io。遵循laravel docs 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'
});

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

未捕获的TypeError：laravel_echo__WEBPACK_IMPORTED_MODULE_32 __。Echo不是构造函数

引用的第59行是新的Echo ...呼叫。 任何建议表示赞赏，谢谢。

Answer 1

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

"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);
  });