Unable to use in angular 6

[kulandairaj]

Remember, an issue is not the place to ask questions. You can use Stack Overflow for that, or you may want to start a discussion on the dW Answers.

When reporting a bug, please be sure to include the following:

• [ ] Steps to reproduce
• [ ] Expected behavior
• [ ] Actual behavior
• [ ] Browser version(s)
• [ ] SDK version

[dpopp07]

Hi @kulandairaj Will you give more information? What exactly isn't working? Will you provide steps to reproduce?

[kulandairaj]

Hi, I have installed npm watson-speech

and imported like this in my app.component.ts file

var recognizeMic = require('watson-speech/speech-to-text/recognize-microphone');

I get below error when i compile the application.

Error:

ERROR in ./node_modules/watson-speech/speech-to-text/content-type.js Module not found: Error: Can't resolve 'path' in 'C:\Application\AICS\Watson\aspa-mic\node_modules\watson-speech\speech-to-text' ERROR in ./node_modules/microphone-stream/microphone-stream.js Module not found: Error: Can't resolve 'stream' in 'C:\Application\AICS\Watson\aspa-mic\node_modules\microphone-stream' ERROR in ./node_modules/watson-speech/speech-to-text/recognize-microphone.js Module not found: Error: Can't resolve 'stream' in 'C:\Application\AICS\Watson\aspa-mic\node_modules\watson-speech\speech-to-text' ERROR in ./node_modules/watson-speech/speech-to-text/recognize-stream.js Module not found: Error: Can't resolve 'stream' in 'C:\Application\AICS\Watson\aspa-mic\node_modules\watson-speech\speech-to-text' ERROR in ./node_modules/watson-speech/speech-to-text/webaudio-l16-stream.js Module not found: Error: Can't resolve 'stream' in 'C:\Application\AICS\Watson\aspa-mic\node_modules\watson-speech\speech-to-text' ERROR in ./node_modules/watson-speech/speech-to-text/format-stream.js Module not found: Error: Can't resolve 'stream' in 'C:\Application\AICS\Watson\aspa-mic\node_modules\watson-speech\speech-to-text' ERROR in ./node_modules/watson-speech/speech-to-text/writable-element-stream.js Module not found: Error: Can't resolve 'stream' in 'C:\Application\AICS\Watson\aspa-mic\node_modules\watson-speech\speech-to-text' ERROR in ./node_modules/watson-speech/speech-to-text/result-stream.js Module not found: Error: Can't resolve 'stream' in 'C:\Application\AICS\Watson\aspa-mic\node_modules\watson-speech\speech-to-text' ERROR in ./node_modules/watson-speech/speech-to-text/speaker-stream.js Module not found: Error: Can't resolve 'stream' in 'C:\Application\AICS\Watson\aspa-mic\node_modules\watson-speech\speech-to-text' i ｢wdm｣: Failed to compile.

[germanattanasio]

Please provide a set of reproducible steps.

[alu-ac]

install angular cli lastest

ng version:

Angular CLI: 7.3.5
Node: 10.15.3
OS: win32 x64
Angular: 7.2.9
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.5
@angular-devkit/build-angular     0.13.5
@angular-devkit/build-optimizer   0.13.5
@angular-devkit/build-webpack     0.13.5
@angular-devkit/core              7.3.5
@angular-devkit/schematics        7.3.5
@angular/cli                      7.3.5
@ngtools/webpack                  7.3.5
@schematics/angular               7.3.5
@schematics/update                0.13.5
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.29.0_

ng new {{project_name}}
npm install --save watson-speech

modify app.component.ts to be

import { Component, OnInit } from '@angular/core';
import recognizeMicrophone from 'watson-speech/speech-to-text/recognize-microphone';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
    ngOnInit(): void {
        let resultStream = recognizeMicrophone.recognizeMicrophone();
        //throw new Error("Method not implemented.");
    }
  title = 'rep-step-project';
}

run:

ng b

[yLeushun]

Hi, Everybody I have the same issue for angular 6 angular 7. Only Angular 5 allows to use "watson-speech" without errors

npm i path stream - does not resolve the issue (appears the new in the browser "buffer is not defined")

import { recognizeMicrophone} from 'watson-speech/speech-to-text/recognize-microphone';

  startStream(): void {
    this.isStreaming = true;
    this.stream = recognizeMicrophone(this.setOptions(this.token));
    this.ngZone.runOutsideAngular(() => {
      this.stream.on('data', data => {
        this.ngZone.run(() => {
          this.text = data.alternatives[0].transcript;
        });
      });
    });
  }

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.7
@angular-devkit/build-angular     0.13.7
@angular-devkit/build-optimizer   0.13.7
@angular-devkit/build-webpack     0.13.7
@angular-devkit/core              7.3.7
@angular-devkit/schematics        7.3.7
@angular/cli                      7.3.7
@ngtools/webpack                  7.3.7
@schematics/angular               7.3.7
@schematics/update                0.13.7
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.29.0

node -v
v8.9.0

[germanattanasio]

I just published a new version where we use webpack and babel to bundle the javascript. Can you please check if the latest changes fixed your issue @yLeushun?

[yLeushun]

Hi German, Thank you for your attention

