Merge pull request '[ogGui] Pantalla de Inicio de Login' (#2) from oggui/routingStructure into main

ogWebconsole/.gitignore

@@ -1,4 +1,4 @@
-# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+# See http://help.github.com/ignore-files/ for more about ignoring files.
 
 # Compiled output
 /dist

ogWebconsole/README.md

@@ -1,6 +1,6 @@
 # OgWebconsole
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.7.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.7.
 
 ## Development server
 

ogWebconsole/angular.json

@@ -5,7 +5,17 @@
   "projects": {
     "ogWebconsole": {
       "projectType": "application",
-      "schematics": {},
+      "schematics": {
+        "@schematics/angular:component": {
+          "standalone": false
+        },
+        "@schematics/angular:directive": {
+          "standalone": false
+        },
+        "@schematics/angular:pipe": {
+          "standalone": false
+        }
+      },
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
@@ -27,12 +37,7 @@
             "styles": [
               "src/styles.css"
             ],
-            "scripts": [],
+            "scripts": []
-            "server": "src/main.server.ts",
-            "prerender": true,
-            "ssr": {
-              "entry": "server.ts"
-            }
           },
           "configurations": {
             "production": {

ogWebconsole/package.json

@@ -6,39 +6,33 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test",
+    "test": "ng test"
-    "serve:ssr:ogWebconsole": "node dist/og-webconsole/server/server.mjs"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.3.0",
+    "@angular/animations": "^17.0.0",
-    "@angular/common": "^17.3.0",
+    "@angular/common": "^17.0.0",
-    "@angular/compiler": "^17.3.0",
+    "@angular/compiler": "^17.0.0",
-    "@angular/core": "^17.3.0",
+    "@angular/core": "^17.0.0",
-    "@angular/forms": "^17.3.0",
+    "@angular/forms": "^17.0.0",
-    "@angular/platform-browser": "^17.3.0",
+    "@angular/platform-browser": "^17.0.0",
-    "@angular/platform-browser-dynamic": "^17.3.0",
+    "@angular/platform-browser-dynamic": "^17.0.0",
-    "@angular/platform-server": "^17.3.0",
+    "@angular/router": "^17.0.0",
-    "@angular/router": "^17.3.0",
-    "@angular/ssr": "^17.3.7",
-    "express": "^4.18.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.3"
+    "zone.js": "~0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.3.7",
+    "@angular-devkit/build-angular": "^17.0.7",
-    "@angular/cli": "^17.3.7",
+    "@angular/cli": "^17.0.7",
-    "@angular/compiler-cli": "^17.3.0",
+    "@angular/compiler-cli": "^17.0.0",
-    "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
-    "@types/node": "^18.18.0",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.4.2"
+    "typescript": "~5.2.2"
   }
-}
+}

ogWebconsole/server.ts

@@ -1,56 +0,0 @@
-import { APP_BASE_HREF } from '@angular/common';
-import { CommonEngine } from '@angular/ssr';
-import express from 'express';
-import { fileURLToPath } from 'node:url';
-import { dirname, join, resolve } from 'node:path';
-import bootstrap from './src/main.server';
-
-// The Express app is exported so that it can be used by serverless Functions.
-export function app(): express.Express {
-  const server = express();
-  const serverDistFolder = dirname(fileURLToPath(import.meta.url));
-  const browserDistFolder = resolve(serverDistFolder, '../browser');
-  const indexHtml = join(serverDistFolder, 'index.server.html');
-
-  const commonEngine = new CommonEngine();
-
-  server.set('view engine', 'html');
-  server.set('views', browserDistFolder);
-
-  // Example Express Rest API endpoints
-  // server.get('/api/**', (req, res) => { });
-  // Serve static files from /browser
-  server.get('*.*', express.static(browserDistFolder, {
-    maxAge: '1y'
-  }));
-
-  // All regular routes use the Angular engine
-  server.get('*', (req, res, next) => {
-    const { protocol, originalUrl, baseUrl, headers } = req;
-
-    commonEngine
-      .render({
-        bootstrap,
-        documentFilePath: indexHtml,
-        url: `${protocol}://${headers.host}${originalUrl}`,
-        publicPath: browserDistFolder,
-        providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
-      })
-      .then((html) => res.send(html))
-      .catch((err) => next(err));
-  });
-
-  return server;
-}
-
-function run(): void {
-  const port = process.env['PORT'] || 4000;
-
-  // Start up the Node server
-  const server = app();
-  server.listen(port, () => {
-    console.log(`Node Express server listening on http://localhost:${port}`);
-  });
-}
-
-run();

ogWebconsole/src/app/app-routing.module.ts

@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { MainLayoutComponent } from './components/layout/main-layout/main-layout.component';
+import { AuthLayoutComponent } from './components/layout/auth-layout/auth-layout.component';
+import { LoginComponent } from './components/login/login.component';
+import { DashboardComponent } from './components/dashboard/dashboard.component';
+import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: 'auth/login', pathMatch: 'full' },
+{
+  path: '',
+  component: MainLayoutComponent,
+  children: [
+    { path: 'dashboard', component: DashboardComponent },
+    // otras rutas que usan el MainLayoutComponent
+  ],
+},
+{
+  path: 'auth',
+  component: AuthLayoutComponent,
+  children: [
+    { path: 'login', component: LoginComponent },
+    // otras rutas de autenticación
+  ],
+},
+{ path: '**', component: PageNotFoundComponent },  
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

