+ Your all-in-one real-world Angular starter — built for learning, productivity, and scaling.
+
+ Crafted with ❤️ to showcase real best practices in action: standalone components, signals, routing, i18n, authentication and more.
+
+ 🔥 Live Demo
+
+ 
+
 Tom Gamull 🚇 |
+  mansyaprime 💻 |
+  codeimmortal 💻 |
+  tomasfse 💻 |
+  golu 💻 |
+  rancyr 💻 |
+  codingphasedotcom 💻 |
+
 Max 💻 |
+  Karajan 💻 |
+  Carl Chan 💻 |
+  Dyeimys Franco Correa 💻 |
+  Anartz Mugika Ledo 💻 |
+  OrlPep 💻 |
+
{{'mayTheForce' | translate}}
-
\ No newline at end of file
diff --git a/src/app/core/error404/error-404.component.scss b/src/app/core/error404/error-404.component.scss
deleted file mode 100755
index 4f14b84e..00000000
--- a/src/app/core/error404/error-404.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-img {
- margin: 0 auto;
- display: block;
-}
-
-.explanation {
- margin: 1em 0;
- text-align: center;
- font-size: 1.2em;
- font-weight: 300;
-}
\ No newline at end of file
diff --git a/src/app/core/error404/error-404.component.spec.ts b/src/app/core/error404/error-404.component.spec.ts
deleted file mode 100755
index 522fd43c..00000000
--- a/src/app/core/error404/error-404.component.spec.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import {async, TestBed} from '@angular/core/testing';
-import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
-import {TranslateModule} from '@ngx-translate/core';
-import {APP_CONFIG, AppConfig} from '../../config/app.config';
-import {HeroService} from '../../heroes/shared/hero.service';
-import {MaterialModule} from '../../shared/modules/material.module';
-import {ProgressBarService} from '../progress-bar.service';
-import {TestsModule} from '../../shared/modules/tests.module';
-import {Error404Component} from './error-404.component';
-
-describe('Error404Component', () => {
- let fixture;
- let component;
- let progressBarService;
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- imports: [
- TestsModule,
- TranslateModule.forRoot(),
- MaterialModule
- ],
- declarations: [
- Error404Component
- ],
- providers: [
- {provide: APP_CONFIG, useValue: AppConfig},
- HeroService,
- ProgressBarService
- ],
- schemas: [CUSTOM_ELEMENTS_SCHEMA]
- }).compileComponents();
-
- fixture = TestBed.createComponent(Error404Component);
- fixture.detectChanges();
- component = fixture.debugElement.componentInstance;
- progressBarService = TestBed.get(ProgressBarService);
- }));
-
- it('should create nav component', (() => {
- expect(component).toBeTruthy();
- }));
-});
diff --git a/src/app/core/error404/error-404.component.ts b/src/app/core/error404/error-404.component.ts
deleted file mode 100644
index 846679e4..00000000
--- a/src/app/core/error404/error-404.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
- selector: 'app-error-404',
- templateUrl: './error-404.component.html',
- styleUrls: ['./error-404.component.scss']
-})
-
-export class Error404Component {
- constructor() {
- }
-}
diff --git a/src/app/core/footer/footer.component.html b/src/app/core/footer/footer.component.html
deleted file mode 100644
index 0a4ca3b0..00000000
--- a/src/app/core/footer/footer.component.html
+++ /dev/null
@@ -1,11 +0,0 @@
-
diff --git a/src/app/core/footer/footer.component.scss b/src/app/core/footer/footer.component.scss
deleted file mode 100755
index e9866077..00000000
--- a/src/app/core/footer/footer.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-footer {
- padding: 8px 16px;
- color: white;
- background: #3f51b5;
- margin-top: 2em;
- position: sticky;
- top: 100%;
-
- img {
- width: 25%;
- }
-}
-
-.footer-xs {
- text-align: center;
- padding-top: 1em;
-}
diff --git a/src/app/core/footer/footer.component.spec.ts b/src/app/core/footer/footer.component.spec.ts
deleted file mode 100755
index 1513a990..00000000
--- a/src/app/core/footer/footer.component.spec.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import {async, TestBed} from '@angular/core/testing';
-import {FooterComponent} from './footer.component';
-import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
-import {TranslateModule} from '@ngx-translate/core';
-
-describe('FooterComponent', () => {
- let fixture;
- let component;
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- imports: [
- TranslateModule.forRoot()
- ],
- declarations: [
- FooterComponent
- ],
- schemas: [CUSTOM_ELEMENTS_SCHEMA]
- }).compileComponents();
-
- fixture = TestBed.createComponent(FooterComponent);
- fixture.detectChanges();
- component = fixture.debugElement.componentInstance;
- }));
-
- it('should create footer component', (() => {
- expect(component).toBeTruthy();
- }));
-});
diff --git a/src/app/core/footer/footer.component.ts b/src/app/core/footer/footer.component.ts
deleted file mode 100644
index d1efb5ab..00000000
--- a/src/app/core/footer/footer.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
- selector: 'app-footer',
- templateUrl: './footer.component.html',
- styleUrls: ['./footer.component.scss']
-})
-
-export class FooterComponent {
-}
diff --git a/src/app/core/guards/authentication.guard.ts b/src/app/core/guards/authentication.guard.ts
new file mode 100755
index 00000000..1c21e637
--- /dev/null
+++ b/src/app/core/guards/authentication.guard.ts
@@ -0,0 +1,16 @@
+import { inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { AUTH_URLS } from '~core/constants/urls.constants';
+import { AuthenticationService } from '~features/authentication/services/authentication.service';
+
+export function authenticationGuard(): boolean {
+ const authenticationService = inject(AuthenticationService);
+ const router = inject(Router);
+
+ if (authenticationService.authState().isLoggedIn) {
+ return true;
+ }
+
+ void router.navigate([AUTH_URLS.logIn]);
+ return false;
+}
diff --git a/src/app/core/guards/no-authentication.guard.ts b/src/app/core/guards/no-authentication.guard.ts
new file mode 100644
index 00000000..178fb560
--- /dev/null
+++ b/src/app/core/guards/no-authentication.guard.ts
@@ -0,0 +1,16 @@
+import { inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthenticationService } from '~features/authentication/services/authentication.service';
+import { ROOT_PATHS } from '~core/constants/paths.constants';
+
+export function noAuthenticationGuard(): boolean {
+ const authenticationService = inject(AuthenticationService);
+ const router = inject(Router);
+
+ if (authenticationService.authState().isLoggedIn) {
+ void router.navigate([ROOT_PATHS.home]);
+ return false;
+ }
+
+ return true;
+}
diff --git a/src/app/core/interceptors/authentication.interceptor.ts b/src/app/core/interceptors/authentication.interceptor.ts
new file mode 100644
index 00000000..142bdf24
--- /dev/null
+++ b/src/app/core/interceptors/authentication.interceptor.ts
@@ -0,0 +1,187 @@
+import type {
+ HttpErrorResponse,
+ HttpEvent,
+ HttpHandlerFn,
+ HttpRequest,
+} from '@angular/common/http';
+import type { Observable } from 'rxjs';
+import { BehaviorSubject, throwError } from 'rxjs';
+import { catchError, filter, switchMap, take } from 'rxjs/operators';
+import { inject } from '@angular/core';
+import { Router } from '@angular/router';
+import {
+ ACCESS_TOKEN_KEY,
+ AuthenticationService,
+} from '~features/authentication/services/authentication.service';
+import { AppError } from '~core/enums/app-error.enum';
+import { AUTH_URLS } from '~core/constants/urls.constants';
+import { LOCAL_STORAGE } from '~core/providers/local-storage';
+import { translations } from '../../../locale/translations';
+import { AlertService } from '~core/services/ui/alert.service';
+
+const isRefreshing = new BehaviorSubject+ This project is a modern, real-world application designed as a foundation for creating new + Angular-based projects and also a practical resource for learning. +
+ ++ It comes with features like internationalization, standalone components, a more logical folder + structure, etc, making it a great starting point for building scalable Angular apps. +
+ ++ Whether you’re looking for a boilerplate or a solid base project, this setup is designed to help + you create clean, maintainable code with ease. +
+ ++ This project leverages the PokeAPI to provide fun and practical examples, making it + easier to understand key concepts in Angular development. By using data from the Pokémon + universe, it offers a familiar and engaging way to showcase features like fetching data, + handling API calls, and displaying dynamic content. +
+ +Unlock reactivity with Angular Signals.
++ Signals provide a declarative way to manage state and reactivity in your application, + simplifying data flow and improving performance. +
+Build apps for a global audience.
++ Angular’s internationalization tools make it seamless to localize your app, handle + translations, and format dates, numbers, and currencies for any locale. +
+Effortless form handling and validation.
++ Reactive Forms empower you to create robust, dynamic forms with a model-driven approach, + making validation, dynamic updates, and testing a breeze. +
+Bring your UI to life with Angular Animations.
++ Create smooth transitions and engaging effects with Angular’s powerful animation API, + making your application visually appealing and interactive. +
+Users seeing this page: {{ activeUsersResource.value().activeUsers }}
+Loading...
+{{pokemon()?.name | firstTitleCase}}
+N.º: {{pokemon()?.order}}
+Height: {{pokemon()?.height}} dm
+Weight: {{pokemon()?.weight}} hg
+ } ++ 🎯 Nice catch, {{user?.name}}! You’re one step closer to being a Pokémon Master—keep it + up! 🌟 +
+ } @else if (userHasPokemon()) { +Already got this one, keep going!
+ } @else { +Still gotta catch 'em all, this one's missing from your Pokédex!
+N.º: {{pokemon()?.order}}
+Height: {{pokemon()?.height}} dm
+Weight: {{pokemon()?.weight}} hg
++ Uh-oh, it looks like you haven’t caught any Pokémon yet! Need help finding a pokemon? + Try using the search bar to track them down. Gotta catch ‘em all! +
+
- 
- 
- - {{hero.alterEgo}} -
-
-