Question

我在这里关注Angular 2 AoT编译指南：https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

我正在使用Visual Studio 2015社区IDE。

当我运行ngc时，ngfactory组件在aot目录中创建（如tsconfig-aot.json中所定义）。

Visual Studio IDE会在所有ngfactory代码上自行处理。大部分错误与ngFactory代码有关，无关紧要地引用私有方法和属性，并使用不正确的呼叫签名......例如

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

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

基本上，在将"exclude": [ "aot" ]添加到tsconfig.json文件之前，您无法构建。

这让IDE大部分都会放松，但仍有一个问题。 main-aot.ts文件必须从app.component.ngfactory文件夹（已排除）中导入aot。

如下面的常见问题解答中所述，导入排除的文件是一个很大的F-You，并会导致Visual Studio忽略排除。

来源：https://github.com/Microsoft/TypeScript/wiki/FAQ#why-is-a-file-in-the-exclude-list-still-picked-up-by-the-compiler

为什么排除列表中的文件仍被编译器选中？

tsconfig.json将文件夹转换为“项目”。没有指定任何   “exclude”或“files”条目，包含该文件夹的文件夹中的所有文件   tsconfig.json及其所有子目录都包含在您的   汇编

如果要排除某些文件，请使用“exclude”，如果愿意的话   而是指定所有文件，而不是让编译器查看它们   up，使用“files”。

那是tsconfig.json自动包含。有一个不同的   问题，即模块分辨率。通过模块分辨率，我的意思是   编译器试图理解ns在import语句中的含义   喜欢：从“mod”导入* ns。为此，编译器需要   模块的定义，这可能是您自己的代码的.ts文件，或   a .d.ts用于导入的定义文件。如果找到该文件，它   无论是否在前面的步骤中被排除，都将被包括在内。

因此，要从编译中排除文件，您需要排除和全部   所有具有导入或///的文件   对它的指示。

基本上，我也必须"exclude": [ "aot", "main-aot.ts" ]来解除所有错误。

现在的问题是，当我修改main-aot.ts文件时，compileOnSave: true文件中的tsconfig.json选项没有任何效果。我认为这是因为它被排除在外。

我依靠compileOnSave来生成所有的B.S.需要将项目吞入，打嗝并放屁到可部署的状态。

我正试图在Visual Studio 2015中找个人建议使用Angular2 AoT，并在save上编译。

EDIT 2/1/2017 ：我暂时创建了一个复杂的解决方法。我仍然希望那里的某个人可以提供一个神奇的子弹，这将使这个过程变得不那么简单。

我利用了VS2015似乎只评估明确命名为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"]。< / p>

我已经创建了一个PowerShell脚本来粘合这些...

$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.

我还在wwwroot\aot\*.ts文件中添加了.tfignore，以防止步骤4中删除的文件被源代码控制评估。

Angular 2 AoT（ngc），Visual Studio 2015和compileOnSave

0 个答案: