Initial Setup AngularJS 2 Project in Visual Studio 2013

Introduction

This tip will help to remove the compilation error in Visual Studio 2013 while working with initial setup in AngularJS 2.0 beta.

Using the Code

Here, I will not explain the code or functionalities of AngularJS 2.0. I just intend to give some tips on how to avoid the compilation errors I experienced when I started working with AngularJS 2.0 beta using Visual Studio 2013.

I used the AngularJS 2.0 beta along with typescript and the version was 1.7. If you want to work with AngularJS 2.0 along with typescript, you need to download and install typescript first.

Step 1

Create a new project in Visual Studio 2013.

Step 2

Add the simple Angular application. Refer to the following url.

• https://angular.io/docs/ts/latest/quickstart.html

Step 3

Add a JSON file to your project and copy the following code to your JSON file.

{
  "name": "angular2-quickstart-check",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}

When you compile the above project, you get the following type of compilation errors:

Cannot find module 'angular2/core' in VS2013 and typescript x

Step 4

Right click on your project and click unload project.

Step 5

Again right click on it, and click edit your project name.

Step 6

Please copy the following tag into your file in property group before the closing tag of property group.

Do this for all the three property group tags.

<TypeScriptRemoveComments>false</TypeScriptRemoveComments>
<TypeScriptSourceMap>true</TypeScriptSourceMap>
<TypeScriptTarget>ES5</TypeScriptTarget>
<TypeScriptJSXEmit>
</TypeScriptJSXEmit>
<TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
<TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
<TypeScriptModuleKind>commonjs</TypeScriptModuleKind>
<TypeScriptOutFile />
<TypeScriptOutDir />
<TypeScriptGeneratesDeclarations>True</TypeScriptGeneratesDeclarations>
<TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
<TypeScriptAdditionalFlags> $(TypeScriptAdditionalFlags) --emitDecoratorMetadata
--experimentalDecorators </TypeScriptAdditionalFlags>
<TypeScriptMapRoot />
<TypeScriptSourceRoot />
<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
<TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata>

Step 7

Reload the project.

Step 8

Open the project containing folder and right click on the package holding shift and click open command window here.

Step 9

In Opened command prompt, type npm install followed by Enter. Now all the required files for the AngularJS 2.0 project will be installed.

Congratulations - Your project is ready to use AngularJS 2.0.

Finally, note that without JSON file, you cannot install the npm package. So, first ensure that you add the JSON file to your project.

Points of Interest

I tried to install npm first and added the typescript tags but it didn't work for me. I tried many times, finally I found that the order of steps created an issue for me. If you by any chance tried to install npm first and later add the typescript tags and if it works, please let me know.

History

• 08/01/2016: Version-1

References

• http://stackoverflow.com/questions/15864584/what-are-the-typescript-project-build-configuration-options
• http://stackoverflow.com/questions/17189118/after-upgrading-to-ts-0-9-i-get-ts5007-cannot-resolve-referenced-file-how-do
• https://angular.io/docs/ts/latest/quickstart.html