Having trouble with Angular2 Typescript and .NET Core in VS2015? Running into issues like not being able to locate names such as 'Promise', 'Set', and 'Map'?

I am currently following the Angular2 quickstart guide (https://angular.io/docs/ts/latest/quickstart.html) in order to develop a web application using Typescript and .NET Core. I have successfully resolved and generated dependencies and typings, however, upon attempting to build, I encountered the following errors:

TS2304 Build:Cannot find name 'Set'

TS2304 Build:Cannot find name 'Promise'

TS2304 Build:Cannot find name 'Map'

After reading various other questions, I attempted to resolve this issue by setting the Typescript compiler target to ES6 ("target": "es6" in tsconfig.json). However, this was not an ideal solution as many browsers do not yet support ES6. As an alternative, I also added typings for "es6-promise" and "es6-collections" in 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",
     "es6-promise": "registry:dt/es6-promise", 
     "es6-collections": "registry:dt/es6-collections"
  }
}

Despite these efforts, the compilation still fails. What other steps can I take to successfully compile in ES5?

angulartypescriptasp.net-core

Answer №1

To resolve the issue, I included the ES6 typings references in my main.ts file:

/// <reference path="../typings/globals/es6-promise/index.d.ts" />
/// <reference path="../typings/globals/es6-collections/index.d.ts" />
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Although I'm not certain if there is a more optimal solution available, this method allows me to successfully build in ES5.

Answer №2

Dealing with a similar problem, I found that by adding the es6-shim package solved the issue for me.

typings install dt~es6-shim --save --global

I made sure to reference it in my code like this:

///<reference path="typings/globals/es6-shim/index.d.ts"/>

Since then, the problem has been resolved.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for transitioning from Angular 4 to Angular 5

As a newcomer to Angular, I recently launched a project using Angular CLI. However, a new version has been released since then. I am looking to update my project to the latest version of Angular (v5). How should I go about migrating it? ...

angular

Utilizing Typescript with Angular 2 to efficiently convert JSON data into objects within HTTP requests

I am dealing with a file called location.json, which contains JSON data structured like this: { "locations": [ { "id": 1, "places": [ { "id": 1, "city": "A ...

jsonangularparsingtypescriptangular2-services

Angular 5 Observables: delivering results upon completion

Looking for assistance with Angular 5 Observables. I am trying to simplify the controller by avoiding the need for it to subscribe to the observable. Instead, I want all the complexity to be handled in the service, which will then easily pass the results/ ...

angularobservable

Retrieve JSON information from an API using Angular 2

I am facing an issue with retrieving JSON data from an API that I created. Despite using Angular code to fetch the data, it seems to be unsuccessful. Here is the code snippet: getBook(id: string){ return this._http.get(this.url + 'books/' + ...

jsonangular

Prompt user to save changes or cancel before closing modal (if closed by pressing ESC or clicking the backdrop)

When I manually close the modal, everything works fine. I just create a prompt and only call the BsModalRef.hide() method when the prompt (sweetalert) is closed. However, when the modal is closed using the ESC key or click-outside events provided by Boots ...

javascriptangulartypescriptbootstrap-modal

Embrace the power of Angular2: Storing table information into

Custom table design Implement a TypeScript function to extract data from an array and populate it into a stylish table. ...

angulartypescript

Issue with webpack dev server not correctly generating output files to be included in index.html

Struggling to configure webpack and react with typescript without the complexity of CRA. The dev server isn't outputting files to index.html for viewing in the browser. I want to maintain a clean and simple structure, avoiding the multiple js scripts ...

reactjstypescriptwebpackwebpack-dev-server

Issue encountered while incorporating a dynamic field in Angular 5

My goal is to dynamically add a row of fields when the add button is clicked. While this functionality works fine, I encounter an issue where clicking the add button clears the values in the first row and adds a new row instead. Below is the code snippet I ...

angularangular5

Creating a click handler and using window.addEventListener with TypeScript in a Next.js project

I'm currently working on a click handler that should be able to detect any clicks on the window outside of my component: useEffect(() => { const handleOutSideClick = (event) => { if (!ref.current?.contains(event.target)) { se ...

reactjstypescriptnext.jsdomdom-events

What is the best way to determine the type of `rootReducer`?

My project is set up with a combination of React, Redux, Immutable.js, and TypeScript. As I worked on implementing it, I made an effort to declare types wherever possible which led me to discover an interesting issue. A code example illustrating the proble ...

reactjstypescriptimmutable.jsredux-immutable

Fetching information from a JSON source and storing it within an array of

I am currently facing an issue where I am unable to assign Exercise[] to Exercise. My goal is to retrieve data from a file, create a class object with the JSON values, and then add it to the class array to display as hardcoded JSON data. As someone who i ...

jsonangularhttpionic-frameworkangular8

The promise callback in Angular2 is unable to access this

This snippet of code is quite odd, but it resides within a service context: constructor() { gapi.load('client:auth2', this.loadGoogleApi); } private loadGoogleApi() { // Array of API discovery doc URLs for APIs used by the quickstart ...

angulartypescriptcallbackpromisegoogle-api-js-client

Which is the best option: Service variable, Service Observable, or Service Subject?

Lately, I've been contemplating the idea of global variable declaration, and I'm struggling to see the advantage of using a Subject in a service instead of a simple variable or even an Observable. Could you help me understand why someone would ch ...

angularrxjssubject

Retrieve a specific attribute from a collection of JSON objects and transfer it to a separate object

Having a JSON object array with various project information: [ {"Project":"Project 1","Domain":"Domain1","Manager":"Manager1"}, {"Project":"Project 2","Domain":&q ...

angulartypescript

Splitting angular2 and browserify into individual vendor and app bundles can help prevent import errors

I am currently developing an Angular2 application and I am aiming to use gulp and browserify for the build process. By utilizing tsify, I was able to create a standalone bundle.js file, which ended up being 1.4M in size after minification. What I desire ...

angulartypescriptgulpbrowserifytsify

Styling does not affect an Angular component that is injected into an iframe

I am facing an issue with styling in an iframe when trying to append my own angular component. Despite various attempts, I have been unsuccessful in getting the styling to apply to the component within the iframe. Upon loading the iframe, I use JavaScript ...

javascripthtmlcssangulariframe

Required file missing in React application unable to locate

I have a project organized in the following way: - my-app - src - some files - public - index.html - ... When I run npm start, the application functions as expected. Now, I am looking to rename src to application! After renami ...

htmlreactjstypescriptnpm

The HTML5 datalist feature is only capable of displaying the first suggestion from the filtered array for autocomplete

I can't seem to display all the elements suggested in the datalist except for the first one. I've double-checked and confirmed that my array contains more than one element. It's puzzling why the other elements are not showing up in the sugge ...

htmlangulartypescripthtml-datalist

What is the reason for not receiving a transpilation error when referencing a non-exported class?

As a relatively new learner of Typescript and Javascript (with a background in Java), I have been navigating the transition from a single large Typescript file containing multiple classes to utilizing multiple classes. While I have made progress with the i ...

typescriptecmascript-6moduletsctsconfig

Typescript and Mongoose Schema - Common Design Mistakes

I am encountering two issues while defining a schema using mongoose and typescript. Below is the code snippet I'm having trouble with: import { Document, Schema, Model, model} from "mongoose"; export interface IApplication { id: number; name ...

javascripttypescriptmongoosemongoose-schema