Encountering issues with integrating an external plugin with AngularJS code

  • For my app, I am attempting to incorporate intercom for monitoring user activity.
  • It functions correctly when placed inside a script tag in index.html.
  • However, I encounter an error when trying to use it in a .ts file as shown below: app/components/rocket/rocket-search.ts(63,10): error TS2339: Property 'intercomSettings' does not exist on type 'Window'.
  • Could you please advise on how to rectify this issue?
  • Below is the code snippet that I have provided:

Code that isn't functioning:

import { Component, ElementRef, Input, Output, EventEmitter, Inject, OnInit, ViewChild } from '@angular/core';
import { KendoGridComponent } from '../grid/grid.component'
import { Router } from '@angular/router';
import { sportsService } from '../../services/sports.service';


@Component({
    selector: 'rocketSearch',
    templateUrl: "./app/components/rocket/rocket-search.html",
})

export class rocketSearch {
    /* Localization variables */

    @Output() rocketSearchEmitter: EventEmitter<any> = new EventEmitter<any>();

    private dataSourceVal;
    private MainGrid;
    private grid;
    private titles;
    public rocketRef;

    constructor( public elementRef: ElementRef, public router: Router, public sportsService: sportsService) {
    }
    private kendocommand = {
        edit: { createAt: "bottom" },
        autoBind: false,
        excelFileName: {
            fileName: "",
            allPages: true
        }
    }

    ngOnInit() {

        let that = this;
        let attributes = this.sportsService.getSeesionStorageValue();
        
        window.intercomSettings = {
            app_id: 'irgooiqb',
            name: "Jane Doe", // Full name
            email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="25465056514a48405765405d54416056487453954c4054">[email protected]</a>", // Email address
            created_at: 1312182000 // Signup date as a Unix timestamp
        };
        
    }

}

Functioning code within index.html:

<script>
    (function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',intercomSettings);}else{var d=document;var i=function(){i.c(arguments)};i.q=[];i.c=function(args){i.q.push(args)};w.Intercom=i;function l(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/APP_ID';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);}if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})()
</script>

<script>
    let players=this.sportsService.marksSession();
    console.log("players--->" + players);
    if(players) {
        this.userId = players.user_players.SSO[0];
    }

    Intercom('trackEvent', 'share-link');

    window.intercomSettings = {
        app_id: 'APP_ID',
        name: "Jane Doe", // Full name
        email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7c4d2d4d3c8cac2d5e7c2efc891cdc1c3">[email protected]</a>", // Email address
        created_at: 1312182000 // Signup date as a Unix timestamp
    };
</script>

Answer №1

Unfortunately, the code in your HTML won't function as expected because it attempts to fetch the Intercom JS library from a specific URL that is not referenced in your TypeScript code. A more effective solution would be to utilize the Intercom npm package. By installing this package and importing it into your code, you can ensure proper functionality. However, I am not familiar with TypeScript, so I cannot guarantee there will be no challenges when incorporating the package.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to locate the element within the Datalist using jQuery by its ID

