带有 Angular2 的 VSTS 扩展

Question

我目前正在尝试创建 Visual Studio Team Services Extension，使用 Angular2 包括其 CLI：https://github.com/DrMueller/Ng-Vsts

不幸的是，我无法将其发送到运行：虽然我可以挂钩 VSTS 并看到选项卡条目以及 "loading..."，但 VSTS 似乎阻止了加载javascript-bundles，因为我总是得到：

Refused to execute script from 'https://drmueller.gallery.vsassets.io/inline.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

令我困扰的是，我在网络上找不到任何信息可以让这两个系统一起运行，所以它可能一开始就不可能吗？在没有 Angular-CLI 的情况下是否更可能使它工作，但是例如使用 Gulp-Tasks？

Answer 1

原因是JavaScript文件不能在body中，需要包含在head中。

对于该示例，相关的 JS 文件将包含在主体中（在 <app-root> 后面），您不能将它们包含在头部（因为它会抛出 app-root did not match 错误） .

加载应用后加载JS：

document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic().bootstrapModule(AppModule);
});

Answer 2

我在 Angular-CLI GitHub 上反问过，只有在 DOM 加载后我才能很容易地启动 JavaScript。这里讨论：https://github.com/angular/angular-cli/issues/6205

我所要做的就是将 main.ts 引导程序替换为以下行：

document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic().bootstrapModule(AppModule);
});

但是由于 Angular-CLI 添加了 JavaScripts，我还创建了一个小程序，将它们从正文中删除：https://github.com/DrMueller/HtmlJavaScriptInjector

一起解决所有问题，我现在可以构建、删除 HTML 并使用此 PowerShell 发布扩展：

$basePath = 'C:\MyGit\Personal\ng-vsts';
$distPath = $basePath + '\dist';

Set-Location $basePath;

### Build
ng build;


### Replace HTML with Js -- Start
$relativeSubpath = '\script\internals\html-replacer';
$htmlReplacerPath = $basePath + $relativeSubpath;
Set-Location $htmlReplacerPath;

dotnet '.\Mmu.Hji.Console.dll' $distPath;
### Replace HTML with Js -- End


### Publish extension -- Start
Set-Location $basePath;
$publishKey = Get-Content 'C:\Users\matthias.mueller\Dropbox\AssetsAndTools\VSTS_Key.txt';
tfx extension publish --manifest-globs vss-extension.json --rev-version -t $publishKey;
### Publish extension -- End

Answer 3

的确，要让你的 SPA 在 Azure DevOps 中工作，你需要修改你的 index.html.

首先，您需要删除<app-root>之后的所有脚本。为此，您可以使用此 powershell 脚本：

$folder_prefix = "dist\angular"
$folderPath = Join-Path -Path $PSScriptRoot -ChildPath $folder_prefix
$indexHTML = Join-Path -Path $folderPath -ChildPath "index.html"

$scripts = @()
$pattern = "<script\b[^>]*>(.*?)<\/script>"
Select-String -Path $indexHTML -Pattern $pattern -AllMatches | %{$_.Matches} | ForEach-Object {
    $script = Select-String -InputObject $_ -Pattern '"(.*)"' -AllMatches | %{$_.Matches} | ForEach-Object {
        $scriptPath = Join-Path -Path $folderPath -ChildPath $_.ToString().Replace('"', '')
        Write-Host ("Found " + $scriptPath)
        $scripts += $scriptPath
    }
}

$scriptContentHolder = ""
$scripts | ForEach-Object {
    Write-Host ("Reading " + $_)   
    $scriptContentHolder += Get-Content $_ -Raw -Encoding UTF8
}

Write-Host "Replacing index.html"
$html = Get-Content $indexHTML -Raw -Encoding UTF8
$html -replace $pattern, ("<script>`n" + $scriptContentHolder + "`n</script>`n") | Out-File $indexHTML -Encoding utf8
Write-Host "Replaced"

您可以将此powershell 代码保存到根文件夹中。这个脚本的主要目的是读取dist\angular\index.html，找到所有脚本，读取它们并替换为inline.

然后在您的 package.json 中添加新脚本：

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "extension:create": "ng build && powershell -file devops-optimizer.ps1 && tfx extension create --output-path dist/azure-devops",
    "powershell:index": "powershell -file devops-optimizer.ps1"
  }

带有 Angular2 的 VSTS 扩展

VSTS Extension with Angular2

javascript

angular

azure-devops-rest-api