Angular 部署使用 npm 使用 base-href 参数运行构建不会呈现页面

Question

最近我遇到了一个问题，我们在构建管道 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/'"

The suggested similar problems in the SO didnt solve or help as the script as such used to work locally, using the package.json cmds worked fine, using the vNext build pipeline for angular in Azure pipelines worked (if no parameters passed). 但是我们需要环境参数和base-href。

Answer 1

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

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

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

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

查看带有单引号的href url，这会导致这个麻烦。

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

npm 运行构建 ----base-href=/Domain-href-url/

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

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

现在，如果我们遵循相同的脚本命令，使用 package.json 中的脚本为其他人提供的替代解决方案也将起作用。

如我的用例示例：

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

希望这有助于在构建管道 yaml 脚本中遇到此类问题的人，这些脚本用于构建节点或 angular 应用程序。