Question

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

不幸的是，我不能让它运行：虽然我可以挂钩VSTS并看到tab-entry以及“loading ...”，但似乎VSTS会阻止加载javascript-bundle因为我总是得到：

拒绝执行脚本 'https://drmueller.gallery.vsassets.io/inline.bundle.js'因为它 MIME类型（'text / html'）不可执行，并且是严格的MIME类型检查已启用。

令我感到困扰的是，我发现网上绝对没有任何信息可以让这两个系统结合在一起，所以它首先可能是不可能的？在没有Angular-CLI的情况下让它工作可能更合适，但是例如使用Gulp-Tasks？

Answer 1

原因是JavaScript文件不能在正文中，需要包含在头部。

对于该示例，相关的JS文件将包含在正文中（在<app-root>后面）并且您不能将它们包含在头部中（因为它会抛出app-root不匹配错误）。

在加载应用后加载JS：

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

Answer 2

我回答了Angular-CLI GitHub，我只能在加载DOM后轻松启动JavaScript。在这里讨论：https://github.com/angular/angular-cli/issues/6205

我所要做的就是用这行替换main.ts bootstraping：

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

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

将所有内容整合在一起，我现在可以使用此PowerShell构建，删除HTML并发布扩展程序：

$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，查找所有脚本，阅读并替换内联。

然后在您的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扩展

3 个答案: