beeman / angular-elements-chat-widget

💬 Chat Widget built with Angular Elements

Chat Widget built with Angular Elements

Angular Elements allows you to create Custom Elements (from the WebComponents spec) from Angular Components.

This means that those components can be used outside of an Angular app!

Project Structure

The project is a standard Angular 10 project with a few additions:

src/app/element.module.ts   Module with the component to be used as Angular Element. Imported by App Module
src/main.element.ts         bootstrap the Element Module
src/polyfills.element.ts    polyfills for the Element Module
build-elements.js           script to generate the exported file and demo project

Development

The component can be developed as any other Angular component: run ng serve and navigate to http://localhost:4200/.

Build

The build configuration of the Angular Elements is defined in a separate project in angular.json.

You can run this configuration with npm run build:elements. It creates a build in dist/elements-build that only contains ElementModule.

After this build the ./build-elements.js script creates the final js file and demo project in dist/elements.

To change the target of the compiled js file to either es5 or es2015, update the "postbuild:elements" script in package.json. Default it creates an es2015 file.

angular-elements-chat-widget's Issues

Using the chat widget in an Angular project

When I try to add the script to .angular-cli, at the index.html or at main.ts there is an error

Uncaught TypeError: (intermediate value)(intermediate value).push is not a function at Object.eval (omega.js:1) at eval (omega.js:4) at Object../src/assets/scripts/omega.js (main.bundle.js:1206) at __webpack_require__ (inline.bundle.js:55) at eval (main.ts:8) at Object../src/main.ts (main.bundle.js:1222) at __webpack_require__ (inline.bundle.js:55) at Object.0 (main.bundle.js:1230) at __webpack_require__ (inline.bundle.js:55) at webpackJsonpCallback (inline.bundle.js:26)

coming from the first line of the compiled code
(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{0:function(e,

any idea how to solve this? or how to use a custom element in an angular project?

How to install?

How to install in our project
any npm ??

Cannot import chatModule from node_modules

Hi,

We had a project where we used older version of the chat-widget. We used to generate a tgz file of chat-widget and use it as a custom plugin in our ionic project, we tried the same with the new build and we do get a chat-widget created in node_modules but we are unable to import it in our pages.
This is how we used it, but currently we are unable to import the ChatModule which is available in node_modules
import {ChatModule} from 'chat-widget' @NgModule({ imports: [ CommonModule, FormsModule, IonicModule, ChatBotPageRoutingModule, ChatModule, HttpModule, RouterModule.forChild([]) ], declarations: [ChatBotPage] })

StaticInjectorError

chat-widget.js:3 ERROR Error: StaticInjectorError(e)[e -> e]:
StaticInjectorError(Platform: core)[e -> e]:
NullInjectorError: No provider for e!
at e.get (chat-widget.js:3)
at chat-widget.js:3
at e (chat-widget.js:3)
at e.get (chat-widget.js:3)
at chat-widget.js:3
at e (chat-widget.js:3)
at e.get (chat-widget.js:3)
at so (chat-widget.js:3)
at e.get (chat-widget.js:3)
at Go (chat-widget.js:3)

Collaborating on new issues

I would like to collaborate on the new issues and tasks. Is there any mailing list available for this project, like on slack or gitter etc. ?

How can we secure widget to work on only selected websites?