Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Duplicate Identifier for Angular2 Typescript files

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.

like image 910
Jonas Arcangel Avatar asked Apr 17 '16 01:04

Jonas Arcangel


1 Answers

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.

like image 84
Dinistro Avatar answered Nov 18 '22 16:11

Dinistro