vendor.ts to vendor.js compiling fails

Question

Stack

Hi, I am bootstrapping a MEAN stack application. We are using Angular2 and typescript. Gulp is used for the build. I develop on a MAC OS machine.

Issue

When I run my application locally as always with gulp watch and open localhost:3000 my Angular application does not load and I have in my JavaScript Console the following error :

When I google this issue, I found these articles :

Seem they both advice to add 2 supposed missing imports :

import 'zone.js';
import 'reflect-metadata';

But I have in my vendor.ts file already these two imports :

import 'zone.js/dist/zone';
import 'reflect-metadata';

After running gulp watch I have the following content in my transpiled vendor.js file

"use strict";
require('shim');
require('rxjs/add/operator/map');
require('validate.js');
require('zone.js/dist/zone');
require('reflect-metadata');
require('@angular/core');
require('@angular/common');
require('@angular/platform-browser-dynamic');
require('@angular/router-deprecated');
require('@angular/http');

But when I compare this vendor.js file with my friend who runs gulp watch on a (windows) machine, they are very different. His vendor.js file has way more generated code in that file. (2000+ lines). When I copy the content of his vendor.js file into my vendor.js file, the solution works locally. But obviously after every build, the content will be regenerated and cause the same issue.

Solutions

I have tried to run typings install , npm install and npm cache clear already a few times but I fail to get the solution running locally. I have no pending local changes, neither does my friend who is able to run it.

So has anyone an idea in what I have to look into to figure out why the vendor.js is not well generated ?

Thank you for your time

EDIT 1

As requested my tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

EDIT 2

Funny fact : When I am watching my solution with gulp watch and I edit my vendor.ts with a simple new line for example, and I refresh my page after the watch picked up the change, everything works. But when I stop my watch en run again gulp watch I face the same issue again.

can you post your tsconfig? are you using the following options? "emitDecoratorMetadata": true, "experimentalDecorators": true, "noEmitHelpers": false, — Tadwork, Jun 08 '16 at 14:26
@tadwork : Added, I do not have `"noEmitHelpers": false` , I tried it, but didn't help — Segers-Ian, Jun 08 '16 at 15:01
@WayneRiesterer : I don't have that installed, I use webpack, by loading my `vendor.js` it should define the function `require()` no ? — Segers-Ian, Jun 08 '16 at 15:03
Funny fact : When I am watching my solution with `gulp watch` and I edit my `vendor.ts` with a simple new line for example, and I refresh my page, everything works. But when I stop my watch en run again `gulp watch` I face the same issue again. — Segers-Ian, Jun 08 '16 at 15:04
@IanS: I haven't used Webpack, but don't you have to install requirejs in order to use the require() function in your vendor.js file? — Wayne Riesterer, Jun 08 '16 at 16:09
@WayneRiesterer : Well when I change my vendor.ts when my watch is on, it suddenly works, so I presume that the requirejs is not required and that there is a step being skipped on startup which does happen during my watch changes — Segers-Ian, Jun 08 '16 at 17:44
@WayneRiesterer : I forgot to mention, I tried once with adding the RequireJS as you suggested, but then I don't have any issues with the 'require' keyword, but then I still get the error that he can't find that dependency that I am asking with the `require('myDependency')` — Segers-Ian, Jun 10 '16 at 15:17

vendor.ts to vendor.js compiling fails

0 Answers0