ogWebconsole/src/app/app.component.html

@@ -1,7 +1 @@
-<main class="main">
+<router-outlet />
-  <div class="content">
-    <h3>ogWebconsole base project is running!</h3>
-  </div>
-</main>
-
-<router-outlet />

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

@@ -1,10 +1,16 @@
 import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AppComponent],
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
     }).compileComponents();
   });
 
@@ -14,7 +20,7 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have the 'ogWebconsole' title`, () => {
+  it(`should have as title 'ogWebconsole'`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
     expect(app.title).toEqual('ogWebconsole');

ogWebconsole/src/app/app.component.ts

@@ -1,10 +1,7 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
-  standalone: true,
-  imports: [RouterOutlet],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })

ogWebconsole/src/app/app.config.server.ts

@@ -1,11 +0,0 @@
-import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
-import { provideServerRendering } from '@angular/platform-server';
-import { appConfig } from './app.config';
-
-const serverConfig: ApplicationConfig = {
-  providers: [
-    provideServerRendering()
-  ]
-};
-
-export const config = mergeApplicationConfig(appConfig, serverConfig);

ogWebconsole/src/app/app.config.ts

@@ -1,9 +0,0 @@
-import { ApplicationConfig } from '@angular/core';
-import { provideRouter } from '@angular/router';
-
-import { routes } from './app.routes';
-import { provideClientHydration } from '@angular/platform-browser';
-
-export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes), provideClientHydration()]
-};

ogWebconsole/src/app/app.module.ts

@@ -0,0 +1,39 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { AuthLayoutComponent } from './components/layout/auth-layout/auth-layout.component';
+import { MainLayoutComponent } from './components/layout/main-layout/main-layout.component';
+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 { CustomInterceptor } from './services/custom.interceptor';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    AuthLayoutComponent,
+    MainLayoutComponent,
+    HeaderComponent,
+    SidebarComponent,
+    LoginComponent,
+    MainLayoutComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    FormsModule,
+    HttpClientModule
+  ],
+  providers: [
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: CustomInterceptor,
+      multi:true
+    }
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

ogWebconsole/src/app/app.routes.ts

@@ -1,3 +0,0 @@
-import { Routes } from '@angular/router';
-
-export const routes: Routes = [];

ogWebconsole/src/app/components/dashboard/dashboard.component.html

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

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DashboardComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ogWebconsole/src/app/components/dashboard/dashboard.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrl: './dashboard.component.css'
+})
+export class DashboardComponent {
+
+}

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

@@ -0,0 +1,5 @@
+<div class="auth-wrapper">
+    <div class="auth-content">
+      <router-outlet></router-outlet>
+    </div>
+  </div>

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

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

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

@@ -0,0 +1,12 @@
+import { HttpClientModule } from '@angular/common/http';
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+@Component({
+  selector: 'app-auth-layout',
+  templateUrl: './auth-layout.component.html',
+  styleUrl: './auth-layout.component.css'
+})
+export class AuthLayoutComponent {
+
+}

ogWebconsole/src/app/components/layout/header/header.component.css

@@ -0,0 +1,5 @@
+:host{
+    display: block;
+    background-color: rgb(126, 126, 126);
+    grid-area: header;
+}

ogWebconsole/src/app/components/layout/header/header.component.html

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

ogWebconsole/src/app/components/layout/header/header.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HeaderComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ogWebconsole/src/app/components/layout/header/header.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrl: './header.component.css',
+})
+export class HeaderComponent {
+
+}

ogWebconsole/src/app/components/layout/main-layout/main-layout.component.css

@@ -0,0 +1,14 @@
+:host{
+    width: 100%;
+    display: grid;
+    grid-template-areas: 
+    "sidebar header"
+    "sidebar content"
+    "sidebar footer";
+    grid-template-columns: 120px 1fr;
+}
+.content-wrapper{
+    display: block;
+    background-color: gold;
+    grid-area: content;
+}

ogWebconsole/src/app/components/layout/main-layout/main-layout.component.html

@@ -0,0 +1,7 @@
+<app-sidebar></app-sidebar>
+<app-header>
+</app-header>
+<div class="content-wrapper">
+  <div class="content">
+    <router-outlet />
+  </div>

ogWebconsole/src/app/components/layout/main-layout/main-layout.component.spec.ts

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

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-main-layout',
+  templateUrl: './main-layout.component.html',
+  styleUrl: './main-layout.component.css'
+})
+export class MainLayoutComponent {
+
+}

ogWebconsole/src/app/components/layout/sidebar/sidebar.component.css

@@ -0,0 +1,5 @@
+:host{
+    display: block;
+    background-color: rgb(85, 85, 85);
+    grid-area: sidebar;
+}

ogWebconsole/src/app/components/layout/sidebar/sidebar.component.html

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

ogWebconsole/src/app/components/layout/sidebar/sidebar.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidebarComponent } from './sidebar.component';
+
+describe('SidebarComponent', () => {
+  let component: SidebarComponent;
+  let fixture: ComponentFixture<SidebarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SidebarComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(SidebarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ogWebconsole/src/app/components/layout/sidebar/sidebar.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-sidebar',
+  templateUrl: './sidebar.component.html',
+  styleUrl: './sidebar.component.css'
+})
+export class SidebarComponent {
+  hovered = false;
+}
+//https://medium.com/@yevhen.chmykhun.01/angular-blueprint-application-layout-b1680ca888e0

ogWebconsole/src/app/components/login/login.component.css

@@ -0,0 +1,66 @@
+.login {
+    overflow: hidden;
+    background-color: rgb(255, 255, 255);
+    border: 1px solid grey;
+    padding: 40px 30px 30px 30px;
+    border-radius: 10px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 400px;
+    transform: translate(-50%, -50%);
+    transition: transform 300ms, box-shadow 300ms;
+    box-shadow: 5px 10px 10px rgba(2, 128, 144, 0.2);
+}
+
+.login::before, .login::after {
+    content: "";
+    position: absolute;
+    width: 600px;
+    height: 600px;
+    border-top-left-radius: 40%;
+    border-top-right-radius: 45%;
+    border-bottom-left-radius: 35%;
+    border-bottom-right-radius: 40%;
+    z-index: -1;
+}
+
+.login input {
+    font-family: "Asap", sans-serif;
+    display: block;
+    border-radius: 5px;
+    font-size: 16px;
+    background: rgba(230, 230, 230);
+    width: 100%;
+    padding: 10px 10px;
+    margin: 15px -10px;
+}
+
+.login button {
+    font-family: "Asap", sans-serif;
+    cursor: pointer;
+    color: #fff;
+    font-size: 16px;
+    text-transform: uppercase;
+    width: 80px;
+    border: 0;
+    padding: 10px 0;
+    margin-top: 10px;
+    margin-left: -5px;
+    border-radius: 5px;
+    background-color: #0084ff;
+    transition: background-color 300ms;
+}
+
+.login button:hover {
+    background-color: #0271da;
+}
+
+.invalid {
+    border: 1px solid red;
+}
+
+.error-message {
+    color: red;
+    margin-top: 10px;
+}

ogWebconsole/src/app/components/login/login.component.html

@@ -0,0 +1,9 @@
+<div>
+    <form class="login" (ngSubmit)="onLogin()" #loginForm="ngForm">
+        <h2>Opengnsys</h2>
+        <input [(ngModel)]="loginObj.username" type="text" id="username" name="username" placeholder="usuario" required #usernameInput="ngModel" [ngClass]="{'invalid': !usernameInput.valid && usernameInput.touched}">
+        <input [(ngModel)]="loginObj.password" type="password" id="password" name="password" placeholder="contraseña" required #passwordInput="ngModel" [ngClass]="{'invalid': !passwordInput.valid && passwordInput.touched}">
+        <button type="submit">Login</button>
+        <div *ngIf="errorMessage" class="error-message">{{ errorMessage }}</div>
+    </form>
+</div>

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

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+import { HttpClientModule } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HttpClientModule, FormsModule],
+      declarations: [LoginComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,52 @@
+import { HttpClient } from '@angular/common/http';
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css'],
+})
+export class LoginComponent {
+    loginObj: any = {
+      "username": "",
+      "password": ""
+    };
+    errorMessage: string = '';
+
+    constructor(private http: HttpClient, private router: Router) { }
+    
+    onLogin() {
+        if (!this.loginObj.username || !this.loginObj.password) {
+            if (!this.loginObj.username) {
+                document.getElementById('username')?.classList.add('invalid');
+            } else {
+                document.getElementById('username')?.classList.remove('invalid');
+            }
+
+            if (!this.loginObj.password) {
+                document.getElementById('password')?.classList.add('invalid');
+            } else {
+                document.getElementById('password')?.classList.remove('invalid');
+            }
+            return;
+        }
+
+        this.http.post('http://127.0.0.1:8080/auth/login', this.loginObj).subscribe({
+            next: (res: any) => {
+                if (res.token) {
+                    localStorage.setItem('loginToken', res.token);
+                    localStorage.setItem('refreshToken', res.refreshToken);
+                    this.router.navigateByUrl('/dashboard');
+                }
+            },
+            error: (err) => {
+                if (err.status === 401) {
+                    this.errorMessage = 'Usuario o contraseña incorrectos';
+                } else {
+                    this.errorMessage = 'Ha ocurrido un error. Por favor, inténtelo de nuevo.';
+                }
+            }
+        });
+    }
+}

ogWebconsole/src/app/components/page-not-found/page-not-found.component.html

@@ -0,0 +1 @@
+<p>page-not-found works!</p>

ogWebconsole/src/app/components/page-not-found/page-not-found.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageNotFoundComponent } from './page-not-found.component';
+
+describe('PageNotFoundComponent', () => {
+  let component: PageNotFoundComponent;
+  let fixture: ComponentFixture<PageNotFoundComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PageNotFoundComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(PageNotFoundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ogWebconsole/src/app/components/page-not-found/page-not-found.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page-not-found',
+  templateUrl: './page-not-found.component.html',
+  styleUrl: './page-not-found.component.css'
+})
+export class PageNotFoundComponent {
+
+}

ogWebconsole/src/app/services/custom.interceptor.spec.ts

@@ -0,0 +1,8 @@
+import { TestBed } from '@angular/core/testing';
+import { HttpInterceptorFn } from '@angular/common/http';
+
+import { CustomInterceptor } from './custom.interceptor';
+
+describe('customInterceptor', () => {
+  
+});

ogWebconsole/src/app/services/custom.interceptor.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { HttpInterceptorFn, HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Token } from '@angular/compiler';
+
+export class CustomInterceptor implements HttpInterceptor{
+  constructor(){}
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    
+    const token = localStorage.getItem('loginToken');
+    const newCloneRequest = req.clone({
+      setHeaders:{
+        Authorization: `${token}`
+      }
+    })
+
+    return next.handle(newCloneRequest);
+  }
+}

ogWebconsole/src/main.server.ts

@@ -1,7 +0,0 @@
-import { bootstrapApplication } from '@angular/platform-browser';
-import { AppComponent } from './app/app.component';
-import { config } from './app/app.config.server';
-
-const bootstrap = () => bootstrapApplication(AppComponent, config);
-
-export default bootstrap;

ogWebconsole/src/main.ts

@@ -1,6 +1,7 @@
-import { bootstrapApplication } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { appConfig } from './app/app.config';
-import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent, appConfig)
+import { AppModule } from './app/app.module';
-  .catch((err) => console.error(err));
+
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

ogWebconsole/tsconfig.app.json

@@ -3,14 +3,10 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": [
+    "types": []
-      "node"
-    ]
   },
   "files": [
-    "src/main.ts",
+    "src/main.ts"
-    "src/main.server.ts",
-    "server.ts"
   ],
   "include": [
     "src/**/*.d.ts"

ogWebconsole/tsconfig.json

@@ -3,6 +3,7 @@
   "compileOnSave": false,
   "compilerOptions": {
     "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,