Monday, 3 April 2017

How to use Johnny-five in Angular2 project

Please, I am new to angular2 and would like help implementing Johnny-Five in angular2.

1 - I created a provider (J5Provider):

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';

var raspi = require('raspi-io');
var j5 = require('johnny-five');

@Injectable()
export class J5Provider {

  private board: any;

  constructor() {
    this.board = new j5.Board({
      io: new raspi()
    });

    this.board.on('ready', function () {
      var led = new j5.Led('P1-7');
      led.strobe(500);
    });
  }
}

2 - Then I tried to instantiate in app.module.ts in an Ionic2 project:

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import {J5Provider} from '../providers/j5-provider'



@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    J5Provider,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

3 - But, when I run I get the following error:

repl.js:1 Uncaught Error: Cannot find module "repl"
    at v (polyfills.js:3)
    at webpackMissingModule (repl.js:1)
    at Object.<anonymous> (repl.js:1)
    at Object.<anonymous> (repl.js:106)
    at __webpack_require__ (bootstrap c6de802…:19)
    at Object.<anonymous> (board.js:19)
    at Object.<anonymous> (board.js:1269)
    at __webpack_require__ (bootstrap c6de802…:19)
    at Object.<anonymous> (accelerometer.js:1)
    at Object.<anonymous> (accelerometer.js:1175)
    at __webpack_require__ (bootstrap c6de802…:19)
    at Object.noop (johnny-five.js:11)
    at __webpack_require__ (bootstrap c6de802…:19)
    at Object.<anonymous> (app.component.ts:8)
    at __webpack_require__ (bootstrap c6de802…:19)

Please can anyone guide me on how I do this implementation? Thanks in advance.



via Luis Alberto Pereira

No comments:

Post a Comment