Botframework-webchat: Angular support

[jdnichollsc]

Hi guys,
What do you think to support Angular too? Can I help you? 👍
Regards, Nicholls

[billba]

So far as I know there's no reason WebChat can't be used inside an Angular app (or any other web page) today, using the BotChat.App function. It would be great if you could get this to work, and contribute some sample code.

[LyraelRayne]

One barrier to using this in Angular is the fact that you can't import the node module in Typescript as it has a hard dependency on React/JSX.

I'm not well-versed enough in node to know how to make JSX an optional dependency, but it'd certainly help a lot for that to be done.

[billba]

I don't quite understand the issue. Can you give more details? Error messages?

---

From: LyraelRayne [e-mail]
Sent: Sunday, June 18, 2017 2:51:30 AM
To: Microsoft/BotFramework-WebChat
Cc: Bill Barnes; Comment
Subject: Re: [Microsoft/BotFramework-WebChat] Angular support (#478)

One barrier to using this in Angular is the fact that you can't import the node module in Typescript as it has a hard dependency on React/JSX.

I'm not well-versed enough in node to know how to make JSX an optional dependency, but it'd certainly help a lot for that to be done.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FMicrosoft%2FBotFramework-WebChat%2Fissues%2F478%23issuecomment-309267382&data=02%7C01%7CBill.Barnes%40microsoft.com%7Cbaca02d19e8340a04cb008d4b62f995a%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C636333762943353260&sdata=y3RcbaDZazyK8OG5n8wjpn7w4mrNrV9O%2F2gRQusqsyY%3D&reserved=0, or mute the threadhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAKietz61alvuxWhbJq8-Nrd4z0EVbid_ks5sFPMigaJpZM4NnvAR&data=02%7C01%7CBill.Barnes%40microsoft.com%7Cbaca02d19e8340a04cb008d4b62f995a%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C636333762943353260&sdata=Owtvy4qod7doPMN8O%2BSP05%2BI7OARXN1vJO4EAacLf9Q%3D&reserved=0.

[LyraelRayne]

in version 0.10.6 I got the below:

ERROR in d:/webstuff/bottest/node_modules/botframework-webchat/built/Chat.d.ts (40,15): Cannot find namespace 'JSX'.

ERROR in d:/webstuff/bottest/node_modules/botframework-webchat/built/Chat.d.ts (44,79): Cannot find namespace 'JSX'.

ERROR in d:/webstuff/bottest/node_modules/botframework-webchat/built/Chat.d.ts (44,95): Cannot find namespace 'JSX'.

ERROR in d:/webstuff/bottest/node_modules/botframework-webchat/built/Chat.d.ts (1,1): Cannot find type definition file for 'react'.

ERROR in d:/webstuff/bottest/node_modules/botframework-webchat/built/Attachment.d.ts (13,7): Cannot find namespace 'JSX'.

ERROR in d:/webstuff/bottest/node_modules/botframework-webchat/built/Attachment.d.ts (1,1): Cannot find type definition file for 'react'.

I tried reproducing this in a minimal application, and the new app happened to import 0.10.7 and was unable to reproduce the issue.

I went back to the original application, updated it one version and that issue doesn't seem to exist anymore :)

Minimal working component below

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {App} from "botframework-webchat";
@Component({
  selector: 'app-root',
  template: `<div id="bot-chat-container" #botWindow></div>`,
})
export class AppComponent implements OnInit {

  @ViewChild("botWindow") botWindowElement: ElementRef;

  ngOnInit(): void {
    App({
      directLine: {secret: 'secret goes here'},
      user: {id: 'user'},
      bot: {id: 'bot'},
    }, this.botWindowElement.nativeElement)
  }
}

The only real problem is that this essentially includes a copy of react in the angular app's vendor.bundle.js, which is a little bit chunky for a single component. I guess that can't be avoided without rewriting the whole thing and I'm guessing the standalone version also does this. As it stands, I think it's as good as it gets without writing a separate component just for angular2.

[danmarshall]

This particular issue regarding Cannot find namespace 'JSX' and Cannot find type definition file for 'react' is fixed on 0.10.7 - can you upgrade and try again?

[billba]

@danmarshall Yes @LyraelRayne already mentioned above that this works with 0.10.7

It is true that using WebChat requires including a copy of React.

This all appears to be working correctly, so I'm closing this issue.

[arunthirumani1]

This issue is reproducible in latest release 0.13.1, can anyone help me with this?

[anthony-elhaddad]

issue is reproducible in 0.14.0 as well, any solutions to embed the bot framework in an angular 6 app?

[fjlogrono]

I hope this works for you:

.html
<div id="bot-chat-container" #botWindow></div>

.js:
import * as BotChat from "botframework-webchat";

   @ViewChild("botWindow") botWindowElement: ElementRef;
    var botConnection = new BotChat.DirectLine({
        secret: '********************************************',
        webSocket: false
    });
    BotChat.App({
        botConnection: botConnection,
        user: {id: 'userId', name: 'myUserName'},
        bot: { id: 'botId' },
        resize: 'detect',
    }, this.botWindowElement.nativeElement);

    botConnection.postActivity({
        from: { id: 'userId', name: 'myUserName' }, 
        name: 'requestWelcomeDialog',
        type: 'event',
        value: token
    }).subscribe(
        id => console.log("Posted activity, assigned ID ", id),
        error => console.log("Error posting activity", error)
    );

[fjlogrono]

The problem I have is that I do not know how to stop sending activities.

[billba]

You're not sending activities. You are polling for activities. If you set webSocket: true then that won't happen either.

[EricDahlvang]

@billba Did you mean webSocket: true ?

[billba]

Yes, sorry. I updated my response.

[anthony-elhaddad]

@fjlogrono i tried to reproduce your solution above, by adding
`var botConnection = new BotChat.DirectLine({
secret: '**************',
webSocket: false
});
BotChat.App({
botConnection: botConnection,
user: {id: 'userId', name: 'myUserName'},
bot: { id: 'botId' },
resize: 'detect',
}, this.botWindowElement.nativeElement);

botConnection.postActivity({
    from: { id: 'userId', name: 'myUserName' }, 
    name: 'requestWelcomeDialog',
    type: 'event',
    value: token
}).subscribe(
    id => console.log("Posted activity, assigned ID ", id),
    error => console.log("Error posting activity", error)
);`

in ngOnInit()

but the problem im facing now is:
BotChat.App({ botConnection: botConnection, user: { id: 'userId', name: 'myUserName' }, bot: { id: 'botId' }, resize: 'detect', }, this.botWindowElement.nativeElement);

throwing error: property AdaptiveCardsHostConfig is missing.
I can just pass it with the other fields but what should i give it as value?

============================================
After adding AdaptiveCardsHosConfig property, i got this runtime error:

ERROR in node_modules/botframework-webchat/built/Attachment.d.ts(1,23): error TS2688: Cannot find type definition file for 'react'.
node_modules/botframework-webchat/built/Attachment.d.ts(14,7): error TS2503: Cannot find namespace 'JSX'.
node_modules/botframework-webchat/built/Chat.d.ts(1,23): error TS2688: Cannot find type definition file for 'react'.
node_modules/botframework-webchat/built/Chat.d.ts(48,15): error TS2503: Cannot find namespace 'JSX'.
node_modules/botframework-webchat/built/Chat.d.ts(55,79): error TS2503: Cannot find namespace 'JSX'.
node_modules/botframework-webchat/built/Chat.d.ts(55,95): error TS2503: Cannot find namespace 'JSX'.

[prijilnath]

Hi team,

I am using angular 5 and botchat version 0.14 . When i will try to integrate botchat am getting

ERROR in node_modules/botframework-webchat/built/Attachment.d.ts(1,23): error TS2688: Cannot find type definition file for 'react'.
node_modules/botframework-webchat/built/Attachment.d.ts(14,7): error TS2503: Cannot find namespace 'JSX'.
node_modules/botframework-webchat/built/Chat.d.ts(1,23): error TS2688: Cannot find type definition file for 'react'.
node_modules/botframework-webchat/built/Chat.d.ts(48,15): error TS2503: Cannot find namespace 'JSX'.
node_modules/botframework-webchat/built/Chat.d.ts(55,79): error TS2503: Cannot find namespace 'JSX'.
node_modules/botframework-webchat/built/Chat.d.ts(55,95): error TS2503: Cannot find namespace 'JSX'.
src/app/home/app.homeComponent.ts(56,17): error TS2345: Argument of type '{ botConnection: DirectLine; user: { id: string; name: string; }; bot: { id: string; }; resize: "...' is not assignable to parameter of type 'ChatProps'.
Property 'adaptiveCardsHostConfig' is missing in type '{ botConnection: DirectLine; user: { id: string; name: string; }; bot: { id: string; }; resize: "...'.

[chintan3100]

Hi All,
Any update on Angular JS ? Can i use webchat with NG 5 ?

[matmatos]

Hi everyone,
Is there any solution to the errors that @prijil, @anthony-elhaddad and @LyraelRayne showed ("Cannot find namespace 'JSX'" and "Cannot find type definition file for 'react')?
I'm trying to get webchat to run in angular 6, but get these errors when i try to run the app, i followed every suggestion i could find, but every time i get stuck at these errors...
I'm using Angular 6, and botframework-webchat version 0.14.2.

[arunthirumani1]

version 0.11.4 works fine with angular 5, that is one workaround I could see if we are not looking at specific feature in 0.1.4.2.

[matmatos]

You are right, i don't have any more build errors but now i get this in the browser console:

``` Uncaught TypeError: Observable_1.Observable.bindCallback is not a function
at Object../node_modules/botframework-webchat/built/Store.js (Store.js:260)
at __webpack_require__ (bootstrap:76)
at Object../node_modules/botframework-webchat/built/Chat.js (Chat.js:7)
at __webpack_require__ (bootstrap:76)
at Object../node_modules/botframework-webchat/built/App.js (App.js:6)
at __webpack_require__ (bootstrap:76)
at Object../node_modules/botframework-webchat/built/BotChat.js (BotChat.js:6)
at __webpack_require__ (bootstrap:76)
at Object../src/app/visit-report-chat-bot/visit-report-chat-bot.component.ts (main.js:199)
at __webpack_require__ (bootstrap:76)

Do you have any ideas?

[arunthirumani1]

Looks like rxjs version compatibility issue.

[xtianus79]

Anyone have real luck with this perhaps I will write a component for it!!!

[jdnichollsc]

@billba and what about for Mobile? Using with Angular from NativeScript or something like that :)

[rasithupamal]

Hi,
i need to add web chat into angular project.But it gives me this errors..
Angular 8
botframework-webchat ^4.7.1

ERROR in ./node_modules/botframework-webchat-component/lib/WebChatUIContext.js Module not found: Error: Can't resolve 'react' in 'E:\Rasith\01\test\BotBuilder\chat-admin\kf-bot-admin\node_modules\botframework-webchat-component\lib' ERROR in ./node_modules/botframework-webchat-component/lib/connectToWebChat.js Module not found: Error: Can't resolve 'react' in 'E:\Rasith\01\test\BotBuilder\chat-admin\kf-bot-admin\node_modules\botframework-webchat-component\lib' ERROR in ./node_modules/botframework-webchat-component/lib/WebChatReduxContext.js Module not found: Error: Can't resolve 'react' in 'E:\Rasith\01\test\BotBuilder\chat-admin\kf-bot-admin\node_modules\botframework-webchat-component\lib' ERROR in ./node_modules/botframework-webchat-component/lib/ScreenReaderText.js Module not found: Error: Can't resolve 'react' in 'E:\Rasith\01\test\BotBuilder\chat-admin\kf-bot-admin\node_modules\botframework-webchat-component\lib'
and more other..

i used botframework-webchat this library..

this is my component..

import * as BotChat from "botframework-webchat"
and in ngOninit
let directLine = BotChat.createDirectLine({ secret: '********************************************', webSocket: true }) BotChat.connectToWebChat({ botConnection: directLine, user: { id: 'userId', name: 'myUserName' }, resize: 'detect', }, this.botWindowElement.nativeElement);
i don't know is this right.?
can i implement webchat with angular.?
ASAP Thanks..

@billba

[xtianus79]

@billba and @rasithupamal you can use this
https://github.com/xtianus79/ngx-microsoft-bot-framework#readme

[rasithupamal]

@billba and @rasithupamal you can use this
https://github.com/xtianus79/ngx-microsoft-bot-framework#readme

Thanks @xtianus79 it works..