Giters

MurhafSousli / ngx-highlightjs

Angular syntax highlighting module

Home Page:https://ngx-highlight.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Refused to execute script / [HLJS] ChunkLoadError: Loading chunk 994 failed.

mikeboulet opened this issue · comments

commented

Bug Report or Feature Request (mark with an x)

- [X] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question

OS and Version?

Distributor ID: Ubuntu
Description: Ubuntu 20.04.3 LTS
Release: 20.04
Codename: focal

Chrome on OSX 11.6

Versions

@angular-devkit/architect 0.1202.8
@angular-devkit/build-angular 12.2.8
@angular-devkit/core 12.2.8
@angular-devkit/schematics 12.2.8
@schematics/angular 12.2.8
rxjs 6.6.7
typescript 4.3.5

Repro steps

  1. Works locally with ng build --watch

  2. Fails when sent to AWS/ CDN

  3. Compiled when sent to AWS: ng build --configuration production

The log given by the failure

From Chrome Console :

Refused to execute script from 'https://somesite.com/static/frontend/994.790f7d2bc6bff548b803.js/' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
main.8d20fc2887d4f46e13cb.js:1 [HLJS] ChunkLoadError: Loading chunk 994 failed.
(error: https://somesite.com/static/frontend/994.790f7d2bc6bff548b803.js)
at Object.r.f.j (runtime.da87bc2bc4a224913ba3.js:1)
at runtime.da87bc2bc4a224913ba3.js:1
at Array.reduce ()
at Function.r.e (runtime.da87bc2bc4a224913ba3.js:1)
at Object.fullLibraryLoader (main.8d20fc2887d4f46e13cb.js:1)
at t.loadFullLibrary (main.8d20fc2887d4f46e13cb.js:1)
at t._loadLibrary (main.8d20fc2887d4f46e13cb.js:1)
at new t (main.8d20fc2887d4f46e13cb.js:1)
at Object.t.ɵfac [as factory] (main.8d20fc2887d4f46e13cb.js:1)
at FA.hydrate (main.8d20fc2887d4f46e13cb.js:1)

Desired functionality

Angular template code snipper:

Mention any other details that might be useful

I've tried the three different angular.json configs suggested in the readme but get the same results.

useValue: {
fullLibraryLoader: () => import('highlight.js'),
}

and

useValue: {
coreLibraryLoader: () => import('highlight.js/lib/core'),
lineNumbersLoader: () => import('highlightjs-line-numbers.js'), // Optional, only if you want the line numbers
languages: {
typescript: () => import('highlight.js/lib/languages/typescript'),
css: () => import('highlight.js/lib/languages/css'),
xml: () => import('highlight.js/lib/languages/xml')
}
}

and

"build": {
"options": {
"allowedCommonJsDependencies": [
"highlight.js"
]
}
}

commented

I just realized that it is trying to load that JS file from the wrong location and NOT my CDN on AWS. So the question is how do I tell npx-highlightjs to load it's files from the CDN address and not the current domain?

commented

try import('https://link/to/your/cdn')

commented

That didn't work. I believe Angular is bundling that import and now need to tell hightlightJs where to get that bundle somehow. I didn't see a config option for that.

commented

@mikeboulet yea, then just import it normally in index.html

<head>
  <link rel="stylesheet"
        href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
</head>

or in app.module.ts

import * as hljs from "//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js";

document.defaultView['hljs'] = hljs;

https://stackblitz.com/edit/ngx-highlightjs-de6kyg?file=src%2Findex.html

commented

The link and script tag worked. The import solution caused a compilation error.
Thanks for the help.