How can I make the function $('#ctl00_ContentPlaceHolder1_ShowListing_DataList1$3$0$enquire').click(function() { ... } work when clicking on any button within the DataList? I am looking to use JQuery to find the buttons by their ID and trigger t ...

Use Cypress to make requests to GraphQL endpoints using the .request method

Despite my efforts to search for information on using Cypress requests with GraphQL, I come across terms like "mock up server" and "stub" without a clear example. I am struggling to find a comprehensive guide on how to effectively utilize GraphQL with cy ...

Sending various types of data to an MVC C# controller using AJAX

Currently, I am utilizing AJAX to retrieve information from a Razor View and forward it to the controller. Although everything is functioning as expected, I now face the challenge of passing an array along with a string as the data: // View - JavaScript v ...

Refresh the Google chart in response to a state change in Vuex

Currently, I am working on a reporting page that will display various graphs. Upon entering the page, an API request is made to retrieve all default information. The plan is to enable users to later select filters based on their inputs. For instance: init ...

Tips for importing the mongoose-long plugin using the ES6 method

How can I rewrite the given import syntax into ES6 import format? import mongoose from 'mongoose'; import 'mongoose-long'(mongoose); import { Types: { Long } } from mongoose; ...

Angular dropdown button positioned to the left side

I'm encountering a slight issue with a dropdown button while working on making my website mobile-friendly. My goal is to have the button drop down on the left-hand side of it. Below is the snippet of my html code: <!-- A div element for the button ...

Adding a CSS class to a Vue component with a custom prop

I am looking to create a custom component in Vue that has the following props: text = the text to display in the link. icon = the identifier of the icon to display next to the link. < sidebar-link text="Home" icon="fa-home"> Below is the .Vue ...

Exploring the Power of ReactJS Source Mapping

After adding the .env file to my react project, I noticed that when the project is uploaded to the server, the console source is displaying all components. Although I added the .env file and included the following code: GENERATE_SOURCEMAP = false; The i ...

Combining Python Bottle with Polymer Paper Elements

My website currently has a variety of forms where users input information, which is then used to calculate and display new content using Javascript. I rely on Python Bottle for user registration, form auto-filling from the backend and database management. ...

Error message: The Next.js GraphQL-Yoga server is returning a 404 error on the

I am brand new to using graphql-yoga 3 in conjunction with next js for creating APIs with GraphQL. Unfortunately, my routes at /api/graphql are returning a 404 error even though I have followed the example provided here. The default page loads fine, but I ...

Determining the length and angle of a shadow using X and Y coordinates

I'm currently tackling the task of extracting data from a file generated by a software program that has the ability to add a shadow effect to text. The user interface allows you to specify an angle, length, and radius for this shadow. https://i.stack ...

Loading elements of a webpage in a consecutive order

I am currently working on implementing a content slider within my Django application. The specific slider that I am using can be found at this link. One challenge that I am facing is the need to load close to one hundred 'contentDiv' pages, and I ...

What is the process for passing external JSON data to a task from a file that was generated in a previous task?

Currently facing an issue with the following setup in my Gruntfile: grunt.initConfig({ shell: { // stub task; do not really generate anything, just copy to test copyJSON: { command: 'mkdir .tmp && cp stub.json .tmp/javascript ...

What is the best method for creating a header design in CSS?

My website code is pretty standard <div class="header"></div> <div class="site-inner"></div> <div class="footer"></div> How can I achieve a header background like the one shown in the image? Do I need to set the entire ...

react-navigation hook for navigating

Currently, I am utilizing the react-navigation hook and instead of repeating the hook in various components, my goal is to pass navigation as a prop. const navigation = useNavigation(); ... <MyButton resetLocation={resetLocation} navigation= ...

What is the best way to insert text into a span element within a for loop using JavaScript?

I am currently working on form validation using an array and a loop. In each required field, I have created empty span elements. Here is the JavaScript code that I have set up: var name = document.querySelector('#Name').value, firstLastName = ...

Can a hyperlink be generated by simply inputting the URL once?

As I add numerous links to my website, I can't help but feel like a novice using the <a href>. I want users to see the URL of each link immediately without needing to hover over it first. Right now, I am structuring my links like this: <a h ...

Hold on for the completion of Angular's DOM update

I am facing an issue where I need to connect the bootstrap datepicker to an input field generated by AngularJS. The typical approach of using jQuery to attach the datepicker doesn't work as expected because the element is not yet available: $(functi ...

Using Jquery to handle ajax responses through the load() function

Currently, I am working on implementing a comment voting system. In the process, I have a specific page called profile_new.php?id=194 This page utilizes jquery tabs to load an external file named sketch-comments.php?id=194&thumb=images/thumbs/1.png ...

What are some ways to enhance the loading time of my PHP-powered website?

Having troubles with my PHP-driven website that showcases real-time stock market data due to slow loading speeds. The site utilizes PHP for scraping financial information from external sources and presenting it on the front end. However, the performance is ...