Common Mistakes: Handling Duplicate Identifiers in Webpack 2 Setup for Angular 2 and Typescript 2

Currently, I am facing Duplicate Identifier errors while trying to set up my angular 2 with webpack 2 and typescript 2. Despite researching various solutions, none have proven effective thus far.

The errors are as follows:


    typings\globals\core-js\index.d.ts 
    `Duplicate identifier 'PropertyKey'
    typings\globals\core-js\index.d.ts 
   `Duplicate identifier 'Promise'
    typings\globals\es6-promise\index.d.ts 
    `Duplicate identifier 'Promise'
     typings\globals\es6-shim\index.d.ts 
    `Duplicate identifier 'PropertyKey'

I attempted adding the ambient dependency to my typings.json file without success, and also experimented with removing the globalDependencies entirely, leaving only the ambientDependencies:

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
    "es6-collections": "registry:dt/es6-collections#0.5.1+20160316155526",
    "es6-promise": "registry:dt/es6-promise#0.0.0+20160614011821",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160909174046"
  },
  "ambientDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160215162030"
  }
}
...
  • Angular 2 version: 2.0.0-rc.6
  • Typescript version: 2.0.2
  • Webpack version: 2.1.0-beta.20

If you have any suggestions or insights on this issue, your assistance would be greatly appreciated.

Thank you!


Update: Following Dave V's solution, the following directories were removed from the typings directory:

globals/es6-promise
globals/es6-shim
browser

References in index.d.ts within the typings root were amended by removing:

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

Furthermore, I included "typings/browser.d.ts" in the tsconfig.json exclude array as it referenced es6-shim inside browser/ambient:

"exclude":[
    "node_modules",
    "typings/main",
    "typings/main.d.ts",
    "typings/browser.d.ts"
  ]

Answer №1

If you are utilizing Angular, it is advisable to choose either es6-promise or core-js, as they both define the Promise concept differently. Using both may cause conflicts in your codebase.

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

The module 'angular/common' was not found in the Angular 2 TypeScript

While experimenting with a sample login form in Angular 2, I encountered an issue when trying to import 'Form_Directives' as: import { FORM_DIRECTIVES } from '@angular/common'; An error was displayed stating that the angular/common m ...

Troubleshooting a Angular2 Styling Problem

Currently exploring #angular and experiencing an issue with my page not functioning properly in #firefox (the input text field does not display any text when typed, but retains the value upon submission). Here is my current environment: Firefox Version: ...

Function as getter/setter

Can property getter/setter be implemented as a function? Traditional getter/setters work like this: class Test { something: any; get prop() { return something; } set prop(value) { something = value; } } let instance = new Test(); inst ...

Attempting to assign a value to the global or session object is not possible. This error occurs when trying to call an expression without a defined call

I established a new solution. import { Injectable } from '@angular/core'; @Injectable() export class SessionService implements ISession { private _session: string = "SomeValue"; constructor() { } set session(value) { this._session = ...

Ways to transfer information between components in Angular5

When developing an application with Angular, I encountered an issue where user details were not displaying in another component after clicking the edit button. I have written a query to fetch user details upon clicking the edit button, but the data retri ...

Instance of an Angular TypeScript class

I have a TypeScript class named User with various properties such as id, userName, age, and more. The class also includes a fullName method that combines the givenname and surname of the user. Additionally, there is a sayHello function that logs a greeting ...

A guide on activating the button once a user chooses an option from the dropdown menu in Ionic

I'm currently developing an Ionic Ecommerce app where I display products with their sizes. However, I'm facing an issue - I want to restrict users from adding the product to the cart without selecting a size first, but I'm struggling to impl ...

The importance of specifying return types in Express routes when using TypeScript

Trying to maximize my use of TypeScript, I steer clear of any whenever I can. Express routes are often defined in this manner: import { Request, Response } from "express"; myRouter.route("/foo").post((req: Request, res: Response): Response => { ret ...

Exploring the differences: Async await, Promises, and Mapping

When faced with the decision between promises, async awaits, and mapping operators like concatMap, how do you determine which one to use? Specifically, I am working on a scenario where I need to make an http call to my backend, followed by another http ca ...

Mastering the art of theming components using styled-components and Material-UI

Can you integrate the Material-UI "theme"-prop with styled-components using TypeScript? Here is an example of Material-UI code: const useStyles = makeStyles((theme: Theme) => ({ root: { background: theme.palette.primary.main, }, })); I attemp ...

Is there a way for TypeScript to automatically determine the appropriate value for a constrained generic type when other types are provided?

When working with TypeScript, I have a function that takes a generic parameter with constraints: function func1<U extends string>(param: U): U { return param; } const result1 = func1('hello'); // The type of 'result1' is ' ...

Achieving scrollable table content in a dialog using Angular Material

I am working with an Angular Material Dialog that includes a Material Table. My goal is to have the table content scrollable (excluding the table header). By default, the dialog's content is scrollable, which is not the desired behavior. You can view ...

Cross-Origin Resource Sharing (CORS) issue: The response for the preflight request fails the access control check because it does not return an HTTP ok status code

I'm struggling to figure out what's causing this error. I've double-checked all the headers and methods, but I keep getting blocked by CORS policy on my Node Js Server: Error Message: login:1 Access to XMLHttpRequest at 'http://localho ...

Utilizing Typescript to Encapsulate the Return Type of a Generic Class

I can't seem to understand this problem in a general way using Typescript, any assistance would be greatly appreciated! A Factory needs to deploy a Contract A CustomFactory is a type of Factory and should deploy a CustomContract (which is also a Cont ...

Utilizing ES6, accessing the first element of an array of objects

How can I access the values of the first or a specific object in an array based on an index using ES6? arrayOne =[ { child: [ {e1: 'ABCD', e2: 'BCDF'}, {e1: '1234', e2: '5689'}, {e1: 'QAZ ...

Generate TypeScript types automatically based on an object

I'm working with a code snippet that looks like this: import { ApolloClient } from '@apollo/client'; type F = typeof FeaturesManager.features.warrants export class FeaturesManager { static features = { warrants: Symbol('WARRANTS ...

The Autoplay feature in Swiper.js for (Ionic / Angular) is not activating

—— Concern —— Hello, I'm having trouble with getting the swiper to start autoplay as it should. After checking the swiper instance from the (swiper) event, here are the results I found: swiper.params.autoplay: {delay: 1000, enabled: true} s ...

Error in Webpack: ReferenceError - 'global' is not defined in next13

While I was working on my NextJS 13 app, I came across an error that stated: ReferenceError: global is not defined I did some research to find solutions for this error but unfortunately, none of them worked. I attempted to modify the configuration file a ...

Leveraging axios within angular applications

Currently, I am in the process of learning Angular and have a question regarding the use of axios for making HTTP requests to the server. While this method works, I am uncertain about whether it is considered a best practice in Angular development. I am ...

Angular project set up with dynamic polyfill inclusion based on .browserslistrc configuration

In order to ensure that our software is compatible with older browser versions, we need to implement polyfills for Angular since it does not do this automatically. To achieve this, I am looking to add custom webpack configuration. Currently, I am working ...