Versions

• **Angular: 6.0.0
• **Angular CLI: 6.2.3
• **ng-intercom: 6.0.0
• **Node.JS: 8.12.0
• **NPM: 6.4.1

Description

I have followed the instruction in the main readme, which indicates that the intercom appId can be overridden via a boot method which is what we require. The project we are working on has multiple appId's, depending on the domain that's being accessed.

Unless an appId is specified in the forRoot method, the intercom messenger does not load. Based on the documentation it would seem that the appId can be replaced via the boot method, but this is not the case.

We use issues to track bugs and fixes, so general questions or advice should be asked on Stack Overflow or the Gitter Channels. Non "Fix/Bug" issues may closed without a formal response.

Before you submit an issue, please include:

• Angular Version (5.2)
• Angular CLI Version (1.7.3)
• Node (v9.8.0) & NPM Version (v5.6.0)

Detailed Description on how to reproduce error:

I followed instructions from the readme. not sure what's the problem

Is it possible to provide the {app_id} for intercom at a later stage? I have to pull that using an API call so its not available at boot time.

For that reason i dont have app_id to put here:

IntercomModule.forRoot({
      appId: <your_app_id>, // from your Intercom config
})

The intercom package is referencing the document which is a bad practise when using Angular. In my case it results in an error as I use Angular Universal to compile the app.

Or at least, this is my interpretation of l193

I think we need to develop some directives to tie/hook into Intercom. If anyone has other ideas about what to put here, please add it as a comment below.

Current Plan:

• Show Intercom: show a new message window
• Show Intercom with Message: Show a new message window prepopulated with content
• Track event: Track an event by name
• Log Out/Shutdown: shut down intercom, for use on a log out button

This may or may not be a bug, I am just having a hard time getting the API to function as described in the docs. I can't seem to get the button with the 'intercomShow' directive to do anything. Clicking the button with the directive also does not produce any JS errors in the console, nor does it produce a network log in the network tabs of my Chrome debugger. I think I've adequately followed the docs, but no cigar. The default setup with the index.html script works fine, so my intercom settings are likely not the issue. I wanted to run my setup by you to see if you spot anything. Important to note that as per the instructions, I did not include any script tag in my index.html.

• Angular Version: 5.2.5
• Angular CLI Version: 1.7.0
• Node & NPM Version: 8.11.1 & 5.6.0

I need to allow the user to click a button to get the message dialog from a component available after a successful login (my Dashboard login)

my app.module.ts file:

import { IntercomModule } from 'ng-intercom';
import { BrowserModule } from '@angular/platform-browser';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import {AppComponent} from './app.component';

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'Dashboard',
    pathMatch: 'full'
  }
]

