Migrate to standalone components

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 },

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();

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 {

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');
 }

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;

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 {
 

src/app/components/editor/editor.component.html

@@ -31,8 +31,9 @@
   <div>
     <button type="button" (click)="saveToFile()">Sauvegarder</button>
   </div>
-
-  <div *ngIf="errorMessage">
-    <p style="color: red">{{ errorMessage }}</p>
-  </div>
+  @if (errorMessage) {
+    <div>
+      <p style="color: red">{{ errorMessage }}</p>
+    </div>
+  }
 </div>

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();

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é

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();

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';

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();

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;

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();

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';

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();

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;

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) { }

src/app/components/output/output.component.html

@@ -1 +0,0 @@
-<p>output works!</p>

src/app/components/output/output.component.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { OutputComponent } from './output.component';
-
-describe('OutputComponent', () => {
-  let component: OutputComponent;
-  let fixture: ComponentFixture<OutputComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [OutputComponent]
-    });
-    fixture = TestBed.createComponent(OutputComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/components/output/output.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-output',
-  templateUrl: './output.component.html',
-  styleUrls: ['./output.component.scss']
-})
-export class OutputComponent {
-
-}

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) { }

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) { }

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();
-  });
+  }));
 });

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 {
 

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);