angular2mvc5

Visual Studio 2015 Angular2 (Beta 1) Sample with MVC5

Attention: Requires "TypeScript 1.7.6.0 for Visual Studio 2015 Update 1" Visual Studio extension, otherwise building the solution will fail with error [Cannot find module "angular2/platform/browser"]

Be sure that all NPM Packages (package.json) are completely restored before building the solution (have a look into the output window). Normally the packages should be automatically restored when you first open the solution (this might take several minutes). If not, right click package.json -> Restore Packages

If you then build the app, the gulp task copies the required node_modules files to "app/libs" folder.

Description

Visual Studio compiles TypeScript files for you (not via gulp-task). All you have to do to make MVC5 projects working with angular2 is to add the following TypeScript settings to your .csproj file:

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptJSXEmit>None</TypeScriptJSXEmit>
    <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
    <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
    <TypeScriptModuleKind>commonjs</TypeScriptModuleKind>
    <TypeScriptRemoveComments>False</TypeScriptRemoveComments>
    <TypeScriptOutFile />
    <TypeScriptOutDir />
    <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
    <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
    <TypeScriptSourceMap>True</TypeScriptSourceMap>
    <TypeScriptMapRoot />
    <TypeScriptSourceRoot />
    <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
</PropertyGroup>

Gulp

The gulpfile.js contains a task called "libs", which copies the required node modules to the app/libs folder. Therefore, all NPM packages must be successfully restored.

The gulpfile also contains a task called "compile-ts", which is currently not in use. This task could be used to compile the typescript files instead of letting VS2015 compile the .ts files. Therefore you should disable VS typescript-compilation by adding the following line to your .csproj PropertyGroup:

 <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

If you choose gulp to compile your .ts files, then you also have to add the "compile-ts" task as after-build binding in the task runner explorer:

/// <binding AfterBuild='libs, compile-ts' Clean='clean' />