From e4fa38e9cecd2ab63a6715310894536eaaf05537 Mon Sep 17 00:00:00 2001 From: clfreville2 Date: Tue, 30 Jan 2024 19:52:50 +0100 Subject: [PATCH] Migrate to standalone components --- src/app/app-routing.module.ts | 2 - src/app/app.component.spec.ts | 11 +-- src/app/app.component.ts | 8 ++- src/app/app.module.ts | 71 +------------------ .../documentation.component.spec.ts | 2 +- .../documentation/documentation.component.ts | 3 +- .../components/editor/editor.component.html | 9 +-- .../editor/editor.component.spec.ts | 4 +- src/app/components/editor/editor.component.ts | 15 +++- .../footer/footer.component.spec.ts | 4 +- src/app/components/footer/footer.component.ts | 6 +- .../components/form/form.component.spec.ts | 4 +- src/app/components/form/form.component.ts | 6 +- .../header/header.component.spec.ts | 4 +- src/app/components/header/header.component.ts | 8 ++- .../landing-page.component.spec.ts | 4 +- .../landing-page/landing-page.component.ts | 6 +- .../our-story/our-story.component.ts | 3 +- .../components/output/output.component.html | 1 - .../components/output/output.component.scss | 0 .../output/output.component.spec.ts | 21 ------ src/app/components/output/output.component.ts | 10 --- .../privacy-policy.component.ts | 5 +- .../terms-of-service.component.ts | 5 +- src/app/safe-html.pipe.spec.ts | 8 ++- src/app/safe-html.pipe.ts | 1 + src/main.ts | 29 ++++++-- 27 files changed, 102 insertions(+), 148 deletions(-) delete mode 100644 src/app/components/output/output.component.html delete mode 100644 src/app/components/output/output.component.scss delete mode 100644 src/app/components/output/output.component.spec.ts delete mode 100644 src/app/components/output/output.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 5b499c4..084ff87 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -2,7 +2,6 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { EditorComponent } from './components/editor/editor.component'; import { LandingPageComponent } from './components/landing-page/landing-page.component'; -import { OutputComponent } from './components/output/output.component'; import { DocumentationComponent } from "./components/documentation/documentation.component"; import { FormComponent } from "./components/form/form.component"; import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component'; @@ -13,7 +12,6 @@ import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-poli const routes: Routes = [ { path: '', component: LandingPageComponent }, { path: 'editor', component: EditorComponent }, - { path: 'output', component: OutputComponent }, { path: 'documentation', component: DocumentationComponent }, { path: 'contact', component: FormComponent }, { path: 'our-story', component: OurStoryComponent }, diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index d3e5fe5..efe18c6 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -4,9 +4,8 @@ import { AppComponent } from './app.component'; describe('AppComponent', () => { beforeEach(() => TestBed.configureTestingModule({ - imports: [RouterTestingModule], - declarations: [AppComponent] - })); + imports: [RouterTestingModule, AppComponent] +})); it('should create the app', () => { const fixture = TestBed.createComponent(AppComponent); @@ -14,12 +13,6 @@ describe('AppComponent', () => { expect(app).toBeTruthy(); }); - it(`should have as title 'sandkasten'`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('sandkasten'); - }); - it('should render title', () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index b3bc364..acbba9c 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,9 +1,15 @@ import { Component, OnInit } from '@angular/core'; import { ThemeService } from './services/theme.service'; +import { FooterComponent } from './components/footer/footer.component'; +import { RouterOutlet } from '@angular/router'; +import { HeaderComponent } from './components/header/header.component'; +import { NgClass } from '@angular/common'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'] + styleUrls: ['./app.component.scss'], + standalone: true, + imports: [NgClass, HeaderComponent, RouterOutlet, FooterComponent] }) export class AppComponent implements OnInit { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4542326..a18381b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,73 +1,6 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; -import { HeaderComponent } from './components/header/header.component'; -import { FooterComponent } from './components/footer/footer.component'; -import { EditorComponent } from './components/editor/editor.component'; -import { OutputComponent } from './components/output/output.component'; -import { LandingPageComponent } from './components/landing-page/landing-page.component'; -import { DocumentationComponent } from './components/documentation/documentation.component'; -import { FormComponent } from './components/form/form.component'; -import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component'; -import { OurStoryComponent } from './components/our-story/our-story.component'; -import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component'; - -import { ReactiveFormsModule } from '@angular/forms'; - -import { FormsModule } from '@angular/forms'; -import { CodeMirrorComponent } from '@sandkasten/codemirror6-editor'; - -import { HttpClient, HttpClientModule } from '@angular/common/http'; -import { TranslateLoader, TranslateModule } from '@ngx-translate/core'; +import { HttpClient } from '@angular/common/http'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; -import { TranslationService } from './services/translation.service'; -import { SafeHTMLPipe } from './safe-html.pipe'; - -@NgModule({ - declarations: [ - AppComponent, - HeaderComponent, - FooterComponent, - EditorComponent, - OutputComponent, - LandingPageComponent, - DocumentationComponent, - FormComponent, - PrivacyPolicyComponent, - TermsOfServiceComponent, - OurStoryComponent, - SafeHTMLPipe - ], - imports: [ - BrowserModule, - AppRoutingModule, - ReactiveFormsModule, - FormsModule, - // Injection des HttpClient pour notre module de traduction - HttpClientModule, - // Initialisation du module de traduction - TranslateModule.forRoot({ - // Manière dont on charge les fichiers de traduction - loader: { - provide: TranslateLoader, - // On utiilise une fonction pour charger les fichiers de traduction - useFactory: (createTranslateLoader), - // deps permets de savoir ce dont on a besoin pour charger les fichiers de traduction - deps: [HttpClient] - }, - defaultLanguage: 'fr' - }), - CodeMirrorComponent - ], - providers: [TranslationService], - bootstrap: [AppComponent] -}) -export class AppModule { } - -// On crée une fonction pour charger les fichiers de traduction export function createTranslateLoader(http: HttpClient) { - return new TranslateHttpLoader(http, './assets/i18n/', '.json'); // On charge les fichiers de traduction depuis le dossier assets/i18n + return new TranslateHttpLoader(http, './assets/i18n/', '.json'); } diff --git a/src/app/components/documentation/documentation.component.spec.ts b/src/app/components/documentation/documentation.component.spec.ts index b283923..972bf79 100644 --- a/src/app/components/documentation/documentation.component.spec.ts +++ b/src/app/components/documentation/documentation.component.spec.ts @@ -8,7 +8,7 @@ describe('DocumentationComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [DocumentationComponent] + imports: [DocumentationComponent] }); fixture = TestBed.createComponent(DocumentationComponent); component = fixture.componentInstance; diff --git a/src/app/components/documentation/documentation.component.ts b/src/app/components/documentation/documentation.component.ts index af87d03..81da4a5 100644 --- a/src/app/components/documentation/documentation.component.ts +++ b/src/app/components/documentation/documentation.component.ts @@ -3,7 +3,8 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-documentation', templateUrl: './documentation.component.html', - styleUrls: ['./documentation.component.scss'] + styleUrls: ['./documentation.component.scss'], + standalone: true }) export class DocumentationComponent { diff --git a/src/app/components/editor/editor.component.html b/src/app/components/editor/editor.component.html index fda73ff..d778c89 100644 --- a/src/app/components/editor/editor.component.html +++ b/src/app/components/editor/editor.component.html @@ -31,8 +31,9 @@
- -
-

{{ errorMessage }}

-
+ @if (errorMessage) { +
+

{{ errorMessage }}

+
+ } diff --git a/src/app/components/editor/editor.component.spec.ts b/src/app/components/editor/editor.component.spec.ts index 430658f..5b51c37 100644 --- a/src/app/components/editor/editor.component.spec.ts +++ b/src/app/components/editor/editor.component.spec.ts @@ -8,8 +8,8 @@ describe('EditorComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [EditorComponent] - }); + imports: [EditorComponent] +}); fixture = TestBed.createComponent(EditorComponent); component = fixture.componentInstance; fixture.detectChanges(); diff --git a/src/app/components/editor/editor.component.ts b/src/app/components/editor/editor.component.ts index 66d0a55..8c8d586 100644 --- a/src/app/components/editor/editor.component.ts +++ b/src/app/components/editor/editor.component.ts @@ -5,11 +5,20 @@ import { Compartment, Extension } from '@codemirror/state'; import { CodeMirrorComponent } from '@sandkasten/codemirror6-editor'; import { LanguageDescription } from '@codemirror/language'; import { CODE_DEFAULTS, LANGUAGES } from '../languages'; +import { SafeHTMLPipe } from '../../safe-html.pipe'; +import { ReactiveFormsModule, FormsModule } from '@angular/forms'; @Component({ - selector: "app-editor", - templateUrl: "./editor.component.html", - styleUrls: ["./editor.component.scss"], + selector: "app-editor", + templateUrl: "./editor.component.html", + styleUrls: ["./editor.component.scss"], + standalone: true, + imports: [ + CodeMirrorComponent, + ReactiveFormsModule, + FormsModule, + SafeHTMLPipe, + ], }) export class EditorComponent { isLoaded: boolean = false; // Pour vérifier si le chargement est terminé diff --git a/src/app/components/footer/footer.component.spec.ts b/src/app/components/footer/footer.component.spec.ts index 832b03a..b15283a 100644 --- a/src/app/components/footer/footer.component.spec.ts +++ b/src/app/components/footer/footer.component.spec.ts @@ -8,8 +8,8 @@ describe('FooterComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [FooterComponent] - }); + imports: [FooterComponent] +}); fixture = TestBed.createComponent(FooterComponent); component = fixture.componentInstance; fixture.detectChanges(); diff --git a/src/app/components/footer/footer.component.ts b/src/app/components/footer/footer.component.ts index 91e3d30..0617666 100644 --- a/src/app/components/footer/footer.component.ts +++ b/src/app/components/footer/footer.component.ts @@ -1,9 +1,13 @@ import { Component, OnInit } from '@angular/core'; +import { TranslateModule } from '@ngx-translate/core'; +import { RouterLink, RouterLinkActive } from '@angular/router'; @Component({ selector: 'app-footer', templateUrl: './footer.component.html', - styleUrls: ['./footer.component.scss'] + styleUrls: ['./footer.component.scss'], + standalone: true, + imports: [RouterLink, RouterLinkActive, TranslateModule] }) export class FooterComponent { sandkasten_logo: string = 'assets/img/logo.png'; diff --git a/src/app/components/form/form.component.spec.ts b/src/app/components/form/form.component.spec.ts index b709581..59337fe 100644 --- a/src/app/components/form/form.component.spec.ts +++ b/src/app/components/form/form.component.spec.ts @@ -8,8 +8,8 @@ describe('FormComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [FormComponent] - }); + imports: [FormComponent] +}); fixture = TestBed.createComponent(FormComponent); component = fixture.componentInstance; fixture.detectChanges(); diff --git a/src/app/components/form/form.component.ts b/src/app/components/form/form.component.ts index f2bf5e9..e38edac 100644 --- a/src/app/components/form/form.component.ts +++ b/src/app/components/form/form.component.ts @@ -1,12 +1,14 @@ import { Component } from '@angular/core'; -import { FormBuilder, FormGroup } from '@angular/forms'; +import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms'; import emailjs from '@emailjs/browser'; @Component({ selector: 'app-form', templateUrl: './form.component.html', - styleUrls: ['./form.component.scss'] + styleUrls: ['./form.component.scss'], + standalone: true, + imports: [ReactiveFormsModule] }) export class FormComponent { form: FormGroup; diff --git a/src/app/components/header/header.component.spec.ts b/src/app/components/header/header.component.spec.ts index f8d8ed5..99d6e98 100644 --- a/src/app/components/header/header.component.spec.ts +++ b/src/app/components/header/header.component.spec.ts @@ -8,8 +8,8 @@ describe('HeaderComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [HeaderComponent] - }); + imports: [HeaderComponent] +}); fixture = TestBed.createComponent(HeaderComponent); component = fixture.componentInstance; fixture.detectChanges(); diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts index 06ebad8..571000e 100644 --- a/src/app/components/header/header.component.ts +++ b/src/app/components/header/header.component.ts @@ -1,11 +1,17 @@ import {Component, ElementRef, HostListener, Input, OnInit, ViewChild} from '@angular/core'; import {TranslationService} from '../../services/translation.service'; import {ThemeService} from "../../services/theme.service"; +import { TranslateModule } from '@ngx-translate/core'; +import { ReactiveFormsModule } from '@angular/forms'; +import { RouterLink, RouterLinkActive } from '@angular/router'; +import { NgClass } from '@angular/common'; @Component({ selector: 'app-header', templateUrl: './header.component.html', - styleUrls: ['./header.component.scss'] + styleUrls: ['./header.component.scss'], + standalone: true, + imports: [NgClass, RouterLink, RouterLinkActive, ReactiveFormsModule, TranslateModule] }) export class HeaderComponent { title: string = 'Sandkasten'; diff --git a/src/app/components/landing-page/landing-page.component.spec.ts b/src/app/components/landing-page/landing-page.component.spec.ts index 5b7ad0b..c528a48 100644 --- a/src/app/components/landing-page/landing-page.component.spec.ts +++ b/src/app/components/landing-page/landing-page.component.spec.ts @@ -8,8 +8,8 @@ describe('LandingPageComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [LandingPageComponent] - }); + imports: [LandingPageComponent] +}); fixture = TestBed.createComponent(LandingPageComponent); component = fixture.componentInstance; fixture.detectChanges(); diff --git a/src/app/components/landing-page/landing-page.component.ts b/src/app/components/landing-page/landing-page.component.ts index 2f22f03..e1589e8 100644 --- a/src/app/components/landing-page/landing-page.component.ts +++ b/src/app/components/landing-page/landing-page.component.ts @@ -1,11 +1,15 @@ import {Component, OnInit} from '@angular/core'; import { Router } from '@angular/router'; import {ThemeService} from "../../services/theme.service"; +import { TranslateModule } from '@ngx-translate/core'; +import { NgClass } from '@angular/common'; @Component({ selector: 'app-landing-page', templateUrl: './landing-page.component.html', - styleUrls: ['./landing-page.component.scss'] + styleUrls: ['./landing-page.component.scss'], + standalone: true, + imports: [NgClass, TranslateModule] }) export class LandingPageComponent implements OnInit { themeClass!: string; diff --git a/src/app/components/our-story/our-story.component.ts b/src/app/components/our-story/our-story.component.ts index 98069a5..c1a26fb 100644 --- a/src/app/components/our-story/our-story.component.ts +++ b/src/app/components/our-story/our-story.component.ts @@ -4,7 +4,8 @@ import { Router } from '@angular/router'; @Component({ selector: 'app-our-story', templateUrl: './our-story.component.html', - styleUrl: './our-story.component.scss' + styleUrl: './our-story.component.scss', + standalone: true }) export class OurStoryComponent { constructor(private router: Router) { } diff --git a/src/app/components/output/output.component.html b/src/app/components/output/output.component.html deleted file mode 100644 index 3021571..0000000 --- a/src/app/components/output/output.component.html +++ /dev/null @@ -1 +0,0 @@ -

output works!

diff --git a/src/app/components/output/output.component.scss b/src/app/components/output/output.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/components/output/output.component.spec.ts b/src/app/components/output/output.component.spec.ts deleted file mode 100644 index 3a05fbe..0000000 --- a/src/app/components/output/output.component.spec.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { OutputComponent } from './output.component'; - -describe('OutputComponent', () => { - let component: OutputComponent; - let fixture: ComponentFixture; - - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [OutputComponent] - }); - fixture = TestBed.createComponent(OutputComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/output/output.component.ts b/src/app/components/output/output.component.ts deleted file mode 100644 index 8638d83..0000000 --- a/src/app/components/output/output.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-output', - templateUrl: './output.component.html', - styleUrls: ['./output.component.scss'] -}) -export class OutputComponent { - -} diff --git a/src/app/components/privacy-policy/privacy-policy.component.ts b/src/app/components/privacy-policy/privacy-policy.component.ts index b9a177a..1f71568 100644 --- a/src/app/components/privacy-policy/privacy-policy.component.ts +++ b/src/app/components/privacy-policy/privacy-policy.component.ts @@ -1,11 +1,14 @@ import { Component } from '@angular/core'; import { Router } from '@angular/router'; +import { TranslateModule } from '@ngx-translate/core'; @Component({ selector: 'app-privacy-policy', templateUrl: './privacy-policy.component.html', - styleUrl: './privacy-policy.component.scss' + styleUrl: './privacy-policy.component.scss', + standalone: true, + imports: [TranslateModule] }) export class PrivacyPolicyComponent { constructor(private router: Router) { } diff --git a/src/app/components/terms-of-service/terms-of-service.component.ts b/src/app/components/terms-of-service/terms-of-service.component.ts index ba0a8eb..aa2c0dc 100644 --- a/src/app/components/terms-of-service/terms-of-service.component.ts +++ b/src/app/components/terms-of-service/terms-of-service.component.ts @@ -1,11 +1,14 @@ import { Component } from '@angular/core'; import { Router } from '@angular/router'; +import { TranslateModule } from '@ngx-translate/core'; @Component({ selector: 'app-terms-of-service', templateUrl: './terms-of-service.component.html', - styleUrl: './terms-of-service.component.scss' + styleUrl: './terms-of-service.component.scss', + standalone: true, + imports: [TranslateModule] }) export class TermsOfServiceComponent { constructor(private router: Router) { } diff --git a/src/app/safe-html.pipe.spec.ts b/src/app/safe-html.pipe.spec.ts index 400afdd..e055843 100644 --- a/src/app/safe-html.pipe.spec.ts +++ b/src/app/safe-html.pipe.spec.ts @@ -1,8 +1,10 @@ import { SafeHTMLPipe } from './safe-html.pipe'; +import { inject } from '@angular/core/testing'; +import { DomSanitizer } from '@angular/platform-browser'; describe('SafeHTMLPipe', () => { - it('create an instance', () => { - const pipe = new SafeHTMLPipe(); + it('create an instance', inject([DomSanitizer], (domSanitizer: DomSanitizer) => { + const pipe = new SafeHTMLPipe(domSanitizer); expect(pipe).toBeTruthy(); - }); + })); }); diff --git a/src/app/safe-html.pipe.ts b/src/app/safe-html.pipe.ts index 963ebbd..c3a70c6 100644 --- a/src/app/safe-html.pipe.ts +++ b/src/app/safe-html.pipe.ts @@ -3,6 +3,7 @@ import { DomSanitizer } from '@angular/platform-browser'; @Pipe({ name: 'safeHTML', + standalone: true, }) export class SafeHTMLPipe implements PipeTransform { diff --git a/src/main.ts b/src/main.ts index 0a62114..a9df0e6 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,6 +1,25 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { createTranslateLoader } from './app/app.module'; +import { importProvidersFrom } from '@angular/core'; +import { AppComponent } from './app/app.component'; +import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; +import { withInterceptorsFromDi, provideHttpClient, HttpClient } from '@angular/common/http'; +import { ReactiveFormsModule, FormsModule } from '@angular/forms'; +import { AppRoutingModule } from './app/app-routing.module'; +import { BrowserModule, bootstrapApplication } from '@angular/platform-browser'; +import { TranslationService } from './app/services/translation.service'; -import { AppModule } from './app/app.module'; - -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +bootstrapApplication(AppComponent, { + providers: [ + importProvidersFrom(BrowserModule, AppRoutingModule, ReactiveFormsModule, FormsModule, + TranslateModule.forRoot({ + loader: { + provide: TranslateLoader, + useFactory: (createTranslateLoader), + deps: [HttpClient] + }, + defaultLanguage: 'fr' + })), + TranslationService, + provideHttpClient(withInterceptorsFromDi()) + ] +}).catch(console.error);