CaliStyle / ng-intercom

Angular 7+ Wrapper for Intercom.com
MIT License
54 stars 46 forks source link

Error initialising Intercom in app.module.ts #22

Closed newPrimitives closed 7 years ago

newPrimitives commented 7 years ago

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.

newPrimitives commented 7 years ago

Okay, for some strange reason this now works, I've installed intercom again by using npm install ng-intercom --save and it works, however the chat icon is not showing up. I'm also using the code from the readme with one addition, which is user_id.

wbhob commented 7 years ago

The beta has been moved to the latest tag, so that has the latest version. The code from the readme should not take a user_id property in forRoot(), so that may be your issue. Are you getting any console logs or errors?

newPrimitives commented 7 years ago

I've used user_id in my component when I wanted to display the intercom chat widget. I used the exact same code as the example in readme and initially i get Intercom.init is deprecated and will be removed in a future release. Please use Intercom.boot. After I replace to this.intercom.boot nothing happens. No errors in the console. not widget in the corner.

wbhob commented 7 years ago

To clarify: init works, and boot does not?

newPrimitives commented 7 years ago

No, nothing works, the only difference is that init throws console warning and boot doesn't show anything. In both cases, I don't see the chat widget in the corner. Just to test it, I've included a vanilla JS code in my index.html file in the header and the chat button shows up, so it's definitely an issue with the library.

wbhob commented 7 years ago

@newPrimitives init is deprecated in favor of boot to more closely match the IntercomJS API.

Can you please share a repo so I can see the issue?

newPrimitives commented 7 years ago

It's a private repo but here's how I integrate it in the component:

In the app.module.ts

...

import { IntercomModule } from 'ng-intercom';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ....
    IntercomModule.forRoot({ appId: "XXXX", updateOnRouterChange: true })
  ],
})

In the component:

....

import { Intercom } from 'ng-intercom';

...

export class ManageSpacesComponent implements OnInit {

constructor(private router: Router, private db: AngularFireDatabase, private auth: AuthService, public intercom: Intercom) {

  }

ngOnInit() {
    this.intercom.boot({
      app_id: "XXXXX",
      widget: {
        "activator": "#intercom" 
      }
    });
  }
}

For the sake of testing I just want to see a blue chat bubble in the bottom right corner.

wbhob commented 7 years ago

just call this.intercom.boot, and appId should be app_id

wbhob commented 7 years ago

If that is the issue, let me know so I can fix the docs

newPrimitives commented 7 years ago

Unfortunately, not. My IntercomConfig looks like this:

export interface IntercomConfig {
    appId: string;
    updateOnRouterChange?: boolean;
    apiToken?: string;
}

so app_id instead of appId throws an error. Calling just this.intercom.boot() doesn't help either.

wbhob commented 7 years ago

What version are you on?

newPrimitives commented 7 years ago

npm-list shows ng-intercom@1.0.0-beta.6

wbhob commented 7 years ago

Ok I’ll try to take a look tonight. Thanks for letting us know!

newPrimitives commented 7 years ago

Thank you, let me know the results, really appreciate it.

alexnoox commented 7 years ago

I'm having the same issue. I've been investigating a bit:

The only issue that I encounter now is that I can't use alignment: 'left'. It is working when using the vanilla JS, but not using the lib.

wbhob commented 7 years ago

I'm beginning to think it's something wrong with loading intercom asynchronously. I may need to dive in and investigate more. PRs would be accepted and greatly appreciated

wbhob commented 7 years ago

Update: I can reproduce this error. It seems to be a whitelist error, but it could be something entirely different. Open to suggestions and PRs.

wbhob commented 7 years ago

Alright folks, I just released beta.7. Thanks for your patience! I've verified that it is working locally.

As an aside, make sure that you have whitelisted localhost so that Intercom knows requests are coming from you. I recommend using the TEST app so that you don't go into production with localhost whitelisted!