0

Recently i ended up in an issue where we use the "npm run build" command in our build pipeline yaml script. And followed by the parameters like 'base-href', 'configuration' etc. The build went through and the deployment was success but when we test the app, it would not render the page but the console will have the following or similar errors.

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

the command we are using in the yaml was

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). But we need the environment params and the base-href.

Ak777
  • 346
  • 7
  • 18

1 Answers1

1

I am posting this question here as it may be helpful for someone who also has / faces this issue in their yaml scripts.

I could not find any better source of help for the solution but eventually i found one link that helped.

Further to this, the issue still persisted due to the parameter value for the base-href we pass. If we are passing the --base-href='/Domain-href-url/' (like in single or double quotes) within the parameters, it would create the index.html with the

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

Look at the href url with the single quotes within.. and that causes this trouble.

So the solution is: (fairly simple :-)) pass the parameters without the quotes.

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

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

Believe me, this would fix those issues caused by, when passing these build args as parameters via the yaml scripts and build pipelines.

Now, alternative solutions for some other folks by using the scripts in the package.json would also work if we follow the same script commands.

as in my use case example:

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

Hope this helps someone who faces such issues in the build pipeline yaml scripts for building node or angular apps.

Ak777
  • 346
  • 7
  • 18
  • I'm having an issue. `ng-build --base-href "/MyApp/" works fine, but if I add it as a script to package.json and run `npm run build` it actually sets the base-ref to an absolute file path: C:\...\MyApp\. Ever encounter this issue? – Saturn K Jun 24 '22 at 21:03
  • Havent done that in the package.json, since I use this command in the pipeline to trigger the build via CI like Azure DevOps or Jenkins (tried both indeed). BTW, did you give a try by not adding "/" in the beginning and end, and just set "MyApp" as base-href since you are doing in the package.json and thats within the same structure as the other code base is, right? – Ak777 Jul 07 '22 at 03:24