COBI.Bike integration with Angular

[divid3byzero]

Hello,

I would like to use Angular for development with the COBI.Bike DevKit. As per documentation this is possible but I have not managed to get any real time data. What I've done is the following:

- Included COBI.js in index.html via script tag.
- Declare COBI as a variable and include via custom type definition
- I want to wrap the COBI API inside an Angular service later but for now I've initialized COBI using COBI.init('token') inside the Angular component and subscribed to COBI.rideService.speed and wanted to update the according variable in the template.

What happens is that there is no real time data as in the examples. The current speed data only get's displayed when I reload the browser, and this actually only works sometimes. I've already tried to initialize COBI in an Angular app initializer to be sure that COBI is definetly initialized before accessing the API. That also does not change the described behaviour.

I have already seen that all the example applications use plain JavaScript. Is this really the only way to use COBI.js?

[divid3byzero]

Hello,

thank you for your answer.

Is there any news concerning the Angular issue? That is a show stopper for my development so I would be very glad if you could look into that.

Regards

[dfarache-ebike]

Hello,

could you point to a Github repository so that we could have a look?

Below you have a snippet of the main.ts, which is working with our SDK. Our suggestions would be trying the following:

• importing platform-browser-dynamic
• configuring a platformBrowserDynamic bootstrapping of the application

If you could let us check the source code, we would be more than happy to help you troubleshoot this issue.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.log(err));

// Authenticate your module
COBI.init('token — can be anything right now');

[divid3byzero]

Hello,

I have already set up a Github repository and told you about it in my answer about month ago: https://community.developer.bosch.com/t5/COBI-Bike-SDK/COBI-Bike-integration-with-Angular/m-p/12768/...

Here is the link again: https://github.com/divid3byzero/ng-cobi-demo

[dfarache-ebike]

Hello,

Sorry for the dely in the reply.

I cloned your repository and run it. Indeed, the COBI SDK complains about a subscription taking place before init is executed.

Playing around with it, I discovered that removing the setTimeout in the component fixes the issue. I was able to print to console the speed stream,

Regards,

[divid3byzero]

Hello,

I've removed the setTimeout function as suggested. I'm initilizing Cobi using an Angular app initializer.

It still does not update the data in the UI with the data from the stream. I've added a button to trigger the Cobi data stream subscribtion and added some basic logging. As you can see the data stream is being written from the Cobi SDK but the UI is not being updated. You can see for yourself: https://github.com/divid3byzero/ng-cobi-demo.

Here is the link to a screen capture: https://vimeo.com/444666788

Regards
Bene