Unfortunately, it did not help, it seems that since Angular6 something changed in webpack setup and now it is not possible to use Angular-CLI to build a app...

Here the full package.json

{
  "name": "ap",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "core-js": "^2.5.4",
    "path": "^0.12.7",
    "rxjs": "~6.3.3",
    "rxjs-compat": "^6.4.0",
    "stream": "0.0.2",
    "tslib": "^1.9.0",
    "watson-developer-cloud": "^3.18.4",
    "watson-speech": "0.35.9",
    "websocket-stream": "^5.3.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.6",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^8.10.45",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }
}

Error in the browser when start app(ng serve -o)

ReferenceError: Buffer is not defined[Learn More]
index.js:4
./node_modules/microphone-stream/node_modules/buffer-from/index.js
index.js:4
__webpack_require__
bootstrap:78
./node_modules/microphone-stream/microphone-stream.js
microphone-stream.js:5:17
__webpack_require__
bootstrap:78
./node_modules/watson-speech/speech-to-text/recognize-microphone.js
recognize-microphone.js:19:23
__webpack_require__
bootstrap:78
./src/app/watson/watson.component.ts
http://localhost:4200/main.js:270:107
__webpack_require__
bootstrap:78
./src/app/app.module.ts
http://localhost:4200/main.js:205:82
__webpack_require__
bootstrap:78
./src/main.ts
main.ts:1
__webpack_require__
bootstrap:78
[0]
http://localhost:4200/main.js:436:18
__webpack_require__
bootstrap:78
checkDeferredModules
bootstrap:45
webpackJsonpCallback
bootstrap:32
<anonymous>

[sinny777]

I'm also facing the same issue and am using Angular 6. I've installed stream and path modules and then it compiled successfully but running on browser throws error "Buffer is not defined". Is there any other way of implementing Watson STT with Angular 6 (backend is Nodejs) ?

[dpopp07]

Hey everyone, I believe this is due to a decision made in Angular 6 to stop polyfilling Node modules. This decision is explained in this comment on an issue in their repo. This broke a lot of users and seems to be affecting us as well, we just haven't yet found a workaround

[sinny777]

I finally got this to working with Angular 6 after making following changes:

npm install readable-stream --save

Update all files to use readable-stream instead of stream inside node_modules/watson-speech/speech-to-text like this:

var {
  Readable,
  Writable,
  Transform,
  Duplex,
  pipeline,
  finished
} = require('readable-stream');

Make sure polyfills.ts has following entries:

(window as any).global = window;
(window as any).process = require('process/browser');
import 'zone.js/dist/zone';  // Included with Angular CLI.
global.Buffer = global.Buffer || require('buffer').Buffer;

That's it.

[germanattanasio]

@sinny777 do you mind writing a PR to this project? Maybe that could help fix the issue for the other people here

[sinny777]

@germanattanasio I've just submitted a PR to this project and more than anyone else I also need this fix so that it works with Angular6

[yLeushun]

@sinny777, Your solution is excellent!!! It works on Angular7

[watson-github-bot]

:tada: This issue has been resolved in version 0.35.10 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[ashishiiit01]

I am getting error

    at new MicrophoneStream (microphone-stream.js:114)
    at recognizeMicrophone (recognize-microphone.js:107)
    at bot.component.ts:24
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Object.onInvoke (core.js:14060)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
    at zone.js:889
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:14051) ```

I am using node.js in Backend . I am getting the token from the backend but when i clicked to microphone error is coming from catch section.

This is my code

import { Component, OnInit } from '@angular/core'; import recognizeMicrophone from 'watson-speech/speech-to-text/recognize-microphone'

@Component({ selector: 'app-bot', templateUrl: './bot.component.html', styleUrls: ['./bot.component.css'] }) export class BotComponent implements OnInit {

constructor() { }

ngOnInit() { }

onListenClick() {

fetch('https://876409.ngrok.io/api/speech-to-text/token') .then(function(response) { return response.text(); }).then(function (token) { console.log('token',token) var stream = recognizeMicrophone({ token: token, // use access_token as the parameter name if using an RC service objectMode: true, // send objects instead of text extractResults: true, // convert {results: [{alternatives:[...]}], result_index: 0} to {alternatives: [...], index: 0} outputElement : '#speech' , model : 'es-ES_BroadbandModel', format: true // optional - performs basic formatting on the results such as capitals an periods }); stream.on('data', function(data) { console.log("1111111") console.log(data); });

stream.on('error', function(err) {
    console.log("2222222")
    console.log(err);
});

// document.querySelector('#stop').onclick = stream.stop.bind(stream); }).catch(function(error) { console.log("3333333333333") console.log(error); });

}

}

[playground]

I'm running into the same issue

Module not found: Error: Can't resolve 'watson-speech/speech-to-text/recognize-microphone'

  "dependencies": {
    "@angular/animations": "~8.1.2",
    "@angular/common": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/router": "~8.1.2",
    "comlink": "^4.1.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "watson-speech": "^0.37.1",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.801.2",
    "@angular/cli": "~8.1.2",
    "@angular/compiler-cli": "~8.1.2",
    "@angular/language-service": "~8.1.2",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }