Skip to content

Commit 32f07ff

Browse files
duxorduxor
committed
Refactor to standalone components and Angular 15 bootstrap API
Migrated all components to use standalone configuration and eliminated centralized `AppModule` and `AppRoutingModule`. Updated bootstrap logic to use Angular 15 `bootstrapApplication` with `ApplicationConfig`. Improved imports and encapsulation for better modularity and maintainability.
1 parent bf67ed1 commit 32f07ff

21 files changed

+121
-99
lines changed

‎projects/demo/src/app/app-routing.module.ts

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎projects/demo/src/app/app.component.html

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
</div>
2626

2727
<div class="intro__buttons">
28-
<ng-container #buttons></ng-container>
28+
<ng-container #buttons />
2929
</div>
3030

3131
<!-- <div class="intro__code-caption">-->
@@ -34,16 +34,16 @@
3434
</div>
3535

3636

37-
<app-example-n01></app-example-n01>
38-
<app-example-n02></app-example-n02>
39-
<app-example-n03></app-example-n03>
40-
<app-example-n04></app-example-n04>
41-
<app-example-n05></app-example-n05>
42-
<app-example-n06></app-example-n06>
43-
<app-example-n07></app-example-n07>
44-
<app-example-n08></app-example-n08>
37+
<app-example-n01 />
38+
<app-example-n02 />
39+
<app-example-n03 />
40+
<app-example-n04 />
41+
<app-example-n05 />
42+
<app-example-n06 />
43+
<app-example-n07 />
44+
<app-example-n08 />
4545

46-
<app-documentation></app-documentation>
46+
<app-documentation />
4747

4848
<div class="copyright">
4949
Code licensed under an MIT License<br>

