Developer Portal Community

    cancel
    Showing results for 
    Search instead for 
    Did you mean: 
    SOLVED

    COBI.Bike integration with Angular

    Highlighted

    COBI.Bike integration with Angular

    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?

    10 REPLIES 10
    Highlighted
    Community Moderator

    Re: COBI.Bike integration with Angular

    Hello divid3byzero,

    Thank you for your question and your interest in the COBI.Bike SDK.

    It is definitely possible to use Angular and our Devkit together. Could you please tell me which version of Angular are you using? Is it Angular.js (version 1.x) or "Angular.io" (version 2 and higher).

    In the case of Angular.io, we have found that it helps to start the main file, probably your main.ts, with the following line:

     

    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

     

     

    Let us know if that worked!! 

    Highlighted

    Re: COBI.Bike integration with Angular

    Hello,

    thank you for your quick answer. I using Angular (version 9.1.1) not Angular.js. Your suggestion to add the plattformBrowserDynamic import to the top of the main.ts did not help. I can see logging output of Cobi data which very probably comes from the devkit, so it seems to be basically working.

    I've set up a basic Angular demo project on GitHub for you to look at to illustrate how I set up the application: https://github.com/divid3byzero/ng-cobi-demo

    Sidenote: I noticed that the logging output on the console says the following on initially loadinig the application:

     

    COBI.init failed. Retrying in 500 milliseconds

     

    The next init is successful. I don't think that that has anything to do with my problem but I am still wondering why this is happening. I've also experienced an issue with the module "MyModule" that was added to the Cobi app after registering as a developer. But I guess I'd best open another thread for that.

     

    Highlighted

    Re: COBI.Bike integration with Angular

    Is there any news on this?

    Highlighted
    Community Moderator

    Re: COBI.Bike integration with Angular

    Hello divid3byzero,

    Sorry for the late reply.

    With regards to the message you mention, this is the normal behaviour. Our Javascript framework tries to connect with the COBI.Bike app every 500ms until it gets a success message from the system. Since it usually takes a few seconds to establish this connection, it is normal to see a few of this messages when you start your module

    COBI.init failed. Retrying in 500 milliseconds

     

    Best regards,

     

    Icon--AD-black-48x48Icon--address-consumer-data-black-48x48Icon--appointment-black-48x48Icon--back-left-black-48x48Icon--calendar-black-48x48Icon--center-alignedIcon--Checkbox-checkIcon--clock-black-48x48Icon--close-black-48x48Icon--compare-black-48x48Icon--confirmation-black-48x48Icon--dealer-details-black-48x48Icon--delete-black-48x48Icon--delivery-black-48x48Icon--down-black-48x48Icon--download-black-48x48Ic-OverlayAlertIcon--externallink-black-48x48Icon-Filledforward-right_adjustedIcon--grid-view-black-48x48IC_gd_Check-Circle170821_Icons_Community170823_Bosch_Icons170823_Bosch_Icons170821_Icons_CommunityIC-logout170821_Icons_Community170825_Bosch_Icons170821_Icons_CommunityIC-shopping-cart2170821_Icons_CommunityIC-upIC_UserIcon--imageIcon--info-i-black-48x48Icon--left-alignedIcon--Less-minimize-black-48x48Icon-FilledIcon--List-Check-grennIcon--List-Check-blackIcon--List-Cross-blackIcon--list-view-mobile-black-48x48Icon--list-view-black-48x48Icon--More-Maximize-black-48x48Icon--my-product-black-48x48Icon--newsletter-black-48x48Icon--payment-black-48x48Icon--print-black-48x48Icon--promotion-black-48x48Icon--registration-black-48x48Icon--Reset-black-48x48Icon--right-alignedshare-circle1Icon--share-black-48x48Icon--shopping-bag-black-48x48Icon-shopping-cartIcon--start-play-black-48x48Icon--store-locator-black-48x48Ic-OverlayAlertIcon--summary-black-48x48tumblrIcon-FilledvineIc-OverlayAlertwhishlist