CODEWITHSUNDEEP
angularwebpackgoogle-translatetranslate
John
John

Reputation: 333

google-translate-api in an Angular 2 app

I would like to play with the (free) google-translate-api in an Angular app (I'm using v4.x now) and it's not at all obvious to me how to import, inject and use this. I am fairly new to Angular so I'm sure that is part of the problem. I have seen the docs at https://www.npmjs.com/package/google-translate-api, but I don't know how to use it in Angular.

So with this code:

import { Injectable } from '@angular/core';
import { translate as Translate } from 'google-translate-api';

@Injectable()
export class GoogleTranslateService {

  constructor(private translate: Translate) {
   }
}

I get:

ERROR in ./~/got/index.js
Module not found: Error: Can't resolve './package' in '...\node_modules\got'
 @ ./~/got/index.js 19:12-32
 @ ./~/google-translate-api/index.js
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

ERROR in ./~/osenv/osenv.js
Module not found: Error: Can't resolve 'child_process' in '...\node_modules\osenv'
 @ ./~/osenv/osenv.js 3:11-35
 @ ./~/configstore/index.js
 @ ./~/google-translate-token/index.js
 @ ./~/google-translate-api/index.js
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

The author of got tells me that this is a problem with webpack.

Any ideas?

Upvotes: 2

Views: 2248

Answers (1)

janpio
janpio

Reputation: 10902

Seems got is doing some require in a way webpack doesn't understand by default.

Here is a workaround:

I added this to my webpack.config.js file:

resolve: {
    extensions: ['.js', '.json']
}

(Source: https://github.com/sindresorhus/got/issues/266#issuecomment-297996416)

Upvotes: 1

Related Questions