this._nativeError is undefined when I bundle my angular 2 application

Question

I am using gulp, browserify and tsify to bundle my application and I am pointing browserify to the main.ts file. That is all I am doing to bundle the app. But when I try to run the index.html file which has the bundled js file imported, I get the error: this._nativeError is undefined with a blank screen.

My tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc-e2e",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]
  }
}

My gulp task:

gulp task

Downgrade to 0.7.4 There is a bug in 7.5 https://github.com/angular/zone.js/issues/595 — yurzui, Jan 17 '17 at 13:00
I will check with that. However the application works fine in development mode, which I serve using angular-cli. — Karthik Priyadarshan, Jan 17 '17 at 13:04
'Can't resolve all parameters for UserService: (?, ?)' This is what I am getting now and the screen is still blank. what could be causing this? — Karthik Priyadarshan, Jan 17 '17 at 13:09
While browserify is bundling the application, I am getting this error 'experimental decorators is an experimental option. Please set it in your tsconfig.json file'. — Karthik Priyadarshan, Jan 17 '17 at 13:22
Could you include your `browserify`/`tsify` configuration, please? If you are seeing that error, `tsify` isn't using/finding your `tsconfig.json`, as you appear to have `experimentalDecorators` enabled. — cartant, Jan 17 '17 at 19:06
@cartant the pastebin link in my description has the browserify options in it. Its in a variable called "defaultOptions". — Karthik Priyadarshan, Jan 18 '17 at 06:35

score 0 · Answer 1 · answered Jan 18 '17 at 06:45

0

Regarding the tsify configuration, you define:

defaultOptions = {
  ...
  tsifyOptions: {},
  ...
}

but you use:

.plugin(tsify, defaultOptions.tsifydefaultOptions)

It's unclear as to whether or not it's related to your problem, but if your tsconfig.json is not in the same directory as your package.json and is not in a parent directory, it won't be found. And as your configuration includes ../node_modules/@types, it seems likely that it's not.

To let tsify know where the tsconfig.json is, you can specify the project option:

.plugin(tsify, { project: './some-directory/tsconfig.json' })

answered Jan 18 '17 at 06:45

cartant

57,105
17
163
197

I don't understand what you're trying to suggest with the `../node_modukles/@types`. Can you give me more details on that? – Karthik Priyadarshan Jan 18 '17 at 07:15
It's just that if your `tsconfig.json` has that path in it, my guess is that it's not in the same directory as your `package.json` - which is the directory from which `tsify` will start looking for one. There's no problem with that, but `tsify` will need to be told where it is, that's all. The `project` option should be set to the path to your `tsconfig.json` *relative* to your `package.json`. – cartant Jan 18 '17 at 07:17
Again, this might not solve your problem, but the first thing you need to fix is the `experimentalDecorators` error, as that implies `tsify` cannot find your `tsconfig.json`. – cartant Jan 18 '17 at 07:23
` import './polyfills.ts'; ^ ParseError: 'import' and 'export' may appear only with 'sourceType: module' ` This is what I am getting now after I pointed tsify to the tsconfig file. – Karthik Priyadarshan Jan 18 '17 at 07:37
I don't think debugging a build in this manner is going to be possible. There are too many unknowns. However, if you are importing `.ts` files from `node_modules`, you should also specify the `global: true` option for `tsify`. You should seriously consider using the `angular-cli` tooling to build a bundle, instead. ... – cartant Jan 18 '17 at 07:53
... If you have not used `browserify` or `tsify` before, starting a build with Angular 2 is quite an undertaking, but if you want to persist with it, all I could suggest is that you go through the docs and get things working with a simple project and the `browserify` command line. Then tackle Angular 2 and gulp, etc. – cartant Jan 18 '17 at 07:53

score 0 · Answer 2 · edited May 23 '17 at 11:54

I had the same issue and found my solution by putting a console.log inside compiler.umd.js as suggested here: https://stackoverflow.com/a/41644735/7434393

Around line 1604 in the compiler.umd.js I added a console.log to show me the message.

It is part of the set function of the Object.defineProperty(BaseError.prototype, "message" definition.

The setter is assigning the message to the _nativeError.message, but _nativeError is undefined and thus, THAT was blowing up, hiding the REAL error message.

So, I just put a console.log to spit out the message that was being passed in, and it showed me the actual error I had (a template error).

Therefore, this appears to be a bug in their code.

this._nativeError is undefined when I bundle my angular 2 application

2 Answers2