在 Angular 2 应用程序中使用 Microsoft BotFramework-WebChat 时出现问题

Question

根据文档

，我在 angular 本地运行ning 应用程序中实现 botframework 时遇到了一些问题

简单：在您的非 React 网站中，运行在线在线聊天

添加一个 DirectLine（不是网络聊天）频道，并生成一个 Direct Line Secret。确保启用 Direct Line 3.0.

在您的网站上包含 botchat.css 和 botchat.js，例如：

<!DOCTYPE html>
<html>
  <head>
     <link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
  </head>
  <body>
  <div id="bot"/>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<script>
  BotChat.App({
    directLine: { secret: direct_line_secret },
    user: { id: 'userid' },
    bot: { id: 'botid' },
    resize: 'detect'
  }, document.getElementById("bot"));
</script>
</body>
</html>

现在我已经在头文件和 js 文件中插入了我的本地路径到构建的 CSS，然后在我的组件中，我声明了变量 BotChat

declare var BotChat;

然后我将脚本放入构造函数

constructor() {
    BotChat.App({
    directLine: { secret: direct_line_secret },
    user: { id: 'userid' },
    bot: { id: 'botid' },
    resize: 'detect'
  }, document.getElementById("bot"));
}

但它似乎无法正常工作我也在控制台中收到此错误

Loading failed for the <script> with source 
“http://localhost:4200/BotFramework-WebChat-master/botchat.js”

和

Error: [object Object]
Stack trace:
resolvePromise@http://localhost:4200/polyfills.bundle.js:7633:31

任何帮助将不胜感激

Answer 1

在你的 chatsidebar.component.ts 中添加 after all imports 语句

declare var BotChat;

这实际上是告诉您在其他地方声明了一些全局变量并且您想使用它的打字稿方式。

declare keyword

另外请尝试使用 angular 的 renderer2 而不是直接 dom 操作。

Angular renderer

Answer 2

好吧，玩了一段时间后，我明白了。

要在您现有的 angular 应用程序中使用 botchat 框架，请将您从 github 下载的 botchat 文件夹放在 src 文件夹中。运行 npm install 和 npm build 在您项目的 botchat 文件夹中。 Link 内置的 js 和 css 文件在你的 angular.cli.

在你的组件中

import { component, ViewAfterInit } from @angular/cli;

declare var BotChat; //important

然后

ngAfterViewInit(){
    BotChat.App({
        directLine: { secret: direct_line_secret },
        user: { id: 'userid' },
        bot: { id: 'botid' }, //DONT ACTUALLY PUT IN YOUR BOT ID IT WILL BREAK THE APP
        resize: 'detect'
    }, document.getElementById("bot"));
}

这将使它在您的 angular 应用程序中工作。

在 Angular 2 应用程序中使用 Microsoft BotFramework-WebChat 时出现问题

Trouble Using Microsoft BotFramework-WebChat in Angular 2 Application

javascript

angular

typescript

chatbot

简单：在您的非 React 网站中，运行在线在线聊天

在 Angular 2 应用程序中使用 Microsoft BotFramework-WebChat 时出现问题

Trouble Using Microsoft BotFramework-WebChat in Angular 2 Application

javascript

angular

typescript

chatbot

简单：在您的非 React 网站中，运行 在线在线聊天

简单：在您的非 React 网站中，运行在线在线聊天