Visual Studio, Gulp, Angular2 Final typescript error “cannot find name” and “Duplicate identifier”

Question

I have updated my project to use the angular 2 final release. I also updaed visual studio to use typescript 2.0.3 from the Tool -> Extensions and Updates manager.

I use gulp to compile my typescript and it complies without error. However I am getting thousands of errors inside visual studio. The three most common errors are:

Error TS2403 Subsequent variable declarations must have the same type. Variable 'httpVersionMinor' must be of type 'string', but here has type 'number'. index.d.ts

Error TS2300 Duplicate identifier 'export='. index.d.ts

Error TS2320 Interface 'Server' cannot simultaneously extend types 'EventEmitter' and 'Server'. Named property 'emit' of types 'EventEmitter' and 'Server' are not identical. index.d.ts

here is my tsconfig.json file:

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

Here is my typings.json file:

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160909174046"
  }
}

here is my main.ts file:

/// <reference path="../typings/index.d.ts"/>
/// <reference path="../typings/tsd.d.ts"/>
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';

// APP imports *****************************************************
import { AppModule } from './app/app.module';

// ENABLE PRODUCTION MODE
    // enableProdMode();

platformBrowserDynamic().bootstrapModule(AppModule)
    .catch((err: any) => console.error(err));

Problem:

If i remove this line:

reference path="../typings/index.d.ts"

from the top of my main.ts file then the errors go away in visual studio, but then the errors all appear when I try to compile with gulp/npm.

I have tried:

using npm to uninstall and reinstall typings
remove the typings and node modules folder and running npm install
updating the visual studio version of typescript to 2.0.3
making sure there are no references to es6 shim from earlier RC's

Question

Can someone help me figure out why these errors are only thrown in Visual Studio when I reference the index.d.ts file or why the errors only appear in npm when I remove that reference?

J King J King · Accepted Answer · 2016-09-26T15:59:49

Here is the solution

I switched my project to angular2 final and typescript 2.0.3

This caused problems as I develop in Visual Studio but use gulp tasks to compile and build my project.

So what I had to do to fix the error was:

Update gulp-typescript, typings, tslint, coedlyzer, gulp-tslint to most recent version in my packages.json file
Remove the index.d.ts reference from my main.ts file
Update my gulp typescript compile task to included the index.d.ts file () shown below

Here is my new gulp task including my index.d.ts file:

gulp.task('ts:compile', function () {
return gulp
    .src(['./src/**/*.ts', 'typings/index.d.ts'], { base: '.' }) 
        .pipe(sourcemaps.init())
        .pipe(tsc(tsConfig.compilerOptions)) 
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('.')); 

 });

Now visual studio does not throw errors and gulp compiles the code properly.

Sheesh. The integration between visual studio and angular2 is still a bit rough

Visual Studio, Gulp, Angular2 Final typescript error “cannot find name” and “Duplicate identifier”

Problem:

I have tried:

Question

1 Answers