@NgModule({
declarations: [
    AppComponent,
    DashboardComponent,
imports: [
    routes,
    BrowserModule,
    IntercomModule.forRoot({
      appId: '<my app id>',
      updateOnRouterChange: false
})
export class AppModule {}

my dashboard.component.ts component:

import {Component, OnInit, ViewEncapsulation} from '@angular/core';
import { Intercom } from 'ng-intercom';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  encapsulation: ViewEncapsulation.None
})
export class DashboardComponent implements OnInit {
constructor(public intercom: Intercom) {}

ngOnInit() {
    this.getList();
}

getList = function () {
    this.addressDS
      .home()
      .then(res => {
        this.home = res;
        this.intercom.boot({
          app_id: '<my app id>',
          name: res.name,
          email: res.email,
          created_at: new Date(),
        });
      });
  };
}

my dashboard.component.html:

<p>message us:</p>
<button intercomShow>test this</button>

my app.component.html:

<router-outlet></router-outlet>

I think this is an NPM worthy package... would you consider publishing it?

We use issues to track bugs and fixes, so general questions or advice should be asked on Stack Overflow or the Gitter Channels. Non "Fix/Bug" issues may closed without a formal response.

Before you submit an issue, please include:

• Angular Version - 5
• Angular CLI Version - 1.5.5
• Node & NPM Version - V9.9.0cli -version

Detailed Description on how to reproduce error:

My function call in my service is as follows:
'''initializeIntercom(username, userEmail) {
this.intercom.boot({
app_id: 'xj20wy47',
alignment: 'left',
horizontal_padding: 20,
vertical_padding: 20,
// Supports all optional configuration.
name: username, // Full name
email: userEmail, // Email address
widget: {
'activator': '#intercom'
}
});
}'''

But the chat button is on the right side of the screen rather than the left.

We use issues to track bugs and fixes, so general questions or advice should be asked on Stack Overflow or the Gitter Channels. Non "Fix/Bug" issues may closed without a formal response.

Before you submit an issue, please include:

• Angular Version - 4.4.6
• Angular CLI Version - 4.4.6
• Node & NPM Version - 6.13.1 and 3.10.10

Detailed Description on how to reproduce error:

Followed installation instructions; loadIntercom() method reaches following piece of code:
if (w.attachEvent) { w.attachEvent('onload', l); } else { w.addEventListener('load', l, false); }

runs addEventListener, but l() never fires

Versions

• Angular: "^5.2.0",
• ng-intercom: "ng-intercom": "^6.0.0-beta.1",

Description

When doing an intercom update call like this:

this.intercom.update({
      'foo': 'bar',
    });

The custom variable (defined in intercom) is not being set for the user.

I could use it for dev with no problems, but when i build for prod i had this error comming up:

ERROR in Metadata version mismatch for module C:/mdc/mdc.pagalee.dashboard/node_modules/ng-intercom/dist/index.d.ts, found version 4, expected 3, resolving symbol AppModule in C:/mdc/mdc.pagalee.dashboard/src/app/app.module.ts, resolving symbol AppModule in C:/mdc/mdc.pagalee.dashboard/src/app/app.module.ts, resolving symbol AppModule in C:/mdc/mdc.pagalee.dashboard/src/app/app.module.ts

I'm running this application on angular5

Until I added the following to my app's 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>

Versions

• Angular: 6.0.9
• Angular CLI: 6.0.8
• ng-intercom: 6.0.0-beta.2
• Node.JS: 8.11.2
• NPM: 6.1.0

Description

I have previoulsy been using the method recommended on the Intercom site (https://developers.intercom.com/docs/integrate-intercom-in-a-single-page-app) and found to be rather inconsistent/unstable. I ran accross this package and things started to work much more smooth. However, after including it in my Angular app, the majority of my unit tests fail with

Error: StaticInjectorError(DynamicTestModule)[IntercomService -> Intercom]:
StaticInjectorError(Platform: core)[IntercomService -> Intercom]:
NullInjectorError: No provider for Intercom!

I know that this means I need to add it as a provider to the unit test, but that doesn't seem to work either. Looking through the repo, I do see a tests directory, but it doesn't appear to be testing any of the Intercom module itself. What's the recommended way to make it so I can use the ng-intercom in my application without having all of my unit tests fail. Mock it?

Sorry, I found a bug and scrambled to fix it. If you could please pull the latest changes and run tsc, and publish 0.1.1 to NPM, that'd be great.

Hi - the instructions as written are not working for me.

$ npm install ng-intercom@beta --save <-- appears to be installing an alpha build that is not with the rest of the instructions:

IntercomModule.forRoot({
appId: "w0admjxc",
updateOnRouterChange: true // will automatically run update on router event changes. Default: false
})

appId and updateOnRouterChange through errors with this alpha build.

Updating to the latest beta 1.0.0-beta.9 gets eliminates these errors,

However, at compile time I get:
`
ERROR in Error: Metadata version mismatch for module C:/Projects/VisualStudio/ppnsystem/Websites/VPortalNV10/node_modules/ng-intercom/dist/index.d.ts, found version 4, expected 3, resolving symbol AppModule in C:/Projects/VisualStudio/ppnsystem/Websites/VPortalNV10/src/app/app.module.ts, resolving symbol AppModule in C:/Projects/VisualStudio/ppnsystem/Websites/VPortalNV10/src/app/app.module.ts, resolving symbol AppModule in C:/Projects/VisualStudio/ppnsystem/Websites/VPortalNV10/src/app/app.module.ts
at Error (native)
at syntaxError (C:\Projects\VisualStudio\ppnsystem\Websites\VPortalNV10\node_modules@angular\compiler\bundles\compiler.umd.js:1729:34)
at simplifyInContext (C:\Projects\VisualStudio\ppnsystem\Websites\VPortalNV10\node_modules@angular\compiler\bundles\compiler.umd.js:25111:23)
at StaticReflector.simplify (C:\Projects\VisualStudio\ppnsystem\Websites\VPortalNV10\node_modules@angular\compiler\bundles\compiler.umd.js:25123:13)
at StaticReflector.annotations (C:\Projects\VisualStudio\ppnsystem\Websites\VPortalNV10\node_modules@angular\compiler\bundles\compiler.umd.js:24553:41)
at _getNgModuleMetadata (C:\Projects\VisualStudio\ppnsystem\Websites\VPortalNV10\node_modules@angular\compiler-cli\src\ngtools_impl.js:138:31)
at _extractLazyRoutesFromStaticModule (C:\Projects\VisualStudio\ppnsystem\Websites\VPortalNV10\node_modules@angular\compiler-cli\src\ngtools_impl.js:109:26)
at Object.listLazyRoutesOfModule (C:\Projects\VisualStudio\ppnsystem\Websites\VPortalNV10\node_modules@angular\compiler-cli\src\ngtools_impl.js:53:22)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\Projects\VisualStudio\ppnsystem\Websites\VPortalNV10\node_modules@angular\compiler-cli\src\ngtools_api.js:91:39)
at AotPlugin._getLazyRoutesFromNgtools (C:\Projects\VisualStudio\ppnsystem\Websites\VPortalNV10\node_modules@ngtools\webpack\src\plugin.js:207:44)
at _donePromise.Promise.resolve.then.then.then.then.then (C:\Projects\VisualStudio\ppnsystem\Websites\VPortalNV10\node_modules@ngtools\webpack\src\plugin.js:443:24)
at process._tickCallback (internal/process/next_tick.js:109:7)'

Any ideas what's going on here?

@wbhob, I would like your feedback on this.

Usually, Intercom track the user on their journey through the app using page loads. However, when using Intercom with a SPA, the user navigation is not automatically recorded, rather, the Intercom JavaScript SDK provides an update method that can be called whenever the URL changes without a real page load to tell Intercom that the user has navigated (https://developers.intercom.com/v2.0/docs/integrate-intercom-in-a-single-page-app)

It would be a nice addition to this library to automatically listen for Router events and send the update pings to Intercom, whenever the user navigates in the app. It would be probably best to make this an optional behavior that can be turned on using some kind of configuration flag.

Is it possible to attach a method to be called from service on each route change?

For example,
If i setup:

IntercomModule.forRoot({
      updateOnRouterChange: true
})

Can i bind a function to be called on each route change to manipulate intercom data to be sent?

I have installed the module following the instructions and i get this error ”TypeError: Cannot read property 'boot' of undefined”. Here is the code:

` public intercom: Intercom
constructor() {
}

ngOnInit() {
this.intercom.boot({ /// <--- on this line is the error
app_id: 'app-id',
widget: {
"activator": "#intercom"
}
});
}`

Versions

• Angular:
• Angular CLI:
• ng-intercom:
• Node.JS:
• NPM:

Description

this error is coming while running ng build --prod

/node_modules/ng-intercom/ng-intercom.d.ts, found version 4, expected 3

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'

Using 1.0.0-beta.6 ,

Added it to app.module.ts and app.component.ts as per installation directions.

On Route change Pings are send out as well the iframe is loaded. However when I try to use the directive : <button [intercomShow]="yourMessage"> . I get the above error.

Uncaught Error: Template parse errors:
Can't bind to 'intercomShow' since it isn't a known property of 'button'. ("

  <!--<div class="al-footer-right" translate>{{'general.created"): ng:///PagesModule/Pages.html@10:48
at syntaxError (compiler.es5.js:1690) [<root>]
at TemplateParser.parse (compiler.es5.js:12811) [<root>]
at JitCompiler._compileTemplate (compiler.es5.js:26963) [<root>]
at :4200/vendor.bundle.js:113285:62 [<root>]
at Set.forEach (<anonymous>) [<root>]
at JitCompiler._compileComponents (compiler.es5.js:26883) [<root>]
at :4200/vendor.bundle.js:113172:19 [<root>]
at Object.then (compiler.es5.js:1679) [<root>]
at JitCompiler._compileModuleAndComponents (compiler.es5.js:26769) [<root>]
at JitCompiler.compileModuleAsync (compiler.es5.js:26698) [<root>]
at PlatformRef_._bootstrapModuleWithZone (core.es5.js:4535) [<root>]
at PlatformRef_.bootstrapModule (core.es5.js:4521) [<root>]
at Object.373 (main.ts:10) [<root>]

I don't see any possibility on how I can change the vertical padding for my intercom chat. In the docs of intercom they suggest to use this method. Is there a possibility to do this?
Cheers

window.intercomSettings = {
    app_id: ‘abc123’,
    alignment: 'left',			# Customize left or right position of messenger
    horizontal_padding: 20,		# Customize horizontal padding
    vertical_padding: 20		# Customize vertical padding
  };

Hello,
Does it support angular 5?

In the readme regarding ngOnInit() it says that the following line should be used:

this.intercom.init({

This gives me the error:

Property 'init' does not exist on type 'Intercom'

This error only occurred for version 1.0.0-beta.11 and not for 1.0.0-beta.10. I managed to fix it by using update instead of init. Perhaps the line in the readme should be changed to:

this.intercom.update({

I think this is a general issue with boot as it seems like it's not possible the use boot more than once.

This means if I want to use shutdown and then boot like below it doesn't work.

    this.intercom.shutdown();
    this.intercom.boot({
      app_id: environment.intercom,
      custom_launcher_selector: '#custom-intercom',
      alignment: 'left',
      hide_default_launcher: true
    });

I believe the issue is is due to the loadIntercom function as the callback isn't used after

     ic('reattach_activator')
     ic('update', config)

Problem
When building an app using the ng-intercom library in production mode, the following error is thrown:

ERROR in /path/to/project/src/$$_gendir/node_modules/ng-intercom/intercom.module.ngfactory.ts (26,82): Argument of type '{}' is not assignable to parameter of type 'IntercomConfig'.                           
  Property 'app_id' is missing in type '{}'.

This is due to the Intercom class being specified in both the module's providers and in the providers of the forRoot() method.

Solution
Only the forRoot() method should specify the Intercom class as a provider.

0.2.0 is ready to publish. We should use a CI script to publish so I don't have to ask you to pub every time 😄

¿Could language_override added to the interface?

https://www.intercom.com/help/configure-intercom-for-your-product-or-site/customize-the-intercom-messenger/localize-intercom-to-work-with-multiple-languages

Bug

Angular Version = 5.2.1
Angular CLI Version = 1.7.4
Node & NPM Version = 5.8.0

When loading the app at localhost and booting intercom widget, http request returns undifind from the request to 'https://widget.intercom.io/widget/undifined'.
I've traced this back to ng-intercom.js at:

Intercom.prototype.l = function () { var d = document; var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = "https://widget.intercom.io/widget/" + this.id; var x = d.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); };

as this.id is not a known variable of the function call this.l it returns undifined and should be:

Intercom.prototype.l = function (config) { var d = document; this.id = config.appId; var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = "https://widget.intercom.io/widget/" + this.id; var x = d.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); };,

than used as 'this.l(config);'

hi,

• I am getting below error when I install intercom package.
  https://github.com/CaliStyle/angular2-intercom
  npm install ng-intercom@latest --save
• its pointing to this line ---> init(intercomData?: object): any;
• can you guys tell me how to fix it.
• providing my code snippet below.
• this is the line I included in app.module.ts ---> import { IntercomModule } from 'ng-intercom';

node_modules/ng-intercom/dist/intercom/intercom.d.ts(19,25): error TS2304: Cannot find name 'object'.
node_modules/ng-intercom/dist/intercom/intercom.d.ts(26,25): error TS2304: Cannot find name 'object'.
node_modules/ng-intercom/dist/intercom/intercom.d.ts(41,19): error TS2304: Cannot find name 'object'.

import { Router } from '@angular/router';
import { IntercomConfig } from '../shared/intercom-config';
/**

• @description A provider with every Intercom.JS method
• @export
• @Class Intercom
  /
  export declare class Intercom {
  private config;
  private router;
  constructor(config: IntercomConfig, router: Router);
  /*
  • @description Method used to instantiate Intercom
  • @param {object} [intercomData]
  • @memberof Intercom
  • @deprecated
    /
    init(intercomData?: object): any;
    /*
  • @description
  • If you'd like to control when Intercom is loaded, you can use the 'boot' method. This is useful in situations like a one-page Javascript based application where the user may not be logged in when the page loads. You call this method with the standard intercomSettings object.
  • @param {object} [intercomData] Your intercom configuration
  • @memberof Intercom
    /
    boot(intercomData?: object): any;
    /*
  • @description
  • If you have the Respond product (combined with another product like Engage) you should call the Intercom shutdown method to clear your users’ conversations anytime they logout of your application. Otherwise, the cookie we use to track who was most recently logged in on a given device or computer will keep these conversations in the Messenger for one week. This method will effectively clear out any user data that you have been passing through the JS API.
  • @memberof Intercom
    /
    shutdown(): any;
    /*
  • @description
  • Calling the update method without any other arguments will trigger the JavaScript to look for new messages that should be displayed to the current user (the one whose details are in the window.intercomSettings variable) and show them if they exist.
  • Calling the update method with a JSON object of user details will update those fields on the current user in addition to logging an impression at the current URL and looking for new messages for the user.
  • @param {object} [data]
  • @memberof Intercom
    /
    update(data?: object): any;
    /*
  • @description
  • This will hide the main Messenger panel if it is open. It will not hide the Messenger Launcher.
  • @memberof Intercom
    /
    hide(): any;
    /*
  • @description
  • This will show the Messenger. If there are no conversations it will open with the new message view, if there are it will open with the message list.
  • If a message parameter is supplied, it will automatically open a new message window, aliasing showNewMessage().
  • @param {string} [message]
  • @memberof Intercom
    /
    show(message?: string): any;
    /*
  • @description To open the message window with the message list you can call showMessages().
  • @memberof Intercom
    /
    showMessages(): any;
    /*
  • @description To open the message window with the new message view you can call showNewMessage().
  • This function takes an optional parameter that can be used to pre-populate the message composer as shown below.
  • @param {string} message
  • @memberof Intercom
    /
    showNewMessage(message?: string): any;
    /*
  • @description
  • You can submit an event using the trackEvent method. This will associate the event with the currently logged in user and send it to Intercom. The final parameter is a map that can be used to send optional metadata about the event.
  • You can also add custom information to events in the form of event metadata.
  • @param {string} eventName
  • @param {*} [metadata]
  • @memberof Intercom
    /
    trackEvent(eventName: string, metadata?: any): any;
    /*
  • @description
  • A visitor is someone who goes to your site but does not use the messenger. You can track these visitors via the visitor user_id. This user_id can be used to retrieve the visitor or lead through the REST API.
  • @returns {string}
  • @memberof Intercom
    /
    getVisitorId(): string;
    /*
  • @description Alias for getVisitorId()
  • @alias getVisitorId()
  • @readonly
  • @type {string}
  • @memberof Intercom
    /
    readonly visitorId: string;
    /*
  • @description
  • Gives you the ability to hook into the show event. Requires a function argument.
  • @param {() => void} handler
  • @memberof Intercom
    /
    onShow(handler: () => void): any;
    /*
  • @description
  • Gives you the ability to hook into the hide event. Requires a function argument.
  • @param {() => void} handler
  • @memberof Intercom
    /
    onHide(handler: () => void): any;
    /*
  • @description
  • This method allows you to register a function that will be called when the current number of unread messages changes.
  • @param {(unreadCount?: number) => void} handler
  • @memberof Intercom
    */
    onUnreadCountChange(handler: (unreadCount?: number) => void): any;
    }

Following the tutorial in the README, I added in my ngOnInit:

		this.intercom.boot({
			app_id: 'my-app-id',
				// Supports all optional configuration.
			widget: {
				"activator": "#intercom" 
			}
		});

And I got a TS error:

ERROR in src/app/components/app/index.ts(87,22): error TS2345: Argument of type '{ app_id: string; widget: { "activator": string; }; }' is not assignable to parameter of type 'BootInput'.
  Type '{ app_id: string; widget: { "activator": string; }; }' is not assignable to type 'UserWithUid & DefaultBootInput & Any'.
    Type '{ app_id: string; widget: { "activator": string; }; }' is not assignable to type 'UserWithUid'.
      Property 'user_id' is missing in type '{ app_id: string; widget: { "activator": string; }; }'.

I'm getting the following error when I tried installing ng-intercom using yarn

error [email protected]: Expected version ">= 6.0.0 < 7.0.0.

Before you submit an issue, please include:

• Angular Version: 4
• Angular CLI Version: 1.2.6
• Node & NPM Version: 9.5.0 & 5.6.0 respectively

Detailed Description on how to reproduce error:
yarn add ng-intercom or yarn add ng-intercom@latest

Hello, I am getting this error when i run my app. I am using angular-cli.

Error: "Error: Can't resolve 'ng-intercom'" in app.module"

Error: "Error: Can't resolve 'ng-intercom' in component"

Copied from @craigeddy #11

When I use this version, I'm getting a compile error on ng serve:

ERROR in Error encountered resolving symbol values statically. Calling function 'IntercomModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symb ol AppModule in C:/Users/eddycr/Source/Repos/registration/src/app/app.module.ts, resolving symbol AppModule in C:/U sers/eddycr/Source/Repos/registration/src/app/app.module.ts

the code:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { IntercomModule } from 'ng-intercom';
import { AppComponent } from './app.component';
import { RegisterModel } from './app.registermodel';
import { RegistrationComponent } from 'app/registration/registration.component';

@NgModule({
  declarations: [
    AppComponent,
    RegistrationComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    IntercomModule.forRoot({ app_id: 'sq739kpn'})
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I also have a repo with my whole project if you want to take a look. I'm probably doing/forgetting something noob-ish. craigeddy/IntercomProtype (angular2-intercom-alpha branch)

Versions

• Angular: 5.2.0
• Angular CLI: 1.6.8
• ng-intercom: 6.0.0-beta.2
• Node.JS:
• NPM: 5.8.0

Description

IntercomJS is loaded on window.onload event instead of scriptElement.onload, or by a function to init and load the js.

When intercom js is injected before window.load is fired, the module will load and work just fine.
But when intercom is injected after window.load was fired, the intercom JS won't be loaded because window.load already fired, and thus the component won't work.

To fix this issue, we had to use this workaround in our wrapper component to manually load the intercom js.

const intercomJsNotLoaded = !$(`script[src="https://widget.intercom.io/widget/${environment.intercomKey}"]`).length;
if (intercomJsNotLoaded) {
  // Load Intercom JS
  const loadIntercomJS: any = this.intercom.l(this.intercomConfig);
  loadIntercomJS.apply(this.intercom);
}

Possible solution

Is it possible to move the module loading through a function to be called manually or replace the window.onload with scriptElement.onload of the intercom js script injected?

Hi, is ng-intercom going to publish an update in order to support latest update with Access Tokens? You can read about it here: https://developers.intercom.com/v2.0/docs/replacing-your-api-keys-with-access-tokens-step-by-step-guide#section-step-2-replace-your-api-keys

I received an email which says:

As you may be aware, we've been in the process of deprecating API Keys over the past 18 months in favour of more secure methods. As the final step of this process, your API Keys will be disabled at 4pm GMT on April 23 2018.

Thanks in advance for any reply!

I've installed Intercom throughnpm install ng-intercom@beta --save

When trying to import the Intercom in app.module.ts

import { IntercomModule } from 'ng-intercom';
..
    IntercomModule.forRoot({
      appId: "your_app_id", 
      updateOnRouterChange: trueDefault: `false`
    })
..

I get the following two errors:

Argument of type '{ appId: string; updateOnRouterChange: boolean; }' is not assignable to parameter of type 'IntercomConfig'.
Object literal may only specify known properties, and 'appId' does not exist in type 'IntercomConfig'.

I'm using Angular 4.

Hi,

I am getting error Metadata version mismatch for module ../node_modules/ng-intercom/dist/index.d.ts, found version 4, expected 3,

I am using angular cli. The angular cli version is up to date!.

Please suggest.

Unless there is anyone in disagreement with a good use case, ng-intercom will follow the major release numbers of Angular. The next released version of ng-intercom will be v6 and the current master will be marked as v5.

With version 1.0.0-beta.12 - when ng build --prod is called it fails to compile saying:

ERROR in Error during template compile of 'CoreModule'
  Function calls are not supported in decorators but 'IntercomModule' was called.

P.S: I use a CoreModule instead of AppModule

It works fine with 1.0.0-beta.11 though

Angular CLI: 1.7.2
Node: 9.5.0
OS: darwin x64
Angular: 5.2.7
... common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... router

@angular/cli: 1.7.2
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

It does not appear to be calling the l() function within the util/load-intercom.ts file anymore.

Originally posted by @chrishawn in https://github.com/CaliStyle/ng-intercom/issue_comments#issuecomment-430313444

Versions

• Angular: 6.1.6
• Angular CLI: 6.1.5
• ng-intercom: 6.0.0-beta.3
• Node.JS: 10.9.0
• NPM: 6.4.1

Description

After moving to beta.3, started getting errors Object doesn't support property or method 'Intercom'

File
webpack:///node_modules/ng-intercom/esm5/ng-intercom.js:57e.prototype.update

Sometimes another error shows window.Intercom is not a function

File
webpack:///node_modules/ng-intercom/esm5/ng-intercom.js:58e.prototype.update

It was working fine with beta.2

Attached image from bugsnag for reference.

We need to start committing package-locks for safety. They've been a standard for 2 major versions of NPM. Thanks! - Wilson

First off love the easy to use library that you have. I ran into a bug recently when trying to use this library. We didn't have a script tag on our page and we ended up getting a parentNode error because of this which was a bit misleading.

Would it be a more ideal situation to rely on the head element here or possible add some documentation about the requirement of at least one script tag? Thanks and if you would like me to put a PR in for this change just let me know!

https://github.com/CaliStyle/angular2-intercom/blob/56135794e7a351215b68720ccfae2c84588d136b/src/util/load-intercom.ts#L11

Re-opeing issue #6 as I'm getting the same issue. I followed the instruction on he home page, I add the import in my module.ts file, then add ng-intercom to the list of imports and get this error:

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve 'ng-intercom' in '/Users/otusweb/Documents/tweetPresenter/tweetapp-web/src/app'
 @ ./src/app/app.module.ts 18:0-45
 @ ./src/main.ts
 @ multi ./src/main.ts

my app.module.ts file

// angular imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule, Http, RequestOptions } from '@angular/http';
import { provideAuth, AuthHttp, AuthConfig } from 'angular2-jwt';

// third party imports
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {InlineEditorModule} from 'ng2-inline-editor';
import {RollbarModule} from 'angular-rollbar/lib';
import { ProgressHttpModule } from "angular-progress-http";
import { IntercomModule } from 'ng-intercom';

[... other imports ]
@NgModule({
  declarations: [
      AppComponent,
      PresentationsComponent,
      PresentationDetailComponent,
      SlideDetailComponent,
      HomeComponent,
      NotFoundComponent,
      UploadProgressModalContent,
      BetaGateComponent
  ],
  imports: [ 
      BrowserModule,
      FormsModule,
      HttpModule,
      ProgressHttpModule,
      AppRoutingModule,
      InlineEditorModule,
      RollbarModule.forRoot({
        accessToken: 'xxxxx',
      }),
      NgbModule.forRoot(), 
    IntercomModule.forRoot()
  ],
  providers: [
    { provide: ErrorHandler, useClass: CustomErrorHandler },
    PresentationService,
    SlideService,
    UserService,
    Auth,
    {
      provide: AuthHttp,
      useFactory: authHttpServiceFactory,
      deps: [ Http, RequestOptions ]
    },
  AuthGuard,
  BetaGuard,
  LoggedOutGuard],
  entryComponents:
  [UploadProgressModalContent],
  bootstrap: [AppComponent]
})

export class AppModule { }

OS: mac OS 10.12

os: darwin x64
@angular/common: 4.0.2
@angular/compiler: 4.0.2
@angular/core: 4.0.2
@angular/forms: 4.0.2
@angular/http: 4.0.2
@angular/platform-browser: 4.0.2
@angular/platform-browser-dynamic: 4.0.2
@angular/router: 4.0.2
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.2```

npm view ng-intercom version
```0.2.1```

• Angular Version 6.0.0
• Angular CLI Version 6.0.0
• RxJS Version 6.1.0
• TypeScript Version 2.7.2
• Node Version 8.9.1
• NPM Version 5.5.1
• ng-intercom Version 1.0.0-beta.13

Expected/desired
Support Angular 6, TypeScript 2.7 and RxJS 6 without errors

Actual
Getting this error when starting a newly created angular-cli project with this library added to it:

TypeError: Cannot read property 'events' of null

Here is the project and branch reproducing the above error. Created the project using angular-cli defaults with yarn as the package manager while also adding rxjs-compat, which should smooth over being able to use RxJS 5.x.

Solution
A large part of the work might be possible by simply using ng update with @angular/core and rxjs as outlined in the Angular 6 release post.

Given that I think upgrading to support Angular 6 will invariably break everyone using below angular 5 and below I think it would make sense to couple this update with a major version bump. Meaning bumping the version number to 2.x.

Oopsy, I made an emergency fix. No API changes, but it does work!

I'm using the alpha branch. Importing the module like so: IntercomModule.forRoot({ app_id: '<%= INTERCOM_ID %>'})