feat: convert to standalone (#1200)

Author: crisbeto

scenes/src/app/app-routing.module.ts renamed to scenes/src/app/app-routes.ts

@@ -1,6 +1,4 @@
 import {ComponentType} from '@angular/cdk/overlay';
-import {NgModule} from '@angular/core';
-import {RouterModule} from '@angular/router';
 import {SceneViewer} from './scene-viewer/scene-viewer';
 import {AutocompleteScene} from './scenes/autocomplete/autocomplete-scene';
 import {BadgeScene} from './scenes/badge/badge-scene';
@@ -51,7 +49,7 @@ type SceneViewerRoute = {
   }
 };
 
-const routes: SceneViewerRoute[] = [
+export const routes: SceneViewerRoute[] = [
   {path: 'autocomplete', component: SceneViewer, data: {scene: AutocompleteScene}},
   {path: 'badge', component: SceneViewer, data: {scale: 1.5, scene: BadgeScene}},
   {path: 'bottom-sheet', component: SceneViewer, data: {scene: BottomSheetScene}},
@@ -94,10 +92,3 @@ const routes: SceneViewerRoute[] = [
   {path: 'tree', component: SceneViewer, data: {scene: TreeScene}},
 ].sort((a, b) => (a.path > b.path) ? 1 : ((b.path > a.path) ? -1 : 0))
   .map((route: SceneViewerRoute) => ({...route, data: {...route.data, hueRotate: 15 * hue++}}));
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
-})
-export class AppRoutingModule {
-}

scenes/src/app/app.component.spec.ts

@@ -1,16 +1,11 @@
-import { TestBed, waitForAsync } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { AppComponent } from './app.component';
+import {TestBed, waitForAsync} from '@angular/core/testing';
+import {RouterTestingModule} from '@angular/router/testing';
+import {AppComponent} from './app.component';
 
 describe('AppComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
-      ],
+      imports: [RouterTestingModule, AppComponent],
     }).compileComponents();
   }));
 

scenes/src/app/app.component.ts

@@ -1,8 +1,11 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
+import {RouterOutlet} from '@angular/router';
 
 @Component({
   selector: 'app-root',
   template: '<router-outlet></router-outlet>',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [RouterOutlet]
 })
 export class AppComponent { }

scenes/src/app/app.module.ts

@@ -3,13 +3,11 @@ import {
   ComponentFactoryResolver,
   HostBinding,
   Input,
-  NgModule,
   OnInit,
   ViewChild,
   ViewContainerRef,
   ViewEncapsulation
 } from '@angular/core';
-import {CommonModule} from '@angular/common';
 import {ActivatedRoute} from '@angular/router';
 import {DomSanitizer, SafeStyle} from '@angular/platform-browser';
 
@@ -18,6 +16,7 @@ import {DomSanitizer, SafeStyle} from '@angular/platform-browser';
   selector: 'app-scene-viewer',
   templateUrl: './scene-viewer.html',
   styleUrls: ['./scene-viewer.scss'],
+  standalone: true,
 })
 export class SceneViewer implements OnInit {
   @HostBinding('style.filter') filter: SafeStyle | undefined;
@@ -64,13 +63,3 @@ export class SceneViewer implements OnInit {
     container.style.transformOrigin = 'center';
   }
 }
-
-@NgModule({
-  imports: [
-    CommonModule,
-  ],
-  exports: [SceneViewer],
-  declarations: [SceneViewer]
-})
-export class SceneViewerModule {
-}

scenes/src/app/scene-viewer/scene-viewer.ts

@@ -1,22 +1,29 @@
 import {
   AfterViewInit,
   Component,
-  NgModule,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInput, MatInputModule} from '@angular/material/input';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
-import {CommonModule, } from '@angular/common';
-import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {NgFor} from '@angular/common';
 
 
 @Component({
   encapsulation: ViewEncapsulation.None,
   selector: 'app-autocomplete-scene',
   templateUrl: './autocomplete-scene.html',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    FormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatAutocompleteModule,
+    NgFor,
+  ],
 })
 export class AutocompleteScene implements AfterViewInit {
   myControl = new FormControl('');
@@ -29,18 +36,3 @@ export class AutocompleteScene implements AfterViewInit {
   }
 }
 
-@NgModule({
-  imports: [
-    MatFormFieldModule,
-    MatInputModule,
-    ReactiveFormsModule,
-    MatAutocompleteModule,
-    CommonModule,
-    FormsModule,
-    NoopAnimationsModule
-  ],
-  exports: [AutocompleteScene],
-  declarations: [AutocompleteScene],
-})
-export class AutocompleteSceneModule {}
-

scenes/src/app/scenes/autocomplete/autocomplete-scene.ts

@@ -1,23 +1,13 @@
-import {Component, NgModule, ViewEncapsulation} from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
 import {MatBadgeModule} from '@angular/material/badge';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
   selector: 'app-badge-scene',
   templateUrl: './badge-scene.html',
