Duplicate Identifier for Angular2 Typescript files

Question

Following the Angular2 TS Quickstart, I end up having duplicate files in many folders across my project.

For browser:

typings/browser 
node_modules/angular2/typings/browser

For es6-shim:

node_modules/angular2/typings/es6-shim
typings/browser/ambient/es6-shim
typings/main/ambient/es6-shim

It results in Duplicate Identifier errors during build.

How do we prevent / suppress TS from raising duplicate identifier errors?

I have included node_modules in my exclude list, however, since I am using Angular2 in my includes, TSD is including them back, because of moduleResolution "node". Replacing it with another moduleResolution value such as "classic" causes other problems.

This is my tsconfig.json:

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

UPDATE 1

Here's my appcomponent.ts:

///<reference path="../../node_modules/angular2/typings/browser.d.ts"/> 
import {bootstrap} from 'angular2/platform/browser';
import {LocationComponent} from '../location/components/locationcomponent';
import {VideosComponent} from '../videos/components/videoscomponent';

bootstrap(LocationComponent, [])
  .catch(err => console.error(err));

bootstrap(VideosComponent, [])
  .catch(err => console.error(err));

UPDATE 2

This is what I have for my web project file.

<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="14.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <PropertyGroup>
    <VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">14.0</VisualStudioVersion>
    <VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>
  </PropertyGroup>
  <Import Project="$(VSToolsPath)\DNX\Microsoft.DNX.Props" Condition="'$(VSToolsPath)' != ''" />
  <PropertyGroup Label="Globals">
    <ProjectGuid>3775534b-d08c-45f2-8d5a-4a4f6e91edb9</ProjectGuid>
    <RootNamespace>MyProject</RootNamespace>
    <BaseIntermediateOutputPath Condition="'$(BaseIntermediateOutputPath)'=='' ">..\..\artifacts\obj\$(MSBuildProjectName)</BaseIntermediateOutputPath>
    <OutputPath Condition="'$(OutputPath)'=='' ">..\..\artifacts\bin\$(MSBuildProjectName)\</OutputPath>
    <SccProjectName>SAK</SccProjectName>
    <SccProvider>SAK</SccProvider>
    <SccAuxPath>SAK</SccAuxPath>
    <SccLocalPath>SAK</SccLocalPath>
  </PropertyGroup>
  <PropertyGroup>
    <SchemaVersion>2.0</SchemaVersion>
  </PropertyGroup>
<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptJSXEmit>None</TypeScriptJSXEmit>
    <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
    <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
    <TypeScriptModuleKind>CommonJS</TypeScriptModuleKind>
    <TypeScriptRemoveComments>False</TypeScriptRemoveComments>
    <TypeScriptOutFile />
    <TypeScriptModuleResolution>NodeJs</TypeScriptModuleResolution>
    <TypeScriptOutDir />
    <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
    <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
    <TypeScriptSourceMap>True</TypeScriptSourceMap>
    <TypeScriptMapRoot />
    <TypeScriptSourceRoot />
    <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
  </PropertyGroup>
  <Target Name="FixTsBuildConfiguration" BeforeTargets="CompileTypeScript" >
    <PropertyGroup>
      <TypeScriptBuildConfigurations>$(TypeScriptBuildConfigurations.Replace("--moduleResolution NodeJs", "--moduleResolution node"))</TypeScriptBuildConfigurations>
   </PropertyGroup>
  </Target>
  <ItemGroup>
    <DnxInvisibleContent Include="bower.json" />
    <DnxInvisibleContent Include=".bowerrc" />
    <DnxInvisibleContent Include="package.json" />
    <DnxInvisibleFolder Include="wwwroot\bower_components\" />
    <DnxInvisibleFolder Include="wwwroot\node_modules\" />
  </ItemGroup>
  <Import Project="$(VSToolsPath)\DNX\Microsoft.DNX.targets" Condition="'$(VSToolsPath)' != ''" />
</Project>

UPDATE 3

I found out that setting up Angular2 in Visual Studio 2015 requires another approach. I followed the steps in Starting Angular 2 in ASP.NET 5 with TypeScript using Visual Studio 2015 and I didn't get any build issues anymore.

Any reason you are bootstrapping twice? Most people have an app or root component they nest other components under. — Dan Rasmuson
– Dan Rasmuson, Commented Apr 24, 2016 at 2:54
They are two separate components that have no common elements. My app is not a SPA. They're rendered server side. — Jonas Arcangel
– Jonas Arcangel, Commented Apr 24, 2016 at 9:16

Dinistro · Accepted Answer · 2016-04-25 06:36:26Z

8

+25

Typescript <= 1.6

You need to exclude the node_modules and the typings/main files in your tsconfig.json with **

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

Without the ** it searches for a file named node_modules typings/main and not the directory itself.

Typescript > 1.6

In typescript versions over 1.6 the ** are not needed.

EDIT

Remove the reference path in your appcomponent.ts. You don't need reference paths when compiling the typescript like this.

edited Apr 25, 2016 at 6:36

answered Apr 19, 2016 at 11:17

Dinistro

5,7301 gold badge33 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jonas Arcangel Over a year ago

I tried this and it gave me more errors in addition to the duplicate identifier ones.

Dinistro Over a year ago

@JonasArcangel can you please give me these errors? Perhaps I see what the problem is.

Dinistro Over a year ago

@JonasArcangel See my updated answer, I found your mistake

Jonas Arcangel Over a year ago

It's needed, as without it, I'm getting "Property '____' does not exist on type '____'" (TS2339) and "Cannot find name '____'" (TS2304) errors.

Dinistro Over a year ago

@JonasArcangel does this error appear in the IDE or in the build-process. How do you build your application? I also had errors like this, because my IDE was misconfigured

|

Michael Desigaud · Accepted Answer · 2016-04-19 08:11:27Z

0

You can add a "filesGlob" entry in your tsconfig.json file to exclude unnecessary files. For example :

"filesGlob": [
    "./src/**/*.ts",
    "./test/**/*.ts",
    "!./node_modules/**/*.ts",
    "typings/browser.d.ts"
  ]

answered Apr 19, 2016 at 8:11

Michael Desigaud

2,1451 gold badge15 silver badges16 bronze badges

3 Comments

Jonas Arcangel Over a year ago

It didn't work. The duplicate identifier issues are still there. What does the ! symbol stand for? I tried having one without it, and with "node_modules/**/*.ts". No luck.

Michael Desigaud Over a year ago

the "!" symbol means exclusion

Jonas Arcangel Over a year ago

I see. It is still getting included, maybe for the same reason as mentioned in my post (please see update), about it being referenced in my component.

Jonas Arcangel · Accepted Answer · 2016-04-26 09:10:02Z

0

I found out that setting up Angular2 in Visual Studio 2015 requires another approach. I followed the steps in Starting Angular 2 in ASP.NET 5 with TypeScript using Visual Studio 2015 and I didn't get any build issues anymore.

answered Apr 26, 2016 at 9:10

Jonas Arcangel

1,94514 gold badges58 silver badges91 bronze badges

Collectives™ on Stack Overflow

Duplicate Identifier for Angular2 Typescript files

3 Answers 3

8 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related