使用带有 base-href 参数的 npm run build 的角度部署不会呈现页面答案

【问题标题】：Angular deployment using npm run build with the base-href params doesnt render the page使用带有 base-href 参数的 npm run build 的角度部署不会呈现页面
【发布时间】：2020-07-07 18:10:11
【问题描述】：

最近我遇到了一个问题，我们在构建管道 yaml 脚本中使用了“npm run build”命令。然后是'base-href'，'configuration'等参数。构建通过并且部署成功，但是当我们测试应用程序时，它不会呈现页面，但控制台会出现以下或类似的错误。

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
runtime-es2015.js:1

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
polyfills-es2015.js:1 

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
vendor-es2015.js:1 

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
main-es2015.js:1

我们在 yaml 中使用的命令是

npm run build -- "-c=<environment> --base-href='/Domain-href-url/'"

SO 中建议的类似问题没有解决或帮助，因为脚本本身在本地工作，使用 package.json cmds 工作正常，使用 vNext 构建管道在 Azure 管道中工作（如果没有传递参数） .但是我们需要环境参数和 base-href。

【问题讨论】：

标签： javascript angular yaml pipeline azure-pipelines-yaml

【解决方案1】：

我在这里发布这个问题，因为它可能对在他们的 yaml 脚本中也有/面临这个问题的人有所帮助。

我找不到任何更好的解决方案帮助来源，但最终我找到了有帮助的 one link。

此外，由于我们传递的 base-href 的参数值，问题仍然存在。如果我们在参数中传递 --base-href='/Domain-href-url/' （如单引号或双引号），它将创建 index.html 与

<base href="'/Domain-href-url/'">

查看带有单引号的href url..这会导致这个问题。

所以解决方案是：（相当简单:-)）传递不带引号的参数。

npm run build -- --base-href=/Domain-href-url/

<base href="/Domain-href-url/">

相信我，这将解决由通过 yaml 脚本和构建管道将这些构建 args 作为参数传递时引起的问题。

现在，如果我们遵循相同的脚本命令，其他人可以使用 package.json 中的脚本替代解决方案。

在我的用例示例中：

"build-qa": "ng build -c=test --base-href=/Domain-href-url/",

希望这对在构建节点或角度应用程序的构建管道 yaml 脚本中遇到此类问题的人有所帮助。

【讨论】：