diff --git a/projects/ngx-highlightjs-demo/src/app/app.component.ts b/projects/ngx-highlightjs-demo/src/app/app.component.ts
index ca369a7..bc00790 100644
--- a/projects/ngx-highlightjs-demo/src/app/app.component.ts
+++ b/projects/ngx-highlightjs-demo/src/app/app.component.ts
@@ -1,12 +1,37 @@
import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
-import { Gist } from 'ngx-highlightjs/plus';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButtonModule } from '@angular/material/button';
+import { NgScrollbarModule } from 'ngx-scrollbar';
import { HighlightLoader } from 'ngx-highlightjs';
+import { Gist } from 'ngx-highlightjs/plus';
+import { GistComponent } from './gist/gist.component';
+import { HeaderComponent } from './header/header.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
- changeDetection: ChangeDetectionStrategy.OnPush
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ standalone: true,
+ imports: [
+ CommonModule,
+ FormsModule,
+ MatIconModule,
+ MatInputModule,
+ MatSelectModule,
+ MatButtonModule,
+ MatToolbarModule,
+ NgScrollbarModule,
+ FlexLayoutModule,
+ HeaderComponent,
+ GistComponent
+ ]
})
export class AppComponent implements OnInit {
diff --git a/projects/ngx-highlightjs-demo/src/app/app.module.ts b/projects/ngx-highlightjs-demo/src/app/app.module.ts
deleted file mode 100644
index 57cf208..0000000
--- a/projects/ngx-highlightjs-demo/src/app/app.module.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { FormsModule } from '@angular/forms';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { NgScrollbarModule } from 'ngx-scrollbar';
-import { MaterialModule } from './material/material.module';
-
-import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
-import { HighlightPlusModule, GIST_OPTIONS } from 'ngx-highlightjs/plus';
-
-import { AppComponent } from './app.component';
-import { HeaderComponent } from './header/header.component';
-import { GistComponent } from './gist/gist.component';
-import { CodeComponent } from './code/code.component';
-
-@NgModule({
- declarations: [
- AppComponent,
- HeaderComponent,
- GistComponent,
- CodeComponent
- ],
- imports: [
- BrowserModule.withServerTransition({ appId: 'serverApp' }),
- BrowserAnimationsModule,
- FormsModule,
- MaterialModule,
- FlexLayoutModule,
- NgScrollbarModule,
- HighlightPlusModule
- ],
- providers: [
- {
- provide: HIGHLIGHT_OPTIONS,
- useValue: {
- // fullLibraryLoader: () => import('highlight.js'),
- lineNumbersLoader: () => import('ngx-highlightjs/line-numbers'),
- coreLibraryLoader: () => import('highlight.js/lib/core'),
- languages: {
- typescript: () => import('highlight.js/lib/languages/typescript'),
- css: () => import('highlight.js/lib/languages/css'),
- xml: () => import('highlight.js/lib/languages/xml')
- },
- themePath: 'assets/styles/androidstudio.css'
- }
- },
- {
- provide: GIST_OPTIONS,
- useValue: {
- // clientId:
- // clientSecret:
- }
- }
- ],
- bootstrap: [AppComponent]
-})
-export class AppModule {
-}
diff --git a/projects/ngx-highlightjs-demo/src/app/code/code.component.ts b/projects/ngx-highlightjs-demo/src/app/code/code.component.ts
index 4c23eb2..363bb30 100644
--- a/projects/ngx-highlightjs-demo/src/app/code/code.component.ts
+++ b/projects/ngx-highlightjs-demo/src/app/code/code.component.ts
@@ -1,16 +1,17 @@
import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { HighlightModule } from 'ngx-highlightjs';
@Component({
- selector: 'app-code',
- template: `
-
+ selector: 'app-code',
+ template: `
-
`,
- styleUrls: ['./code.component.scss'],
- changeDetection: ChangeDetectionStrategy.OnPush
+ styleUrls: ['./code.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ standalone: true,
+ imports: [HighlightModule]
})
export class CodeComponent {
@Input() code!: string;
diff --git a/projects/ngx-highlightjs-demo/src/app/gist/gist.component.ts b/projects/ngx-highlightjs-demo/src/app/gist/gist.component.ts
index 040998f..b9f98ba 100644
--- a/projects/ngx-highlightjs-demo/src/app/gist/gist.component.ts
+++ b/projects/ngx-highlightjs-demo/src/app/gist/gist.component.ts
@@ -1,13 +1,31 @@
import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCardModule } from '@angular/material/card';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatButtonModule } from '@angular/material/button';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
import { BehaviorSubject, map } from 'rxjs';
import { HighlightLoader } from 'ngx-highlightjs';
-import { Gist } from 'ngx-highlightjs/plus';
+import { Gist, HighlightPlusModule } from 'ngx-highlightjs/plus';
+import { CodeComponent } from '../code/code.component';
@Component({
selector: 'app-gist',
templateUrl: './gist.component.html',
styleUrls: ['./gist.component.scss'],
- changeDetection: ChangeDetectionStrategy.OnPush
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ standalone: true,
+ imports: [
+ CommonModule,
+ MatIconModule,
+ MatCardModule,
+ MatTabsModule,
+ MatButtonModule,
+ MatProgressBarModule,
+ HighlightPlusModule,
+ CodeComponent
+ ]
})
export class GistComponent implements OnInit {
diff --git a/projects/ngx-highlightjs-demo/src/app/header/header.component.ts b/projects/ngx-highlightjs-demo/src/app/header/header.component.ts
index 8527fd8..899e8d4 100644
--- a/projects/ngx-highlightjs-demo/src/app/header/header.component.ts
+++ b/projects/ngx-highlightjs-demo/src/app/header/header.component.ts
@@ -1,17 +1,13 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { FlexModule } from '@angular/flex-layout/flex';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
- changeDetection: ChangeDetectionStrategy.OnPush
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ standalone: true,
+ imports: [FlexModule]
})
-export class HeaderComponent implements OnInit {
-
- constructor() { }
-
- ngOnInit() {
- }
-
+export class HeaderComponent {
}
-
\ No newline at end of file
diff --git a/projects/ngx-highlightjs-demo/src/app/material/material.module.ts b/projects/ngx-highlightjs-demo/src/app/material/material.module.ts
deleted file mode 100644
index 57a6a65..0000000
--- a/projects/ngx-highlightjs-demo/src/app/material/material.module.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { NgModule } from '@angular/core';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatListModule } from '@angular/material/list';
-import { MatCardModule } from '@angular/material/card';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatSelectModule } from '@angular/material/select';
-import { MatTabsModule } from '@angular/material/tabs';
-
-const MATERIAL_MODULES = [
- MatButtonModule,
- MatListModule,
- MatIconModule,
- MatCardModule,
- MatToolbarModule,
- MatSelectModule,
- MatTabsModule,
- MatProgressBarModule
-];
-
-@NgModule({
- imports: [MATERIAL_MODULES],
- exports: [MATERIAL_MODULES]
-})
-export class MaterialModule {
-}
diff --git a/projects/ngx-highlightjs-demo/src/main.ts b/projects/ngx-highlightjs-demo/src/main.ts
index 4537845..2f5a65c 100644
--- a/projects/ngx-highlightjs-demo/src/main.ts
+++ b/projects/ngx-highlightjs-demo/src/main.ts
@@ -1,22 +1,52 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+import { GIST_OPTIONS } from 'ngx-highlightjs/plus';
+import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
if (environment.production) {
enableProdMode();
}
function bootstrap() {
- platformBrowserDynamic().bootstrapModule(AppModule)
- .catch(err => console.error(err));
- };
+ bootstrapApplication(AppComponent, {
+ providers: [
+ importProvidersFrom(BrowserModule.withServerTransition({ appId: 'serverApp' })),
+ provideHttpClient(),
+ {
+ provide: HIGHLIGHT_OPTIONS,
+ useValue: {
+ // fullLibraryLoader: () => import('highlight.js'),
+ lineNumbersLoader: () => import('ngx-highlightjs/line-numbers'),
+ coreLibraryLoader: () => import('highlight.js/lib/core'),
+ languages: {
+ typescript: () => import('highlight.js/lib/languages/typescript'),
+ css: () => import('highlight.js/lib/languages/css'),
+ xml: () => import('highlight.js/lib/languages/xml')
+ },
+ themePath: 'assets/styles/androidstudio.css'
+ }
+ },
+ {
+ provide: GIST_OPTIONS,
+ useValue: {
+ // clientId:
+ // clientSecret:
+ }
+ },
+ provideAnimations()
+ ]
+ })
+ .catch(err => console.error(err));
+};
+
+if (document.readyState === 'complete') {
+ bootstrap();
+} else {
+ document.addEventListener('DOMContentLoaded', bootstrap);
+}
- if (document.readyState === 'complete') {
- bootstrap();
- } else {
- document.addEventListener('DOMContentLoaded', bootstrap);
- }
-
diff --git a/projects/ngx-highlightjs/plus/src/code-from-url.ts b/projects/ngx-highlightjs/plus/src/code-from-url.ts
index 770c851..dcf7cc3 100644
--- a/projects/ngx-highlightjs/plus/src/code-from-url.ts
+++ b/projects/ngx-highlightjs/plus/src/code-from-url.ts
@@ -3,7 +3,8 @@ import { Observable } from 'rxjs';
import { CodeLoader } from './code-loader';
@Pipe({
- name: 'codeFromUrl'
+ name: 'codeFromUrl',
+ standalone: true
})
export class CodeFromUrlPipe implements PipeTransform {
diff --git a/projects/ngx-highlightjs/plus/src/code-loader.ts b/projects/ngx-highlightjs/plus/src/code-loader.ts
index cae77f1..c0070bd 100644
--- a/projects/ngx-highlightjs/plus/src/code-loader.ts
+++ b/projects/ngx-highlightjs/plus/src/code-loader.ts
@@ -19,7 +19,7 @@ export class CodeLoader {
if (this.isOAuthProvided()) {
params = new HttpParams().set('client_id', this._options.clientId).set('client_secret', this._options.clientSecret);
}
- return this.fetchFile(`https://api.github.com/gists/${id}`, { params, responseType: 'json' });
+ return this.fetchFile(`https://api.github.com/gists/${ id }`, { params, responseType: 'json' });
}
/**
diff --git a/projects/ngx-highlightjs/plus/src/gist.ts b/projects/ngx-highlightjs/plus/src/gist.ts
index bc0c1fb..71163f7 100644
--- a/projects/ngx-highlightjs/plus/src/gist.ts
+++ b/projects/ngx-highlightjs/plus/src/gist.ts
@@ -3,7 +3,8 @@ import { CodeLoader } from './code-loader';
import { Gist } from './gist.model';
@Directive({
- selector: '[gist]'
+ selector: '[gist]',
+ standalone: true
})
export class GistDirective {
@@ -21,7 +22,8 @@ export class GistDirective {
}
@Pipe({
- name: 'gistFile'
+ name: 'gistFile',
+ standalone: true
})
export class GistFilePipe implements PipeTransform {
transform(gist: Gist, fileName: string): string | null {
diff --git a/projects/ngx-highlightjs/plus/src/highlight-plus.module.ts b/projects/ngx-highlightjs/plus/src/highlight-plus.module.ts
index f189c82..2c21629 100644
--- a/projects/ngx-highlightjs/plus/src/highlight-plus.module.ts
+++ b/projects/ngx-highlightjs/plus/src/highlight-plus.module.ts
@@ -1,21 +1,14 @@
import { NgModule } from '@angular/core';
-import { HttpClientModule } from '@angular/common/http';
-import { HighlightModule } from 'ngx-highlightjs';
import { GistFilePipe, GistDirective } from './gist';
import { CodeFromUrlPipe } from './code-from-url';
@NgModule({
imports: [
- HighlightModule,
- HttpClientModule
- ],
- declarations: [
GistDirective,
GistFilePipe,
CodeFromUrlPipe
],
exports: [
- HighlightModule,
GistDirective,
GistFilePipe,
CodeFromUrlPipe
diff --git a/projects/ngx-highlightjs/src/lib/highlight.loader.ts b/projects/ngx-highlightjs/src/lib/highlight.loader.ts
index a5c8fce..cf81dae 100644
--- a/projects/ngx-highlightjs/src/lib/highlight.loader.ts
+++ b/projects/ngx-highlightjs/src/lib/highlight.loader.ts
@@ -9,10 +9,9 @@ import { HIGHLIGHT_OPTIONS, HighlightLibrary, HighlightOptions } from './highlig
})
export class HighlightLoader {
// Stream that emits when hljs library is loaded and ready to use
- private readonly _ready = new BehaviorSubject(null);
+ private readonly _ready: BehaviorSubject = new BehaviorSubject(null);
readonly ready: Observable = this._ready.asObservable().pipe(
filter((hljs: HighlightLibrary | null) => !!hljs),
- map((hljs: HighlightLibrary | null) => hljs as HighlightLibrary),
take(1)
);
@@ -150,7 +149,7 @@ export class HighlightLoader {
*/
const importModule = (moduleLoader: Promise): Observable => {
return from(moduleLoader).pipe(
- filter((module: any) => !!module && !!module.default),
+ filter((module: any) => !!module?.default),
map((module: any) => module.default)
);
};
diff --git a/projects/ngx-highlightjs/src/lib/highlight.module.ts b/projects/ngx-highlightjs/src/lib/highlight.module.ts
index f9dfeae..2daaf6c 100644
--- a/projects/ngx-highlightjs/src/lib/highlight.module.ts
+++ b/projects/ngx-highlightjs/src/lib/highlight.module.ts
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
import { Highlight } from './highlight';
@NgModule({
- declarations: [Highlight],
+ imports: [Highlight],
exports: [Highlight]
})
export class HighlightModule {
diff --git a/projects/ngx-highlightjs/src/lib/highlight.spec.ts b/projects/ngx-highlightjs/src/lib/highlight.spec.ts
index 41c5a6c..3603fcf 100644
--- a/projects/ngx-highlightjs/src/lib/highlight.spec.ts
+++ b/projects/ngx-highlightjs/src/lib/highlight.spec.ts
@@ -8,7 +8,8 @@ import { HighlightLoader } from './highlight.loader';
import { HighlightLibrary } from './highlight.model';
@Component({
- template: `