Problem with Angular 2 AoT (ngc), Visual Studio 2015 and compileOnSave

Question

Problem with Angular 2 AoT (ngc), Visual Studio 2015 and compileOnSave

I follow the instructions of Angular 2 AoT: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

I am using Visual Studio 2015 IDE.

When I run ngc, the ngfactory components are created in the directory aot(as defined in tsconfig-aot.json).

Visual Studio IDE uses all ngfactory code. Most of the errors are related to ngFactory code, evenly referring to private methods and properties, and the use of incorrect call signatures ... for example.

Build:Property _'viewContainerRef' is private and only accessible within class 'xyz.component';

Build:Supplied parameters do not match any signature of call target, ngOnChanges().

Basically, you cannot build until you add "exclude": [ "aot" ]to the file tsconfig.json.

This causes the IDE to basically shut down, but there is another problem. The file main-aot.tsshould import app.component.ngfactoryfrom the folder aot(which was excluded).

As explained in the FAQ below, importing an excluded file is a big F-You and will throw an exception in Visual Studio.

Source: https://github.com/Microsoft/TypeScript/wiki/FAQ#why-is-a-file-in-the-exclude-list-still-picked-up-by-the-compiler
Why is the file in the exception list still selected by the compiler?
tsconfig.json turns a folder into a "project". Without specifying any “exclude” or “files”, all files in the folder containing tsconfig.json and all its subdirectories are included in your collection.
, "exclude", , "".
tsconfig.json. , . , ns import : import * ns "mod". , .ts .d.ts . , , .
, , , /// .

, "exclude": [ "aot", "main-aot.ts" ] .

, , main-aot.ts, compileOnSave: true tsconfig.json . , , .

compileOnSave, B.S. gulp, , .

-, Angular2 AoT Visual Studio 2015.

2/1/2017: . , - , .

, VS2015, , typescript, tsconfig.json.

tsconfig.json aot main-aot.ts.

tsconfig-aot-ngc.json, Angular2 AoT.

tsconfig-aot-tsc.json, tsconfig.json, , - main-aot.ts , "files": [ "main-aot.ts"].

powershell script, ...

$root = "wwwroot";

$target ="wwwroot\aot\*";

$artifactsTs = "wwwroot\aot\*.ngfactory.ts";

$ngc = "../node_modules/.bin/ngc";
$tsConfigNgc = "./tsconfig-aot-ngc.json";

$tsc =  "tsc";
$tsConfigTsc = "./tsconfig-aot-tsc.json";

Write-Host "empty the aot folder...";
Get-ChildItem -Recurse -$target | Remove-Item -Recurse;

$ExecutionContext.InvokeCommand.CommandNotFoundAction = { Write-Host "ngc not found! run 'npm install -g ngc'" -ForegroundColor Red; };
Write-Host "ngc is compiling $tsConfigNgc...";
& $ngc -p $tsConfigNgc;

Write-Host "tsc is transpiling $tsConfigTsc...";
$ExecutionContext.InvokeCommand.CommandNotFoundAction = { Write-Host "tsc not found! run 'npm install -g typescript'" -ForegroundColor Red; };
& $tsc -p $tsConfigTsc;

Write-Host "deleting ts artifacts";
$ExecutionContext.InvokeCommand.CommandNotFoundAction = { };
Get-ChildItem -Recurse $artifactsTs | Remove-Item -Recurse;
Write-Host 'done!';

:

 1. delete everything from the aot folder. 
 2. run ngc to produce *.ngfactory.ts files and *.ngsummary.json files
 3. run tsc using an alternate tsconfig to produce *.ngfactory.js files.
 4. delete all *.ngfactory.ts files since they are not needed and only add confusion for VS2015.