refactor: Migrated the project to standalone -- step 1

ng generate @angular/core:standalone
? Choose the type of migration: Convert all components, directives and pipes to standalone
? Which path in your project should be migrated? ./

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b2b66d61892e8ac55200f8f44b9c9783219a1104..22f37b8f3de6ac3e02e55f26ebeffdfecc22244a 100644 (file)
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -11,18 +11,18 @@ import { ChatroomComponent } from './chatroom/chatroom.component';
 
 @NgModule({
   declarations: [
-    AppComponent,
-    ChatroomsComponent,
-    UserComponent,
-    ChatroomComponent
+    AppComponent
   ],
   imports: [
     BrowserModule,
     ReactiveFormsModule,
     HttpClientModule,
-    AppRoutingModule
+    AppRoutingModule,
+    ChatroomsComponent,
+    UserComponent,
+    ChatroomComponent
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
 export class AppModule { }

diff --git a/src/app/chatroom/chatroom.component.spec.ts b/src/app/chatroom/chatroom.component.spec.ts
index ded23f2e2747d0792dd280adc67e1d2d8acc04d5..843c227364de5a03ff5c26ff4719e23de30a08cd 100644 (file)
--- a/src/app/chatroom/chatroom.component.spec.ts
+++ b/src/app/chatroom/chatroom.component.spec.ts
@@ -10,10 +10,10 @@ describe('ChatroomComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
+        ChatroomComponent,
         HttpClientTestingModule,
         RouterTestingModule,
       ],
-      declarations: [ ChatroomComponent ]
     })
     .compileComponents();
 

diff --git a/src/app/chatroom/chatroom.component.ts b/src/app/chatroom/chatroom.component.ts
index ea8b103278a985d67cf30e63e3b8dc79e057c71a..f47776c5a3ae27027987bc366da0a59aaa674aa8 100644 (file)
--- a/src/app/chatroom/chatroom.component.ts
+++ b/src/app/chatroom/chatroom.component.ts
@@ -4,11 +4,14 @@ import { ChatroomService } from './chatroom.service';
 import { UserService } from '../user/user.service';
 import { Chatroom } from './chatroom';
 import { Message } from './message';
+import { NgFor } from '@angular/common';
 
 @Component({
   selector: 'app-chatroom',
   templateUrl: './chatroom.component.html',
-  styleUrls: ['./chatroom.component.less']
+  styleUrls: ['./chatroom.component.less'],
+  standalone: true,
+  imports: [NgFor],
 })
 export class ChatroomComponent implements OnInit, OnDestroy {
 

diff --git a/src/app/chatrooms/chatrooms.component.spec.ts b/src/app/chatrooms/chatrooms.component.spec.ts
index 2b795cf36791da3f9602c850703e3e15f8b804c0..da84c0e6a14fb58f72649700b1c018b890b460f0 100644 (file)
--- a/src/app/chatrooms/chatrooms.component.spec.ts
+++ b/src/app/chatrooms/chatrooms.component.spec.ts
@@ -8,8 +8,10 @@ describe('ChatroomsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ HttpClientTestingModule ],
-      declarations: [ ChatroomsComponent ]
+      imports: [
+        HttpClientTestingModule,
+        ChatroomsComponent,
+      ],
     })
     .compileComponents();
 

diff --git a/src/app/chatrooms/chatrooms.component.ts b/src/app/chatrooms/chatrooms.component.ts
index 57cc943c72a1dd22d5e8846d159209f8ca07e97d..328d7e24c87ef139e055327be6f368c37dfb9e65 100644 (file)
--- a/src/app/chatrooms/chatrooms.component.ts
+++ b/src/app/chatrooms/chatrooms.component.ts
@@ -2,11 +2,15 @@ import { Component, OnInit } from '@angular/core';
 import { Chatroom } from '../chatroom/chatroom';
 import { UserService } from "../user/user.service";
 import { ChatroomService } from "../chatroom/chatroom.service";
+import { RouterLink } from '@angular/router';
+import { NgFor } from '@angular/common';
 
 @Component({
   selector: 'app-chatrooms',
   templateUrl: './chatrooms.component.html',
-  styleUrls: ['./chatrooms.component.less']
+  styleUrls: ['./chatrooms.component.less'],
+  standalone: true,
+  imports: [NgFor, RouterLink],
 })
 export class ChatroomsComponent implements OnInit
 {

diff --git a/src/app/user/user.component.spec.ts b/src/app/user/user.component.spec.ts
index 5d815c058a1d36c99fd7d6899b0a805724bf90b6..722cddb50709770975193999602c188c0ac793d8 100644 (file)
--- a/src/app/user/user.component.spec.ts
+++ b/src/app/user/user.component.spec.ts
@@ -8,8 +8,10 @@ describe('UserComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ ReactiveFormsModule ],
-      declarations: [ UserComponent ]
+      imports: [
+        ReactiveFormsModule,
+        UserComponent,
+      ],
     })
     .compileComponents();
 

diff --git a/src/app/user/user.component.ts b/src/app/user/user.component.ts
index 4919f1cf697951cd695454f6531145619970aba5..3b0c9c948654bac57ea383a1f9d90205742be536 100644 (file)
--- a/src/app/user/user.component.ts
+++ b/src/app/user/user.component.ts
@@ -1,16 +1,20 @@
 import { Component } from '@angular/core';
 import {
   FormControl,
+  ReactiveFormsModule,
   Validators,
   ValidationErrors,
 } from '@angular/forms';
 import { Router } from "@angular/router";
 import { UserService } from "./user.service";
+import { NgIf } from '@angular/common';
 
 @Component({
   selector: 'app-user',
   templateUrl: './user.component.html',
-  styleUrls: ['./user.component.less']
+  styleUrls: ['./user.component.less'],
+  standalone: true,
+  imports: [ReactiveFormsModule, NgIf],
 })
 export class UserComponent {