Unable to use in angular 6 #103

kulandairaj · 2019-02-08T22:15:34Z

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:

dpopp07 · 2019-02-08T22:31:43Z

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

kulandairaj · 2019-02-11T16:15:37Z

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 · 2019-02-17T23:22:40Z

Please provide a set of reproducible steps.

alu-ac · 2019-03-13T21:17:36Z

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 · 2019-03-28T21:18:23Z

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 · 2019-04-02T00:07:02Z

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 · 2019-04-02T14:37:06Z

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 · 2019-04-03T06:32:53Z

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 · 2019-04-03T14:11:52Z

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 · 2019-04-03T17:54:09Z

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 · 2019-04-03T18:53:32Z

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

sinny777 · 2019-04-04T06:12:12Z

@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 · 2019-04-04T08:08:15Z

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

Fixes #103 and could also solve the problem with #83. I made a mistake with the rebase so we should squash this with a `fix: Add support for Angular` commit message Co-authored-by: Michael Chou <[email protected]> Co-authored-by: Dustin Popp <[email protected]> Co-authored-by: null <[email protected]> Co-authored-by: Darío Hereñú <[email protected]> Co-authored-by: Gurvinder Singh <[email protected]>

watson-github-bot · 2019-04-05T15:54:01Z

🎉 This issue has been resolved in version 0.35.10 🎉

The release is available on:

Your semantic-release bot 📦🚀

ashishiiit01 · 2019-05-14T06:08:29Z

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 · 2019-11-07T02:59:06Z

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"
  }

germanattanasio added the support label Feb 17, 2019

germanattanasio added the bug label Apr 2, 2019

germanattanasio mentioned this issue Apr 5, 2019

Use readable-stream and fix the problem for angular users #118

Merged

germanattanasio closed this as completed in #118 Apr 5, 2019

watson-github-bot added the released label Apr 5, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unable to use in angular 6 #103

Unable to use in angular 6 #103

kulandairaj commented Feb 8, 2019

dpopp07 commented Feb 8, 2019

kulandairaj commented Feb 11, 2019 •

edited

Loading

germanattanasio commented Feb 17, 2019

alu-ac commented Mar 13, 2019 •

edited by germanattanasio

Loading

yLeushun commented Mar 28, 2019 •

edited by germanattanasio

Loading

germanattanasio commented Apr 2, 2019

yLeushun commented Apr 2, 2019 •

edited by germanattanasio

Loading

sinny777 commented Apr 3, 2019

dpopp07 commented Apr 3, 2019

sinny777 commented Apr 3, 2019 •

edited by germanattanasio

Loading

germanattanasio commented Apr 3, 2019

sinny777 commented Apr 4, 2019

yLeushun commented Apr 4, 2019

watson-github-bot commented Apr 5, 2019

ashishiiit01 commented May 14, 2019 •

edited

Loading

playground commented Nov 7, 2019

Unable to use in angular 6 #103

Unable to use in angular 6 #103

Comments

kulandairaj commented Feb 8, 2019

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

dpopp07 commented Feb 8, 2019

kulandairaj commented Feb 11, 2019 • edited Loading

germanattanasio commented Feb 17, 2019

alu-ac commented Mar 13, 2019 • edited by germanattanasio Loading

yLeushun commented Mar 28, 2019 • edited by germanattanasio Loading

germanattanasio commented Apr 2, 2019

yLeushun commented Apr 2, 2019 • edited by germanattanasio Loading

sinny777 commented Apr 3, 2019

dpopp07 commented Apr 3, 2019

sinny777 commented Apr 3, 2019 • edited by germanattanasio Loading

germanattanasio commented Apr 3, 2019

sinny777 commented Apr 4, 2019

yLeushun commented Apr 4, 2019

watson-github-bot commented Apr 5, 2019

ashishiiit01 commented May 14, 2019 • edited Loading

playground commented Nov 7, 2019

kulandairaj commented Feb 11, 2019 •

edited

Loading

alu-ac commented Mar 13, 2019 •

edited by germanattanasio

Loading

yLeushun commented Mar 28, 2019 •

edited by germanattanasio

Loading

yLeushun commented Apr 2, 2019 •

edited by germanattanasio

Loading

sinny777 commented Apr 3, 2019 •

edited by germanattanasio

Loading

ashishiiit01 commented May 14, 2019 •

edited

Loading