Third party library: google-protobuf eval issue

[jorgjanke]

I am trying to install google-protobuf, which has two components
a) npm package
b) generated js files

OS?

Mac OSX Sierra

Versions.

angular-cli: 1.0.0-beta.24
node: 6.8.1
os: darwin x64
@angular/common: 2.4.1
@angular/compiler: 2.4.1
@angular/core: 2.4.1
@angular/forms: 2.4.1
@angular/http: 2.4.1
@angular/platform-browser: 2.4.1
@angular/platform-browser-dynamic: 2.4.1
@angular/router: 3.4.1
@angular/compiler-cli: 2.4.1

Repro steps.

per doc:

1. npm install google-protobuf --save
   copied the protoc generated js files in a local folder libraries/protoc
2. added in angular-cli.json:

      "scripts": [
        "../node_modules/google-protobuf/google-protobuf.js",
        "libraries/protoc/client_pb.js"
      ],

3. in src/typings.d.ts:

declare module 'google-protobuf';
declare module 'client_pb';

4. in the service

import * as googleProtobuf from 'google-protobuf';
import * as p from 'client_pb';

The log given by the failure.

after running ng build (no errors),
the scripts.bundle.js contains

/***/ 217:
/***/ function(module, exports) {
module.exports = "var COMPILED=!0,goog=...."...

and

/***/ 615:
/***/ function(module, exports) {
module.exports = "/**\n * @fileoverview\n * @enhanceable\n * @public\n */\n// GENERATED CODE..."...

(i.e. code is in quotes)

when running (ng serve), this creates errors like

VM739:321Uncaught ReferenceError: exports is not defined
    at eval (eval at module.exports (addScript.js:9), <anonymous>:321:471)
    at eval (<anonymous>)
    at module.exports (addScript.js:9)
    at Object.161 (google-protobuf.js?a64b:1)
    at __webpack_require__ (bootstrap 44c22f0…:52)
    at Object.720 (scripts.bundle.js:51)
    at __webpack_require__ (bootstrap 44c22f0…:52)
    at webpackJsonpCallback (bootstrap 44c22f0…:23)
    at scripts.bundle.js:1

looks to me that evaluating the code in the string causes these errors

Mention any other details that might be useful.

When using webpack 2.2 directly in a js project, it creates code like

/* 1 */
/***/ function(module, exports) {
var COMPILED=!0,goog=...

working fine
i.e. without bundling/eval the code in a string like

module.exports = "..."

Questions:

• How do I include the js code directly in scripts.bundle.js (assume that the eval is the cause of the error)?
• I copied the generated js code (i.e. not npm packaged) in the project and referenced it in the script file (see above) _ Is this the correct/recommended approach?

[jorgjanke]

I assume the case of the eval error is that the npm package google-protobuf
not just contains the "google-protobuf.js" file but that it dynamically loads additional .js files in the included directory "google/protobuf/compiler/.js". These dependencies are handled correctly by webpack in a js project.. as without the string eval.
... so seems to me the solution might be to just hand it over to webpack to handle/include the dependencies ... and yes, it will then create a global variable.

[filipesilva]

Dupe of #2141, fixed in #3814. Should be in the next release.

[larrytin]

@jorgjanke I encountered the same problem when import google-protobuf.js. How did you solve it?

[jorgjanke]

... switched to json for the moment :-/

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}