Comments (16)
This error is because your project is missing the original package npm i highlight.js
It is weird because it should be installed automatically!
from ngx-highlightjs.
Not really! the only thing that matters is that it should not load the script twice if the highlight module is being used in different lazy modules. that's why I choice a singleton service.
from ngx-highlightjs.
I am sorry but highlight.js is already installed. I figured out the "Highlight.js library was not imported" error because this was missing in my angular.json :
"scripts": [
"src/assets/lib/hljs/highlight.pack.js"
],
But i am still getting cannot read property themePath of null, there are no options inside constructor :
from ngx-highlightjs.
I don't know why you are importing highlight.pack.js in angular.json, this is not mention anywhere in the docs!
can you make a reproduction?
from ngx-highlightjs.
The HLJS token you are talking about is the HIGHLIGHT_OPTIONS token ? If yes, i use it as a provider in the app.module.ts
EDIT @MurhafSousli
I am not having the cannot read property themePath of null with the 6.0.0 (everything works fine). But when i switch to the 6.1.0 then the error appears
from ngx-highlightjs.
Hi @MurhafSousli, sorry to insist but the 6.0.0 of your package works like a charm whereas the 6.1.0 and above are not working anymore with the 'cannot read property themePath of null' error :(
Regards,
from ngx-highlightjs.
I had this issue too. I think this is related to lazy-loaded modules importing this one. In fact, application lazy loaded modules provide the options in their own scope, and because HighlightLoader
& HighlightJS
services are provided in root
, they don't have access to the options.
ngx-highlightjs/projects/ngx-highlightjs/src/lib/highlight.service.ts
Lines 14 to 17 in c1229aa
Cloning this repo and changing providedIn
scopes to any
fixed it for me.
Maybe a static forRoot
pattern might offer more options to avoid multiple loadings of highlight.js
.
from ngx-highlightjs.
@GerkinDev Sure thing! the injection token should be used in the root module only! but the module can be imported at child module level.
That's why I didn't introduce HighlightModule.withConfig()
so users don't make the mistake of setting the config in child module
Adding forRoot
will make the users use it in the root module, and not think about lazy loading it in a child module. an injection token is the best in my opinion.
from ngx-highlightjs.
Yeah I get your point, but in my case, I use this module in my dev tools, and I'd like to not ship it at all in the main bundle. Thus, including it in the root module is not an option for me.
from ngx-highlightjs.
@GerkinDev You are not shipping it using the injection token! you are only passing a function that returns a promise which will load the library. so it won't be included in your main script.
Can you show that it is increasing it?
from ngx-highlightjs.
It must. The injection token declaration, along with the configured value & imports declaration processed by webpack ARE in the root module output.
This is not even close to the size of the full lib, I know. But still, there is a hard reference to multiple files, including highlightjs & your module, anyway. Tree shaking should make it as small as possible, just a few bytes, but a few bytes used by 0.01% of users isn't really worth it.
Moreover, if your module is shipped conditionally (in dev environment only for example), constraining its declaration in the root module can be troublesome, though I suppose there are handy ways to come around this.
Still. I'll go with my fork changing the providers scope.
from ngx-highlightjs.
@GerkinDev When webpack process the import script, it will only include that script in the dist directory, but won't merge it in the main script, meaning that the script won't slow the app launch. it will be loaded separately on parallel with the loader service.
If you are referring to the few bytes reserved for the config value the user pass, like the script string path, that is does not worth lazy loading in my opinion.
But anyway, are you proposing to remove the providedIn: root
from the services?
from ngx-highlightjs.
Are there any real downside you expect, that I should be aware of to consider declaring providers is a necessity ?
from ngx-highlightjs.
Well, Highlight.js is not exported via UMD globals, yet, I see in your loader service that you expose it as global if using line numbers plugin. Maybe this could be used also to check if the lib was already loaded (& eventually supports loading via a CDN).
Globals are evil. But here, we're talking about replacing a global service with a global variable.
Or maybe another service could be globally used without any dependency, that serves just as a memo for configured loaders. Dunno.
And anyway, in most case, if the same JS asset is served twice, a cached version would be used, reducing the loading time to 0-ish
from ngx-highlightjs.
I don't see dependencies in the current loader service!
The line number script requires hljs to be defined in the global variables. otherwise it will not work (you can have a look at their repo).
While I am not against the idea of removing the loader service from root, loading the script twice sounds fundamentally wrong to me (even if it is cached). but anyway, the function hljs.registerLanguages()
will be called twice too. and we have the load theme function which appends a style element to the head.
In case of we want to change it, we should have a clear alternative design that execute the code only once
from ngx-highlightjs.
I was talking about those, that force the loader to have HIGHLIGHT_OPTIONS
provider in scope:
ngx-highlightjs/projects/ngx-highlightjs/src/lib/highlight.loader.ts
Lines 22 to 24 in c1229aa
from ngx-highlightjs.
Related Issues (20)
- Angular async pipe return type is 'string|null' not 'string' as [highlight] expect. HOT 5
- ERROR TypeError: Cannot read properties of null (reading 'themePath')
- Support loading of relative URLs HOT 2
- Usage in Angular module: Error: inject() must be called from an injection context HOT 1
- npm cannot resolve peer dependency @angular/common@">=14.0.0" from [email protected] HOT 1
- Could not find a declaration file for module 'highlightjs-line-numbers.js' - Show line numbers HOT 6
- The gist class member of the GistDirective is private
- Angular Universal - ERROR ReferenceError: requestAnimationFrame is not defined HOT 10
- Binding data from innerHtml HOT 5
- setTheme does not load theme if `themePath` was not specified in the configuration HOT 1
- line-number and styling not being applied for json HOT 3
- Angular 16
- Using ngx-highlightjs in stand-alone components
- Your documentation is probably outdated HOT 1
- (love) Just to tell you how great your software is HOT 2
- This repo not support pnpm HOT 9
- Add line numbers options HOT 1
- Multiline strings on C# breaks highlighting HOT 3
- Property '"code"' is incompatible with index signature. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngx-highlightjs.