JayChase/angular2-highlight-js

while error ERROR ReferenceError: hljs is not defined

Benjmmi opened this issue · 2 comments

Benjmmi commented

my project has angular2-highlight-js,why error
AppComponent_Host.ngfactory.js? [sm]:1 ERROR ReferenceError: hljs is not defined at HighlightJsService.highlight (highlight-js.service.js:11) at AppComponent.ngAfterViewInit (app.component.ts:18) at callProviderLifecycles (core.js:12691) at callElementProvidersLifecycles (core.js:12658) at callLifecycleHooksChildrenFirst (core.js:12641) at checkAndUpdateView (core.js:13796) at callWithDebugContext (core.js:15041) at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:14578) at ViewRef_.detectChanges (core.js:11559) at eval (core.js:5891)
i don't know to do anything

npnm commented

I am also facing same issue
ERROR ReferenceError: hljs is not defined
at highlight-js-content.directive.js:23
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular (core.js:3716)
at HighlightJsContentDirective.push../node_modules/angular2-highlight-js/lib/highlight-js-content.directive.js.HighlightJsContentDirective.ngAfterViewChecked (highlight-js-content.directive.js:

adamdoyle commented

The Angular CLI instructions in the readme.md seem to be missing some steps (although it's arguably more of a bug since angular2-highlight-js should be pulling this in as a dependency or peer-dependency and importing hljs itself, rather than faking it out with declare var hljs: any;).

I managed to get it working with the following [in addition to the existing steps from the readme.md]:

(1) add dependencies on highlight.js and its typings,

npm install --save highlight.js
npm install --save-dev @types/highlight.js

(2) select a style from the highlight.js/styles directory [e.g. monokai-sublime.css] and append it to the styles array in angular.json, and

{  
   "projects":{  
      "your-angular-cli-project":{  
         "architect":{  
            "build":{  
               "options":{
                  "scripts": [
                     "node_modules/highlight.js/lib/highlight.js"
                  ],
                  "styles": [
                     "node_modules/highlight.js/styles/monokai-sublime.css"
                  ]
               }
            }
         }
      }
   }
}

(3) in a file with global scope (e.g. app.module.ts or polyfills.ts), import the default export as hljs from highlight.js and assign to the window object so that the angular2-highlight-js code can find it.

import * as hljs from 'highlight.js';
(window as any).hljs = hljs;
  • 👍1