CODEWITHSUNDEEP
javascriptangulartypescriptchatbot
Smokey Dawson
Smokey Dawson

Reputation: 9230

Trouble Using Microsoft BotFramework-WebChat in Angular 2 Application

I'm having some trouble implementing the botframework into my angular application which is running locally, as per the docs

Easy: In your non-React website, run Web Chat inline

Add a DirectLine (not Web Chat) channel, and generate a Direct Line Secret. Make sure to enable Direct Line 3.0.

Include botchat.css and botchat.js on your website, e.g.:

<!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>

Now I've inserted my local path to the built CSS in the header as well as the js file, then in my component, I've declared the variable BotChat 

declare var BotChat;

and then I've put the script in my constructor

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

but it doesn't seem to be working im getting this error in the console also

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

and

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

any help would be appreciated

Upvotes: 0

Views: 1469

Answers (2)

Smokey Dawson
Smokey Dawson

Reputation: 9230

Okay so after playing around with it for a while, Ive figured it out.

To use the botchat framework in your existing angular application put the botchat folder you download from github in the src folder. run npm install and npm build on the botchat folder in your project. Link the built js and css files in your angular.cli.

In your component 

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

declare var BotChat; //important

then 

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

and that will make it work in your angular application.

Upvotes: 0

user8835217
user8835217

Reputation: 11

In your chatsidebar.component.ts add after all imports statement

declare var BotChat;

This is actually typescript way of telling you have some global variable declared somewhere else, and you want to use it.

declare keyword

Also please try using renderer2 of angular instead of direct dom manipulation.

Angular renderer

Upvotes: 1

Related Questions