Issue TS2304: Unable to locate reference to 'Map' in the context of using Angular 2 with .NET Core

Question

Issue TS2304: Unable to locate reference to 'Map' in the context of using Angular 2 with .NET Core

While compiling in Task Run Explorer, I encountered an error from gulp that took me by surprise since I didn't make any changes. Despite searching online for solutions, none of them seemed to work.

ERROR 1

... node_modules/@angular/common/src/facade/lang.d.ts(11,17): error TS2304: Cannot find name 'Map'. node_modules/@angular/common/src/facade/lang.d.ts(12,17): error TS2304: Cannot find name 'Set'. node_modules/@angular/common/src/pipes/async_pipe.d.ts(41,38): error TS2304: Cannot find name 'Promise'. ...

This is my tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "system",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noEmitOnError": false,
    "removeComments": false,
    "target": "es5"
  },

  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

Here is my package.json:

{
  "version": "1.0.0",
  "name": "testapp.web",
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0-rc.5",
    ...
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    ...
  },
  "scripts": {
    "postinstall": "typings install dt~core-js --global"
  }
}

Modified with the solution found:

New tsconfig.json:

{
  ...
  **"target": "es6" <<-- CHANGE**
  ...
}

New package.json:

{
  ...
    **"es6-promise": "3.2.1",  
    "es6-shim": "0.35.1"**
  ...
}

I now encounter this error:

GulpUglifyError: unable to minify JavaScript

If I implement the second solution, will it cause compatibility issues with older browsers?

javascript angularjs json

Answer 1

Answer №1

Here is an example of my gulp.js configuration:

var gulp = require('gulp'),
    gp_clean = require('gulp-clean'),
    gp_concat = require('gulp-concat'),
///    gp_less = require('gulp-less'),
    gp_sourcemaps = require('gulp-sourcemaps'),
    gp_typescript = require('gulp-typescript'),
    gp_uglify = require('gulp-uglify');
    gp_pump = require('pump');

/// Define paths
var srcPaths = {
    app: ['Scripts/app/main.ts', 'Scripts/app/**/*.ts'],
    js: [
        'Scripts/js/**/*.js',
        'node_modules/core-js/client/shim.min.js',
        'node_modules/zone.js/dist/zone.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/systemjs/dist/system.src.js',
        'node_modules/typescript/lib/typescript.js'
    ],
    js_angular: [
        'node_modules/@angular/**'
    ],
    js_rxjs: [
        'node_modules/rxjs/**'
    ]
    ///,
    ///less: [
    ///    'Scripts/less/**/*.less'
    ///]
};

var destPaths = {
    app: 'wwwroot/app/',
    css: 'wwwroot/css',
    js: 'wwwroot/js/',
    js_angular: 'wwwroot/js/@angular/',
    js_rxjs: 'wwwroot/js/rxjs/'
};

// Task to compile, minify and create sourcemaps for all TypeScript files
gulp.task('app', ['app_clean'], function () {
    return gulp.src(srcPaths.app)
        .pipe(gp_sourcemaps.init())
        .pipe(gp_typescript(require('./tsconfig.json').compilerOptions))
        .pipe(gp_uglify({ mangle: false }))
        .pipe(gp_sourcemaps.write('/'))
        .pipe(gulp.dest(destPaths.app));
});

// Task to clean wwwroot/app contents
gulp.task('app_clean', function () {
    return gulp.src(destPaths.app + "*.*", { read: false })
    .pipe(gp_clean({ force: true }));
});

// Task to copy JS files from external libraries to wwwroot/js
gulp.task('js', function () {
    gulp.src(srcPaths.js_angular)
        .pipe(gulp.dest(destPaths.js_angular));
    gulp.src(srcPaths.js_rxjs)
        .pipe(gulp.dest(destPaths.js_rxjs));
    return gulp.src(srcPaths.js)
        .pipe(gulp.dest(destPaths.js));
});

// Task to clean wwwroot/js contents
gulp.task('js_clean', function () {
    return gulp.src(destPaths.js + "*.*", { read: false })
    .pipe(gp_clean({ force: true }));
});

//// Task to process LESS files and output CSS in wwwroot/css
///gulp.task('less', ['less_clean'], function () {
///    return gulp.src(srcPaths.less)
///        .pipe(gp_less())
///        .pipe(gulp.dest(destPaths.css));
//});

//// Task to clean wwwroot/css contents
///gulp.task('less_clean', function () {
///    return gulp.src(destPaths.css + "*.*", { read: false })
///        .pipe(gp_clean({ force: true }));
//});

// Task to watch specified files for changes
gulp.task('watch', function () {
    gulp.watch([srcPaths.app, srcPaths.js], ['app', 'js']);
});

gulp.task('compress', function (cb) {
    pump([
          gulp.src(srcPaths.js),
          uglify(),
          gulp.dest(destPaths.js)
    ],
      cb
    );
});

// Global cleanup task
gulp.task('cleanup', ['app_clean', 'js_clean']);

