Migración Angular 18

ogWebconsole/package.json

@@ -10,24 +10,24 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.0.0",
+    "@angular/animations": "^18.0.0",
     "@angular/cdk": "~17.3.9",
-    "@angular/common": "^17.0.0",
+    "@angular/common": "^18.0.0",
-    "@angular/compiler": "^17.0.0",
+    "@angular/compiler": "^18.0.0",
-    "@angular/core": "^17.0.0",
+    "@angular/core": "^18.0.0",
-    "@angular/forms": "^17.0.0",
+    "@angular/forms": "^18.0.0",
     "@angular/material": "~17.3.9",
-    "@angular/platform-browser": "^17.0.0",
+    "@angular/platform-browser": "^18.0.0",
-    "@angular/platform-browser-dynamic": "^17.0.0",
+    "@angular/platform-browser-dynamic": "^18.0.0",
-    "@angular/router": "^17.0.0",
+    "@angular/router": "^18.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.7",
+    "@angular-devkit/build-angular": "^18.0.1",
-    "@angular/cli": "^17.0.7",
+    "@angular/cli": "^18.0.1",
-    "@angular/compiler-cli": "^17.0.0",
+    "@angular/compiler-cli": "^18.0.0",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
@@ -35,6 +35,6 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.2.2"
+    "typescript": "~5.4.5"
   }
 }

ogWebconsole/src/app/app.module.ts

@@ -8,7 +8,7 @@ import { HeaderComponent } from './components/layout/header/header.component';
 import { SidebarComponent } from './components/layout/sidebar/sidebar.component';
 import { LoginComponent } from './components/login/login.component';
 import { FormsModule } from '@angular/forms';
-import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { CustomInterceptor } from './services/custom.interceptor';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import {MatToolbarModule} from '@angular/material/toolbar'; 
@@ -18,19 +18,7 @@ import { MatSidenavModule } from '@angular/material/sidenav';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { UsersComponent } from './components/pages/users/users.component';
 
-@NgModule({
+@NgModule({ declarations: [
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    FormsModule,
-    HttpClientModule,
-    MatToolbarModule,
-    MatIconModule,
-    MatButtonModule,
-    MatSidenavModule,
-    BrowserAnimationsModule
-  ],
-  declarations: [
         AppComponent,
         AuthLayoutComponent,
         MainLayoutComponent,
@@ -40,16 +28,21 @@ import { UsersComponent } from './components/pages/users/users.component';
         UsersComponent,
         MainLayoutComponent,
         UsersComponent,
-    
     ],
-  providers: [
+    bootstrap: [AppComponent], imports: [BrowserModule,
+        AppRoutingModule,
+        FormsModule,
+        MatToolbarModule,
+        MatIconModule,
+        MatButtonModule,
+        MatSidenavModule,
+        BrowserAnimationsModule], providers: [
         {
             provide: HTTP_INTERCEPTORS,
             useClass: CustomInterceptor,
-      multi:true
+            multi: true
         },
-    provideAnimationsAsync()
+        provideAnimationsAsync(),
-  ],
+        provideHttpClient(withInterceptorsFromDi())
-  bootstrap: [AppComponent]
+    ] })
-})
 export class AppModule { }

ogWebconsole/src/app/components/layout/auth-layout/auth-layout.component.ts

@@ -1,4 +1,4 @@
-import { HttpClientModule } from '@angular/common/http';
+import {} from '@angular/common/http';
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { FormsModule } from '@angular/forms';

ogWebconsole/src/app/components/login/login.component.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { LoginComponent } from './login.component';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { FormsModule } from '@angular/forms';
 
 describe('LoginComponent', () => {
@@ -10,9 +10,10 @@ describe('LoginComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [HttpClientModule, FormsModule],
+    declarations: [LoginComponent],
-      declarations: [LoginComponent]
+    imports: [FormsModule],
-    })
+    providers: [provideHttpClient(withInterceptorsFromDi())]
+})
     .compileComponents();
     
     fixture = TestBed.createComponent(LoginComponent);