BotFramework-WebChat is not working with Angular 5

[prijilnath]

Hi Team,

I am using the latest botframework (0.14.0). My angular configurations are below.

.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)
    );

am getting the blow error when compiling

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: "...'.

(Edited by @compulim for code formatting)

[compulim]

Looks like TypeScript errors.

I never try cross-compile it with Angular, does it works with other projects? Or how about building a BotChat.js and consuming it use JavaScript instead of React?

[prijilnath]

Yes. We are using BotChat.js and building our angular app using ng build commands. But it's working with old versions of boatchat framework

[matmatos]

Any updates on the issue?

[guilhermegjr]

+1

[compulim]

In Angular, can you dedicate a DOM element and everything under that DOM element will not be controlled by Angular?

You can refer to this sample to integrate Web Chat in non-React environment.

[sgellock]

@compulim check with Omar who can help with Angular issues

[khalid-halo]

Has anyone successfully completed the integration? Would love to see a sample.

[omarsourour]

Hello @Prijil .. I'll be helping you out with this request. At a first glance it looks like that there are some compilation errors, and it seems to me that you might be missing some @typings npm packages.

I will recreate your scenario and see how it goes from there to confirm.

[omarsourour]

Hello again,

Please find a working sample of the web chat ported into an Angular application on a sample repo I created here: https://github.com/omarsourour/ng-webchat-example. The sample is based on Angular 5 and Bot Framework Webchat 0.14.0 as mentioned above.

Some important notes to highlight are:

• You were missing an important NPM package, namely @types/react , thus the compilation errors you received in the first 6 lines.
• The object that you passed to BotChat.App was missing a required property adaptiveCardsHostConfig, thus the error that spans the last two lines.

This sample should provide you what you need for your issue. Do tell if you hit any difficulties installing or running the sample, understanding the problems that caused this to happen in the first place, or require additional help :)

[mkarl1983]

Hello Omar can you update the your sample [https://github.com/omarsourour/ng-webchat-example.] with version latest Bot Framework Webchat 4.2.0

[omarsourour]

Sure thing, I will update the repo with a new version using WebChat 4.2.0 using Angular 5, and I will reply here

[omarsourour]

@mkarl1983 Please refer to #1423 . I am currently waiting on a patch from WebChat for me to be able to proceed with an update to the example.

[SSanjeevi]

Hi @omarsourour ,

Is there any version for angular 9 and latest webchat version