// Default task to launch all other tasks
gulp.task('default', ['app', 'js', 'watch']);

Answer 2

Here is an example of my gulp.js configuration:

var gulp = require('gulp'),
    gp_clean = require('gulp-clean'),
    gp_concat = require('gulp-concat'),
///    gp_less = require('gulp-less'),
    gp_sourcemaps = require('gulp-sourcemaps'),
    gp_typescript = require('gulp-typescript'),
    gp_uglify = require('gulp-uglify');
    gp_pump = require('pump');

/// Define paths
var srcPaths = {
    app: ['Scripts/app/main.ts', 'Scripts/app/**/*.ts'],
    js: [
        'Scripts/js/**/*.js',
        'node_modules/core-js/client/shim.min.js',
        'node_modules/zone.js/dist/zone.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/systemjs/dist/system.src.js',
        'node_modules/typescript/lib/typescript.js'
    ],
    js_angular: [
        'node_modules/@angular/**'
    ],
    js_rxjs: [
        'node_modules/rxjs/**'
    ]
    ///,
    ///less: [
    ///    'Scripts/less/**/*.less'
    ///]
};

var destPaths = {
    app: 'wwwroot/app/',
    css: 'wwwroot/css',
    js: 'wwwroot/js/',
    js_angular: 'wwwroot/js/@angular/',
    js_rxjs: 'wwwroot/js/rxjs/'
};

// Task to compile, minify and create sourcemaps for all TypeScript files
gulp.task('app', ['app_clean'], function () {
    return gulp.src(srcPaths.app)
        .pipe(gp_sourcemaps.init())
        .pipe(gp_typescript(require('./tsconfig.json').compilerOptions))
        .pipe(gp_uglify({ mangle: false }))
        .pipe(gp_sourcemaps.write('/'))
        .pipe(gulp.dest(destPaths.app));
});

// Task to clean wwwroot/app contents
gulp.task('app_clean', function () {
    return gulp.src(destPaths.app + "*.*", { read: false })
    .pipe(gp_clean({ force: true }));
});

// Task to copy JS files from external libraries to wwwroot/js
gulp.task('js', function () {
    gulp.src(srcPaths.js_angular)
        .pipe(gulp.dest(destPaths.js_angular));
    gulp.src(srcPaths.js_rxjs)
        .pipe(gulp.dest(destPaths.js_rxjs));
    return gulp.src(srcPaths.js)
        .pipe(gulp.dest(destPaths.js));
});

// Task to clean wwwroot/js contents
gulp.task('js_clean', function () {
    return gulp.src(destPaths.js + "*.*", { read: false })
    .pipe(gp_clean({ force: true }));
});

//// Task to process LESS files and output CSS in wwwroot/css
///gulp.task('less', ['less_clean'], function () {
///    return gulp.src(srcPaths.less)
///        .pipe(gp_less())
///        .pipe(gulp.dest(destPaths.css));
//});

//// Task to clean wwwroot/css contents
///gulp.task('less_clean', function () {
///    return gulp.src(destPaths.css + "*.*", { read: false })
///        .pipe(gp_clean({ force: true }));
//});

// Task to watch specified files for changes
gulp.task('watch', function () {
    gulp.watch([srcPaths.app, srcPaths.js], ['app', 'js']);
});

gulp.task('compress', function (cb) {
    pump([
          gulp.src(srcPaths.js),
          uglify(),
          gulp.dest(destPaths.js)
    ],
      cb
    );
});

// Global cleanup task
gulp.task('cleanup', ['app_clean', 'js_clean']);

// Default task to launch all other tasks
gulp.task('default', ['app', 'js', 'watch']);

Issue TS2304: Unable to locate reference to 'Map' in the context of using Angular 2 with .NET Core

Answer №1

Similar questions

Condense Javascript Function

Transforming a JSONP request to automatically parse a text response into JSON

What is the best way to insert distinct values into an array in mongoDB?

Please ensure that the data has fully loaded before initializing the component

The ng-click function seems to be malfunctioning within the Angular JS framework

Collect information using Python's request module

Having trouble logging JSON data from nodejs + express while serving static files through express. However, I am able to see the data when I only make a GET request for the JSON data without the static files

Is there a way to transform a form-check (radio button) into a 5-point slider on an HTML/JS webpage?

A guide to showcasing data within PrimeNG's pie chart component using either JavaScript or Angular

Implement a method within a directive

Utilizing Vue.js: Disabling button on image carousel when there is no "next" photo accessible

Despite calling Bootstrap Switch JS, no action is being executed

Acquire the S3 URL link for the uploaded file upon completion of the file upload process

Create a new API by expanding upon an already established API

Managing AJAX requests using Express JS

Summarize the array of objects and find the average value for each distinct object name

Encountering Reference Error while Using AWS Amplify with Nuxt.js: Navigator Undefined

What is the easiest way to locate the ID of an iframe embedded within a webpage?

Prohibit the use of screen printing in a modern web application developed with Angular or ReactJS

Choosing an item from a list using React-Redux