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

Angular deployment using npm run build with the base-href params doesnt render the page

最近我遇到了一个问题,我们在构建管道 yaml 脚本中使用了“npm 运行 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 angular管道工作(如果没有传递参数)。但是我们需要环境参数和 base-href。

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

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

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

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

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

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

npm 运行 build -- --base-href=/Domain-href-url/

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

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

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

如我的用例示例:

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

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