refactor: migrate to standalone components, provideRouter/provideServiceWorker, loadComponent lazy routes (feature: standalone)

Co-Authored-By: Eddie Mattout <eddie.mattout@cognition.ai>

Author: devin-ai-integration[bot]

src/app/app.component.ts

@@ -1,15 +1,19 @@
 import { Component } from '@angular/core';
-import { Router, NavigationEnd } from '@angular/router';
+import { Router, NavigationEnd, RouterOutlet } from '@angular/router';
 
 import { SettingsService } from './shared/services/settings.service';
 import { Settings } from './shared/models/settings';
+import { HeaderComponent } from './core/header/header.component';
+import { FooterComponent } from './core/footer/footer.component';
 
 declare let ga: (...args: unknown[]) => void;
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss'],
+    standalone: true,
+    imports: [RouterOutlet, HeaderComponent, FooterComponent]
 })
 
 export class AppComponent {

src/app/app.module.ts

@@ -1,13 +1,13 @@
-import { Routes, RouterModule } from '@angular/router';
+import { Routes } from '@angular/router';
 
 import { FeedComponent } from './feeds/feed/feed.component';
 
-const feedRoutes = [{
+const feedRoutes: Routes = [{
   path: ':page',
   component: FeedComponent
 }];
 
-const routes: Routes = [
+export const routes: Routes = [
   {path: '', redirectTo: 'news/1', pathMatch: 'full'},
   {
     path: 'news',
@@ -34,10 +34,12 @@ const routes: Routes = [
     children: feedRoutes,
     data: {feedType: 'jobs'}
   },
-  {path: 'item', loadChildren: () => import('./item-details/item-details.module').then(m => m.ItemDetailsModule)},
-  {path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule)}
+  {
+    path: 'item/:id',
+    loadComponent: () => import('./item-details/item-details.component').then(m => m.ItemDetailsComponent)
+  },
+  {
+    path: 'user/:id',
+    loadComponent: () => import('./user/user.component').then(m => m.UserComponent)
+  }
 ];
-
-
-// - Updated Export
-export const routing = RouterModule.forRoot(routes, {});

src/app/app.routes.ts

@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-footer',
-  templateUrl: './footer.component.html',
-  styleUrls: ['./footer.component.scss']
+    selector: 'app-footer',
+    templateUrl: './footer.component.html',
+    styleUrls: ['./footer.component.scss'],
+    standalone: true
 })
 export class FooterComponent {
 

src/app/core/core.module.ts

@@ -2,11 +2,16 @@ import { Component } from '@angular/core';
 
 import { SettingsService } from '../../shared/services/settings.service';
 import { Settings } from '../../shared/models/settings';
+import { SettingsComponent } from '../settings/settings.component';
+import { NgIf } from '@angular/common';
+import { RouterLink, RouterLinkActive } from '@angular/router';
 
 @Component({
-  selector: 'app-header',
-  templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss']
+    selector: 'app-header',
+    templateUrl: './header.component.html',
+    styleUrls: ['./header.component.scss'],
+    standalone: true,
+    imports: [RouterLink, RouterLinkActive, NgIf, SettingsComponent]
 })
 export class HeaderComponent {
   settings: Settings;

src/app/core/footer/footer.component.ts

@@ -4,9 +4,10 @@ import { SettingsService } from '../../shared/services/settings.service';
 import { Settings } from '../../shared/models/settings';
 
 @Component({
-  selector: 'app-settings',
-  templateUrl: './settings.component.html',
-  styleUrls: ['./settings.component.scss']
+    selector: 'app-settings',
+    templateUrl: './settings.component.html',
+    styleUrls: ['./settings.component.scss'],
+    standalone: true
 })
 export class SettingsComponent {
   settings: Settings;

src/app/core/header/header.component.ts

@@ -1,14 +1,20 @@
 import { Component, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, RouterLinkActive, RouterLink } from '@angular/router';
 
 import { HackerNewsAPIService } from '../../shared/services/hackernews-api.service';
 import { Story } from '../../shared/models/story';
+import { ItemComponent } from '../item/item.component';
+import { ErrorMessageComponent } from '../../shared/components/error-message/error-message.component';
+import { LoaderComponent } from '../../shared/components/loader/loader.component';
+import { NgIf, NgFor } from '@angular/common';
 
 @Component({
-  selector: 'app-feed',
-  templateUrl: './feed.component.html',
-  styleUrls: ['./feed.component.scss']
+    selector: 'app-feed',
+    templateUrl: './feed.component.html',
+    styleUrls: ['./feed.component.scss'],
+    standalone: true,
+    imports: [NgIf, LoaderComponent, ErrorMessageComponent, NgFor, ItemComponent, RouterLinkActive, RouterLink]
 })
 
 export class FeedComponent implements OnInit {

src/app/core/settings/settings.component.ts

@@ -3,11 +3,16 @@ import { Story } from '../../shared/models/story';
 
 import { SettingsService } from '../../shared/services/settings.service';
 import { Settings } from '../../shared/models/settings';
+import { CommentPipe } from '../../shared/pipes/comment.pipe';
+import { RouterLinkActive, RouterLink } from '@angular/router';
+import { NgStyle, NgIf } from '@angular/common';
 
 @Component({
-  selector: 'app-item',
-  templateUrl: './item.component.html',
-  styleUrls: ['./item.component.scss']
+    selector: 'app-item',
+    templateUrl: './item.component.html',
+    styleUrls: ['./item.component.scss'],
+    standalone: true,
+    imports: [NgStyle, NgIf, RouterLinkActive, RouterLink, CommentPipe]
 })
 export class ItemComponent {
   @Input() item: Story;

src/app/feeds/feed/feed.component.ts

@@ -1,11 +1,15 @@
 import { Component, Input, OnInit } from '@angular/core';
 
 import { Comment } from '../../shared/models/comment';
+import { RouterLinkActive, RouterLink } from '@angular/router';
+import { NgIf, NgFor } from '@angular/common';
 
 @Component({
-  selector: 'app-comment',
-  templateUrl: './comment.component.html',
-  styleUrls: ['./comment.component.scss']
+    selector: 'app-comment',
+    templateUrl: './comment.component.html',
+    styleUrls: ['./comment.component.scss'],
+    standalone: true,
+    imports: [NgIf, RouterLinkActive, RouterLink, NgFor]
 })
 export class CommentComponent implements OnInit {
   @Input() comment: Comment;