‎projects/demo/src/app/app.component.ts

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,31 @@ import { Component, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
22
import { Angulartics2GoogleAnalytics } from 'angulartics2';
33
import packageJson from '../../../ngx-red-zoom/package.json';
44
import { render } from 'github-buttons';
5+
import { ExampleN01Component } from './example-n01/example-n01.component';
6+
import { ExampleN02Component } from './example-n02/example-n02.component';
7+
import { ExampleN03Component } from './example-n03/example-n03.component';
8+
import { ExampleN04Component } from './example-n04/example-n04.component';
9+
import { ExampleN05Component } from './example-n05/example-n05.component';
10+
import { ExampleN06Component } from './example-n06/example-n06.component';
11+
import { ExampleN07Component } from './example-n07/example-n07.component';
12+
import { ExampleN08Component } from './example-n08/example-n08.component';
13+
import { DocumentationComponent } from './documentation/documentation.component';
514

615
@Component({
716
selector: 'app-root',
817
templateUrl: './app.component.html',
918
styleUrls: ['./app.component.scss'],
10-
standalone: false
19+
imports: [
20+
ExampleN01Component,
21+
ExampleN02Component,
22+
ExampleN03Component,
23+
ExampleN04Component,
24+
ExampleN05Component,
25+
ExampleN06Component,
26+
ExampleN07Component,
27+
ExampleN08Component,
28+
DocumentationComponent
29+
]
1130
})
1231
export class AppComponent implements OnInit {
1332
@ViewChild('buttons', {read: ViewContainerRef, static: true}) buttons?: ViewContainerRef;

‎projects/demo/src/app/app.config.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { ApplicationConfig } from '@angular/core';
2+
import { provideRouter } from '@angular/router';
3+
import { provideNoopAnimations } from '@angular/platform-browser/animations';
4+
import { importProvidersFrom } from '@angular/core';
5+
import { Angulartics2Module } from 'angulartics2';
6+
import { CarouselModule } from 'ngx-owl-carousel-o';
7+
import { RedZoomModule } from 'ngx-red-zoom';
8+
9+
export const appConfig: ApplicationConfig = {
10+
providers: [
11+
provideRouter([]),
12+
provideNoopAnimations(),
13+
importProvidersFrom(
14+
Angulartics2Module.forRoot(),
15+
CarouselModule,
16+
RedZoomModule
17+
)
18+
]
19+
};

‎projects/demo/src/app/app.module.ts

Lines changed: 0 additions & 48 deletions
This file was deleted.

‎projects/demo/src/app/code/code.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
<ng-template #template><ng-content></ng-content></ng-template>
2-
<pre><code #element></code></pre>
2+
<pre><code #element ></code></pre>

‎projects/demo/src/app/code/code.component.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ import hljs from 'highlight.js';
44
@Component({
55
selector: 'app-code',
66
templateUrl: './code.component.html',
7-
styleUrls: ['./code.component.scss'],
8-
standalone: false
7+
styleUrls: ['./code.component.scss']
98
})
109
export class CodeComponent implements AfterViewChecked {
1110
@Input() language!: string;

‎projects/demo/src/app/documentation/documentation.component.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@ import { Component, HostBinding } from '@angular/core';
33
@Component({
44
selector: 'app-documentation',
55
templateUrl: './documentation.component.html',
6-
styleUrls: ['./documentation.component.scss'],
7-
standalone: false
6+
styleUrls: ['./documentation.component.scss']
87
})
98
export class DocumentationComponent {
109
@HostBinding('class.section') classSection = true;

‎projects/demo/src/app/example-n01/example-n01.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="example__body">
22
<div class="example__image">
3-
<img src="./assets/image-1.jpg" alt="" width="320" redZoom="./assets/image-1-full.jpg" redZoomClass="red-zoom--style--window" [redZoomLazy]="true" class="zoom">
3+
<img src="./assets/image-1.jpg" alt="" width="320" redZoom="./assets/image-1-full.jpg" redZoomClass="red-zoom--style--window" [redZoomLazy]="true" class="zoom" />
44
</div>
55
<div class="example__content">
66
<div class="typography">

‎projects/demo/src/app/example-n01/example-n01.component.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
import { Component, HostBinding } from '@angular/core';
2+
import { RedZoomDirective } from 'ngx-red-zoom';
3+
import { CodeComponent } from '../code/code.component';
24

35
@Component({
46
selector: 'app-example-n01',
57
templateUrl: './example-n01.component.html',
68
styleUrls: ['./example-n01.component.scss'],
7-
standalone: false
9+
imports: [
10+
RedZoomDirective,
11+
CodeComponent
12+
],
13+
preserveWhitespaces: true
814
})
915
export class ExampleN01Component {
1016
@HostBinding('class.example') classExample = true;

‎projects/demo/src/app/example-n02/example-n02.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="example__body">
22
<div class="example__image">
3-
<img src="./assets/image-2.jpg" alt="" width="320" redZoom="./assets/image-2-full.jpg" redZoomClass="red-zoom--style--window red-zoom--mode--{{ mode.value }}" [redZoomLazy]="false" class="zoom">
3+
<img src="./assets/image-2.jpg" alt="" width="320" redZoom="./assets/image-2-full.jpg" redZoomClass="red-zoom--style--window red-zoom--mode--{{ mode.value }}" [redZoomLazy]="false" class="zoom" />
44
</div>
55
<div class="example__content">
66
<div class="typography">

‎projects/demo/src/app/example-n02/example-n02.component.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import { Component, HostBinding, ViewEncapsulation } from '@angular/core';
2-
import { UntypedFormControl } from '@angular/forms';
2+
import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
3+
import { RedZoomDirective } from 'ngx-red-zoom';
34

45
@Component({
56
selector: 'app-example-n02',
67
templateUrl: './example-n02.component.html',
78
styleUrls: ['./example-n02.component.scss'],
89
encapsulation: ViewEncapsulation.None,
9-
standalone: false
10+
imports: [
11+
ReactiveFormsModule,
12+
RedZoomDirective
13+
]
1014
})
1115
export class ExampleN02Component {
1216
@HostBinding('class.example') classExample = true;

‎projects/demo/src/app/example-n03/example-n03.component.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
import { Component, HostBinding } from '@angular/core';
2-
import { UntypedFormControl } from '@angular/forms';
2+
import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
3+
import { CodeComponent } from '../code/code.component';
4+
import { RedZoomDirective } from 'ngx-red-zoom';
35

46
@Component({
57
selector: 'app-example-n03',
68
templateUrl: './example-n03.component.html',
79
styleUrls: ['./example-n03.component.scss'],
8-
standalone: false
10+
imports: [
11+
ReactiveFormsModule,
12+
CodeComponent,
13+
RedZoomDirective
14+
]
915
})
1016
export class ExampleN03Component {
1117
@HostBinding('class.example') classExample = true;

‎projects/demo/src/app/example-n04/example-n04.component.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
import { Component, HostBinding } from '@angular/core';
2-
import { UntypedFormControl } from '@angular/forms';
2+
import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
3+
import { CodeComponent } from '../code/code.component';
4+
import { RedZoomDirective } from 'ngx-red-zoom';
35

46
@Component({
57
selector: 'app-example-n04',
68
templateUrl: './example-n04.component.html',
79
styleUrls: ['./example-n04.component.scss'],
8-
standalone: false
10+
imports: [
11+
ReactiveFormsModule,
12+
CodeComponent,
13+
RedZoomDirective
14+
]
915
})
1016
export class ExampleN04Component {
1117
@HostBinding('class.example') classExample = true;

‎projects/demo/src/app/example-n05/example-n05.component.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
import { Component, HostBinding } from '@angular/core';
2-
import { UntypedFormControl } from '@angular/forms';
2+
import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
3+
import { CodeComponent } from '../code/code.component';
4+
import { RedZoomDirective } from 'ngx-red-zoom';
35

46
@Component({
57
selector: 'app-example-n05',
68
templateUrl: './example-n05.component.html',
79
styleUrls: ['./example-n05.component.scss'],
8-
standalone: false
10+
imports: [
11+
ReactiveFormsModule,
12+
CodeComponent,
13+
RedZoomDirective
14+
]
915
})
1016
export class ExampleN05Component {
1117
@HostBinding('class.example') classExample = true;

‎projects/demo/src/app/example-n06/example-n06.component.ts

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
11
import { Component, HostBinding } from '@angular/core';
2-
import { UntypedFormControl } from '@angular/forms';
2+
import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
3+
import { NgFor } from '@angular/common';
4+
import { CodeComponent } from '../code/code.component';
5+
import { RedZoomDirective } from 'ngx-red-zoom';
36

47
@Component({
58
selector: 'app-example-n06',
69
templateUrl: './example-n06.component.html',
710
styleUrls: ['./example-n06.component.scss'],
8-
standalone: false
11+
imports: [
12+
ReactiveFormsModule,
13+
NgFor,
14+
CodeComponent,
15+
RedZoomDirective
16+
]
917
})
1018
export class ExampleN06Component {
1119
@HostBinding('class.example') classExample = true;

‎projects/demo/src/app/example-n07/example-n07.component.ts

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
11
import { ChangeDetectorRef, Component, HostBinding, ViewChild } from '@angular/core';
2+
import { NgFor } from '@angular/common';
23
import { RedZoomDirective } from 'ngx-red-zoom';
3-
import { SlidesOutputData } from 'ngx-owl-carousel-o';
4+
import { CarouselModule, SlidesOutputData } from 'ngx-owl-carousel-o';
5+
import { CodeComponent } from '../code/code.component';
46

57
@Component({
68
selector: 'app-example-n07',
79
templateUrl: './example-n07.component.html',
810
styleUrls: ['./example-n07.component.scss'],
9-
standalone: false
11+
imports: [
12+
NgFor,
13+
RedZoomDirective,
14+
CarouselModule,
15+
CodeComponent
16+
]
1017
})
1118
export class ExampleN07Component {
1219
@HostBinding('class.example') classExample = true;

‎projects/demo/src/app/example-n08/example-n08.component.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import { Component, HostBinding } from '@angular/core';
2+
import { CodeComponent } from '../code/code.component';
23

34
@Component({
45
selector: 'app-example-n08',
56
templateUrl: './example-n08.component.html',
67
styleUrls: ['./example-n08.component.scss'],
7-
standalone: false
8+
imports: [
9+
CodeComponent
10+
]
811
})
912
export class ExampleN08Component {
1013
@HostBinding('class.example') classExample = true;

‎projects/demo/src/main.ts

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
1+
import { bootstrapApplication } from '@angular/platform-browser';
2+
import { AppComponent } from './app/app.component';
3+
import { appConfig } from './app/app.config';
24

3-
import { AppModule } from './app/app.module';
4-
5-
6-
platformBrowserDynamic().bootstrapModule(AppModule)
7-
.catch(err => console.error(err));
5+
bootstrapApplication(AppComponent, appConfig)
6+
.catch(err => console.error(err));

‎projects/ngx-red-zoom/src/lib/red-zoom.directive.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,7 @@ interface Session {
3333
@Directive({
3434
// eslint-disable-next-line @angular-eslint/directive-selector
3535
selector: '[redZoom]',
36-
exportAs: 'redZoom',
37-
standalone: false
36+
exportAs: 'redZoom'
3837
})
3938
export class RedZoomDirective implements AfterContentInit, OnChanges, OnDestroy {
4039
/* eslint-disable @angular-eslint/no-input-rename */

‎projects/ngx-red-zoom/src/lib/red-zoom.module.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { RedZoomDirective } from './red-zoom.directive';
33

44

55
@NgModule({
6-
declarations: [
6+
imports: [
77
RedZoomDirective
88
],
99
exports: [

0 commit comments

Comments
 (0)