-  styleUrls: ['./badge-scene.scss']
+  styleUrls: ['./badge-scene.scss'],
+  standalone: true,
+  imports: [MatIconModule, MatBadgeModule]
 })
-export class BadgeScene {
-}
-
-@NgModule({
-  imports: [
-    MatIconModule,
-    MatBadgeModule
-  ],
-  exports: [BadgeScene],
-  declarations: [BadgeScene]
-})
-export class BadgeSceneModule {}
-
+export class BadgeScene {}

scenes/src/app/scenes/badge/badge-scene.ts

@@ -1,5 +1,5 @@
-import {AfterViewInit, Component, NgModule, ViewEncapsulation} from '@angular/core';
-import {MatBottomSheet, MatBottomSheetModule} from '@angular/material/bottom-sheet';
+import {AfterViewInit, Component, ViewEncapsulation} from '@angular/core';
+import {MatBottomSheet} from '@angular/material/bottom-sheet';
 import {MatIconModule} from '@angular/material/icon';
 import {MatListModule} from '@angular/material/list';
 
@@ -9,6 +9,7 @@ import {MatListModule} from '@angular/material/list';
   template: '',
   styleUrls: ['./bottom-sheet-scene.scss'],
   encapsulation: ViewEncapsulation.None,
+  standalone: true,
 })
 export class BottomSheetScene implements AfterViewInit {
   constructor(private _bottomSheet: MatBottomSheet) {}
@@ -22,19 +23,8 @@ export class BottomSheetScene implements AfterViewInit {
   encapsulation: ViewEncapsulation.None,
   selector: 'app-bottom-sheet-scene',
   templateUrl: './bottom-sheet-scene.html',
-  styleUrls: ['./bottom-sheet-scene.scss']
+  styleUrls: ['./bottom-sheet-scene.scss'],
+  standalone: true,
+  imports: [MatListModule, MatIconModule]
 })
 export class SampleBottomSheet {}
-
-@NgModule({
-  imports: [
-    MatBottomSheetModule,
-    MatIconModule,
-    MatListModule,
-  ],
-  exports: [BottomSheetScene, SampleBottomSheet],
-  declarations: [BottomSheetScene, SampleBottomSheet],
-})
-export class BottomSheetSceneModule {
-}
-

scenes/src/app/scenes/bottom-sheet/bottom-sheet-scene.ts

@@ -1,21 +1,12 @@
-import {Component, NgModule, ViewEncapsulation} from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {MatIconModule} from '@angular/material/icon';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
   selector: 'app-button-toggle-scene',
   templateUrl: './button-toggle-scene.html',
+  standalone: true,
+  imports: [MatButtonToggleModule, MatIconModule],
 })
 export class ButtonToggleScene {}
-
-@NgModule({
-  imports: [
-    MatButtonToggleModule,
-    MatIconModule,
-  ],
-  exports: [ButtonToggleScene],
-  declarations: [ButtonToggleScene]
-})
-export class InputSceneModule {}
-

scenes/src/app/scenes/button-toggle/button-toggle-scene.ts

@@ -1,24 +1,14 @@
-import {Component, NgModule, ViewEncapsulation} from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
   selector: 'app-button-scene',
   templateUrl: './button-scene.html',
-  styleUrls: ['./button-scene.scss']
+  styleUrls: ['./button-scene.scss'],
+  standalone: true,
+  imports: [MatButtonModule, MatIconModule]
 })
 export class ButtonScene {
 }
-
-@NgModule({
-  imports: [
-    MatButtonModule,
-    MatIconModule,
-  ],
-  exports: [ButtonScene],
-  declarations: [ButtonScene]
-})
-export class ButtonSceneModule {
-}
-

scenes/src/app/scenes/button/button-scene.ts

@@ -1,17 +1,12 @@
-import {Component, NgModule} from '@angular/core';
+import {Component} from '@angular/core';
 import {MatCardModule} from '@angular/material/card';
-import {InputSceneModule} from '../placeholder/placeholder-scene';
+
 
 @Component({
   selector: 'app-card-scene',
   templateUrl: './card-scene.html',
   styleUrls: ['./card-scene.scss'],
+  standalone: true,
+  imports: [MatCardModule],
 })
 export class CardScene {}
-
-@NgModule({
-  imports: [MatCardModule, InputSceneModule],
-  exports: [CardScene],
-  declarations: [CardScene],
-})
-export class CardSceneModule {}

scenes/src/app/scenes/card/card-scene.ts

@@ -1,22 +1,12 @@
-import {Component, NgModule, ViewEncapsulation} from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
   selector: 'app-checkbox-scene',
   templateUrl: './checkbox-scene.html',
-  styleUrls: ['./checkbox-scene.scss']
+  styleUrls: ['./checkbox-scene.scss'],
+  standalone: true,
+  imports: [MatCheckboxModule]
 })
-export class CheckboxScene {
-}
-
-@NgModule({
-  imports: [
-    MatCheckboxModule,
-  ],
-  exports: [CheckboxScene],
-  declarations: [CheckboxScene]
-})
-export class CheckboxSceneModule {
-}
-
+export class CheckboxScene {}