├── src
    ├── app
    │   ├── app.component.scss
    │   ├── app.component.html
    │   ├── products
    │   │   ├── data-access
    │   │   │   ├── product-store.service.ts
    │   │   │   └── products.service.ts
    │   │   ├── features
    │   │   │   ├── product-detail
    │   │   │   │   ├── product-detail.component.html
    │   │   │   │   ├── product-detail.component.ts
    │   │   │   │   └── product-detail.component.spec.ts
    │   │   │   ├── product-list
    │   │   │   │   ├── product-list.component.html
    │   │   │   │   ├── product-list.component.spec.ts
    │   │   │   │   └── product-list.component.ts
    │   │   │   └── product.routes.ts
    │   │   └── ui
    │   │   │   └── product-card
    │   │   │       └── product-card.component.ts
    │   ├── dashboard
    │   │   ├── dashboard.component.html
    │   │   ├── dashboard.component.ts
    │   │   └── dashboard.component.spec.ts
    │   ├── shared
    │   │   ├── ui
    │   │   │   ├── button
    │   │   │   │   ├── button.component.html
    │   │   │   │   ├── button.component.ts
    │   │   │   │   └── button.component.spec.ts
    │   │   │   └── layout
    │   │   │   │   ├── footer.component.ts
    │   │   │   │   ├── navbar.component.ts
    │   │   │   │   └── layout.component.ts
    │   │   └── data-access
    │   │   │   └── storage.service.ts
    │   ├── auth
    │   │   ├── features
    │   │   │   ├── log-in
    │   │   │   │   ├── log-in.component.html
    │   │   │   │   ├── log-in.component.ts
    │   │   │   │   └── log-in.component.spec.ts
    │   │   │   ├── sign-up
    │   │   │   │   ├── sign-up.component.html
    │   │   │   │   ├── sign-up.component.ts
    │   │   │   │   └── sign-up.component.spec.ts
    │   │   │   └── auth.routes.ts
    │   │   └── data-access
    │   │   │   └── auth.service.ts
    │   ├── core
    │   │   ├── data-access
    │   │   │   └── auth-state.service.ts
    │   │   ├── interceptors
    │   │   │   └── auth.interceptor.ts
    │   │   └── guards
    │   │   │   └── auth.guards.ts
    │   ├── app.component.ts
    │   ├── app.config.ts
    │   ├── app.routes.ts
    │   └── app.component.spec.ts
    ├── styles.scss
    ├── main.ts
    └── index.html
├── public
    └── favicon.ico
├── .vscode
    ├── extensions.json
    ├── launch.json
    └── tasks.json
├── tsconfig.app.json
├── tsconfig.spec.json
├── .editorconfig
├── .gitignore
├── tsconfig.json
├── README.md
├── package.json
└── angular.json


/src/app/app.component.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <router-outlet />
2 | 


--------------------------------------------------------------------------------
/src/app/products/data-access/product-store.service.ts:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/dashboard/dashboard.component.html:
--------------------------------------------------------------------------------
1 | <p>dashboard works!</p>
2 | 


--------------------------------------------------------------------------------
/src/app/shared/ui/button/button.component.html:
--------------------------------------------------------------------------------
1 | <p>button works!</p>
2 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjosue15/angular-scaffolding/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/app/auth/features/log-in/log-in.component.html:
--------------------------------------------------------------------------------
1 | <p>log-in works!</p>
2 | 
3 | <app-button />
4 | 


--------------------------------------------------------------------------------
/src/app/auth/features/sign-up/sign-up.component.html:
--------------------------------------------------------------------------------
1 | <p>sign-up works!</p>
2 | 
3 | <app-button />
4 | 


--------------------------------------------------------------------------------
/src/app/products/features/product-detail/product-detail.component.html:
--------------------------------------------------------------------------------
1 | <p>product-detail works!</p>
2 | 


--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3 |   "recommendations": ["angular.ng-template"]
4 | }
5 | 


--------------------------------------------------------------------------------
/src/app/auth/data-access/auth.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | 
3 | @Injectable({
4 |   providedIn: 'root',
5 | })
6 | export class AuthService {}
7 | 


--------------------------------------------------------------------------------
/src/app/core/data-access/auth-state.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | 
3 | @Injectable({
4 |   providedIn: 'root',
5 | })
6 | export class AuthStateService {}
7 | 


--------------------------------------------------------------------------------
/src/app/products/features/product-list/product-list.component.html:
--------------------------------------------------------------------------------
1 | @for(product of products(); track product) {
2 | <app-product-card [product]="product" (buy)="buy($event)" />
3 | }
4 | 


--------------------------------------------------------------------------------
/src/app/shared/data-access/storage.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | 
3 | @Injectable({
4 |   providedIn: 'root',
5 | })
6 | export class StorageService {}
7 | 


--------------------------------------------------------------------------------
/src/app/shared/ui/layout/footer.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | 
3 | @Component({
4 |   selector: 'app-footer',
5 |   standalone: true,
6 |   template: ` <p>footer</p> `,
7 | })
8 | export default class FooterComponent {}
9 | 


--------------------------------------------------------------------------------
/src/app/shared/ui/layout/navbar.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | 
3 | @Component({
4 |   selector: 'app-navbar',
5 |   standalone: true,
6 |   template: ` <p>navbar</p> `,
7 | })
8 | export default class NavbarComponent {}
9 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { bootstrapApplication } from '@angular/platform-browser';
2 | import { appConfig } from './app/app.config';
3 | import { AppComponent } from './app/app.component';
4 | 
5 | bootstrapApplication(AppComponent, appConfig)
6 |   .catch((err) => console.error(err));
7 | 


--------------------------------------------------------------------------------
/src/app/shared/ui/button/button.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-button',
 5 |   standalone: true,
 6 |   imports: [],
 7 |   templateUrl: './button.component.html',
 8 |   styles: ``,
 9 | })
10 | export class ButtonComponent {}
11 | 


--------------------------------------------------------------------------------
/src/app/dashboard/dashboard.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-dashboard',
 5 |   standalone: true,
 6 |   imports: [],
 7 |   templateUrl: './dashboard.component.html',
 8 |   styles: ``,
 9 | })
10 | export default class DashboardComponent {}
11 | 


--------------------------------------------------------------------------------
/src/app/core/interceptors/auth.interceptor.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   HttpHandlerFn,
 3 |   HttpInterceptorFn,
 4 |   HttpRequest,
 5 | } from '@angular/common/http';
 6 | 
 7 | export const authInterceptor: HttpInterceptorFn = (
 8 |   request: HttpRequest<any>,
 9 |   next: HttpHandlerFn
10 | ) => {
11 |   return next(request);
12 | };
13 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/app",
 6 |     "types": []
 7 |   },
 8 |   "files": [
 9 |     "src/main.ts"
10 |   ],
11 |   "include": [
12 |     "src/**/*.d.ts"
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/src/app/auth/features/auth.routes.ts:
--------------------------------------------------------------------------------
 1 | import { Routes } from '@angular/router';
 2 | 
 3 | export default [
 4 |   {
 5 |     path: 'log-in',
 6 |     loadComponent: () => import('./log-in/log-in.component'),
 7 |   },
 8 |   {
 9 |     path: 'sign-up',
10 |     loadComponent: () => import('./sign-up/sign-up.component'),
11 |   },
12 | ] as Routes;
13 | 


--------------------------------------------------------------------------------
/src/app/products/features/product-detail/product-detail.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-product-detail',
 5 |   standalone: true,
 6 |   imports: [],
 7 |   templateUrl: './product-detail.component.html',
 8 |   styles: ``,
 9 | })
10 | export default class ProductDetailComponent {}
11 | 


--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/spec",
 6 |     "types": [
 7 |       "jasmine"
 8 |     ]
 9 |   },
10 |   "include": [
11 |     "src/**/*.spec.ts",
12 |     "src/**/*.d.ts"
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.ts]
12 | quote_type = single
13 | 
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 | 


--------------------------------------------------------------------------------
/src/app/products/features/product.routes.ts:
--------------------------------------------------------------------------------
 1 | import { Routes } from '@angular/router';
 2 | 
 3 | export default [
 4 |   {
 5 |     path: '',
 6 |     loadComponent: () => import('./product-list/product-list.component'),
 7 |   },
 8 |   {
 9 |     path: 'product/:id',
10 |     loadComponent: () => import('./product-detail/product-detail.component'),
11 |   },
12 | ] as Routes;
13 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>AngularScaffolding</title>
 6 |   <base href="/">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
 9 | </head>
10 | <body>
11 |   <app-root></app-root>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { RouterOutlet } from '@angular/router';
 3 | 
 4 | @Component({
 5 |   selector: 'app-root',
 6 |   standalone: true,
 7 |   imports: [RouterOutlet],
 8 |   templateUrl: './app.component.html',
 9 |   styleUrl: './app.component.scss'
10 | })
11 | export class AppComponent {
12 |   title = 'angular-scaffolding';
13 | }
14 | 


--------------------------------------------------------------------------------
/src/app/core/guards/auth.guards.ts:
--------------------------------------------------------------------------------
 1 | import { CanActivateFn } from '@angular/router';
 2 | 
 3 | export const privateGuard = (): CanActivateFn => {
 4 |   console.log('privateGuard');
 5 |   return () => {
 6 |     return true;
 7 |   };
 8 | };
 9 | 
10 | export const publicGuard = (): CanActivateFn => {
11 |   console.log('publicGuard');
12 |   return () => {
13 |     return true;
14 |   };
15 | };
16 | 


--------------------------------------------------------------------------------
/src/app/auth/features/sign-up/sign-up.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { ButtonComponent } from '../../../shared/ui/button/button.component';
 3 | 
 4 | @Component({
 5 |   selector: 'app-sign-up',
 6 |   standalone: true,
 7 |   imports: [ButtonComponent],
 8 |   templateUrl: './sign-up.component.html',
 9 |   styles: ``,
10 | })
11 | export default class SignUpComponent {}
12 | 


--------------------------------------------------------------------------------
/src/app/auth/features/log-in/log-in.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | import { ButtonComponent } from '../../../shared/ui/button/button.component';
 4 | 
 5 | @Component({
 6 |   selector: 'app-log-in',
 7 |   standalone: true,
 8 |   imports: [ButtonComponent],
 9 |   templateUrl: './log-in.component.html',
10 |   styles: ``,
11 | })
12 | export default class LogInComponent {}
13 | 


--------------------------------------------------------------------------------
/src/app/shared/ui/layout/layout.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { RouterModule } from '@angular/router';
 3 | import NavbarComponent from './navbar.component';
 4 | import FooterComponent from './footer.component';
 5 | 
 6 | @Component({
 7 |   selector: 'app-layout',
 8 |   standalone: true,
 9 |   imports: [RouterModule, NavbarComponent, FooterComponent],
10 |   template: `
11 |     <app-navbar />
12 |     <h1>Layout</h1>
13 |     <router-outlet />
14 |     <app-footer />
15 |   `,
16 | })
17 | export default class LayoutComponent {}
18 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 3 |   "version": "0.2.0",
 4 |   "configurations": [
 5 |     {
 6 |       "name": "ng serve",
 7 |       "type": "chrome",
 8 |       "request": "launch",
 9 |       "preLaunchTask": "npm: start",
10 |       "url": "http://localhost:4200/"
11 |     },
12 |     {
13 |       "name": "ng test",
14 |       "type": "chrome",
15 |       "request": "launch",
16 |       "preLaunchTask": "npm: test",
17 |       "url": "http://localhost:9876/debug.html"
18 |     }
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/src/app/app.config.ts:
--------------------------------------------------------------------------------
 1 | import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 2 | import { provideRouter } from '@angular/router';
 3 | 
 4 | import { routes } from './app.routes';
 5 | import { provideHttpClient, withInterceptors } from '@angular/common/http';
 6 | import { authInterceptor } from './core/interceptors/auth.interceptor';
 7 | 
 8 | export const appConfig: ApplicationConfig = {
 9 |   providers: [
10 |     provideZoneChangeDetection({ eventCoalescing: true }),
11 |     provideRouter(routes),
12 |     provideHttpClient(withInterceptors([authInterceptor])),
13 |   ],
14 | };
15 | 


--------------------------------------------------------------------------------
/src/app/products/ui/product-card/product-card.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, input, output } from '@angular/core';
 2 | import { Product } from '../../data-access/products.service';
 3 | 
 4 | @Component({
 5 |   selector: 'app-product-card',
 6 |   standalone: true,
 7 |   template: `
 8 |     <div>
 9 |       <h2>{{ product().name }}</h2>
10 | 
11 |       <p>Price {{ product().price }}</p>
12 | 
13 |       <button (click)="buyProduct()">Buy</button>
14 |     </div>
15 |   `,
16 | })
17 | export default class ProductCardComponent {
18 |   product = input.required<Product>();
19 | 
20 |   buy = output<Product>();
21 | 
22 |   buyProduct() {
23 |     this.buy.emit(this.product());
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/app/products/data-access/products.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { of } from 'rxjs';
 3 | 
 4 | export interface Product {
 5 |   id: string;
 6 |   name: string;
 7 |   price: number;
 8 | }
 9 | 
10 | const PRODUCTS_MOCK: Product[] = [
11 |   {
12 |     id: '1',
13 |     name: 'Product 1',
14 |     price: 100,
15 |   },
16 |   {
17 |     id: '2',
18 |     name: 'Product 2',
19 |     price: 200,
20 |   },
21 |   {
22 |     id: '3',
23 |     name: 'Product 3',
24 |     price: 300,
25 |   },
26 | ];
27 | 
28 | @Injectable({
29 |   providedIn: 'root',
30 | })
31 | export class ProductService {
32 |   getProducts() {
33 |     return of(PRODUCTS_MOCK);
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/app/auth/features/log-in/log-in.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { LogInComponent } from './log-in.component';
 4 | 
 5 | describe('LogInComponent', () => {
 6 |   let component: LogInComponent;
 7 |   let fixture: ComponentFixture<LogInComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       imports: [LogInComponent]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(LogInComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/shared/ui/button/button.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { ButtonComponent } from './button.component';
 4 | 
 5 | describe('ButtonComponent', () => {
 6 |   let component: ButtonComponent;
 7 |   let fixture: ComponentFixture<ButtonComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       imports: [ButtonComponent]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(ButtonComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/auth/features/sign-up/sign-up.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { SignUpComponent } from './sign-up.component';
 4 | 
 5 | describe('SignUpComponent', () => {
 6 |   let component: SignUpComponent;
 7 |   let fixture: ComponentFixture<SignUpComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       imports: [SignUpComponent]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(SignUpComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/dashboard/dashboard.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { DashboardComponent } from './dashboard.component';
 4 | 
 5 | describe('DashboardComponent', () => {
 6 |   let component: DashboardComponent;
 7 |   let fixture: ComponentFixture<DashboardComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       imports: [DashboardComponent]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(DashboardComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
 2 | 
 3 | # Compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | /bazel-out
 8 | 
 9 | # Node
10 | /node_modules
11 | npm-debug.log
12 | yarn-error.log
13 | 
14 | # IDEs and editors
15 | .idea/
16 | .project
17 | .classpath
18 | .c9/
19 | *.launch
20 | .settings/
21 | *.sublime-workspace
22 | 
23 | # Visual Studio Code
24 | .vscode/*
25 | !.vscode/settings.json
26 | !.vscode/tasks.json
27 | !.vscode/launch.json
28 | !.vscode/extensions.json
29 | .history/*
30 | 
31 | # Miscellaneous
32 | /.angular/cache
33 | .sass-cache/
34 | /connect.lock
35 | /coverage
36 | /libpeerconnection.log
37 | testem.log
38 | /typings
39 | 
40 | # System files
41 | .DS_Store
42 | Thumbs.db
43 | 


--------------------------------------------------------------------------------
/src/app/products/features/product-list/product-list.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { ProductListComponent } from './product-list.component';
 4 | 
 5 | describe('ProductListComponent', () => {
 6 |   let component: ProductListComponent;
 7 |   let fixture: ComponentFixture<ProductListComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       imports: [ProductListComponent]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(ProductListComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/products/features/product-list/product-list.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, inject } from '@angular/core';
 2 | import { toSignal } from '@angular/core/rxjs-interop';
 3 | import { Product, ProductService } from '../../data-access/products.service';
 4 | import ProductCardComponent from '../../ui/product-card/product-card.component';
 5 | 
 6 | @Component({
 7 |   selector: 'app-product-list',
 8 |   standalone: true,
 9 |   imports: [ProductCardComponent],
10 |   templateUrl: './product-list.component.html',
11 |   styles: ``,
12 | })
13 | export default class ProductListComponent {
14 |   productService = inject(ProductService);
15 | 
16 |   products = toSignal(this.productService.getProducts());
17 | 
18 |   buy(product: Product) {
19 |     alert(`You bought ${product.name}`);
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/src/app/products/features/product-detail/product-detail.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { ProductDetailComponent } from './product-detail.component';
 4 | 
 5 | describe('ProductDetailComponent', () => {
 6 |   let component: ProductDetailComponent;
 7 |   let fixture: ComponentFixture<ProductDetailComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       imports: [ProductDetailComponent]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(ProductDetailComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/app.routes.ts:
--------------------------------------------------------------------------------
 1 | import { Routes } from '@angular/router';
 2 | import { privateGuard, publicGuard } from './core/guards/auth.guards';
 3 | 
 4 | export const routes: Routes = [
 5 |   // rutas publicas
 6 |   {
 7 |     path: 'auth',
 8 |     canActivate: [publicGuard],
 9 |     loadChildren: () => import('./auth/features/auth.routes'),
10 |   },
11 |   // rutas privadas
12 |   {
13 |     path: '',
14 |     canActivate: [privateGuard],
15 |     loadComponent: () => import('./shared/ui/layout/layout.component'),
16 |     children: [
17 |       {
18 |         path: 'dashboard',
19 |         loadComponent: () => import('./dashboard/dashboard.component'),
20 |       },
21 |       {
22 |         path: 'products',
23 |         loadChildren: () => import('./products/features/product.routes'),
24 |       },
25 |       {
26 |         path: '**',
27 |         redirectTo: 'dashboard',
28 |       },
29 |     ],
30 |   },
31 |   {
32 |     path: '**',
33 |     redirectTo: '',
34 |   },
35 | ];
36 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "compileOnSave": false,
 4 |   "compilerOptions": {
 5 |     "outDir": "./dist/out-tsc",
 6 |     "strict": true,
 7 |     "noImplicitOverride": true,
 8 |     "noPropertyAccessFromIndexSignature": true,
 9 |     "noImplicitReturns": true,
10 |     "noFallthroughCasesInSwitch": true,
11 |     "skipLibCheck": true,
12 |     "esModuleInterop": true,
13 |     "sourceMap": true,
14 |     "declaration": false,
15 |     "experimentalDecorators": true,
16 |     "moduleResolution": "bundler",
17 |     "importHelpers": true,
18 |     "target": "ES2022",
19 |     "module": "ES2022",
20 |     "useDefineForClassFields": false,
21 |     "lib": [
22 |       "ES2022",
23 |       "dom"
24 |     ]
25 |   },
26 |   "angularCompilerOptions": {
27 |     "enableI18nLegacyMessageIdFormat": false,
28 |     "strictInjectionParameters": true,
29 |     "strictInputAccessModifiers": true,
30 |     "strictTemplates": true
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | import { AppComponent } from './app.component';
 3 | 
 4 | describe('AppComponent', () => {
 5 |   beforeEach(async () => {
 6 |     await TestBed.configureTestingModule({
 7 |       imports: [AppComponent],
 8 |     }).compileComponents();
 9 |   });
10 | 
11 |   it('should create the app', () => {
12 |     const fixture = TestBed.createComponent(AppComponent);
13 |     const app = fixture.componentInstance;
14 |     expect(app).toBeTruthy();
15 |   });
16 | 
17 |   it(`should have the 'angular-scaffolding' title`, () => {
18 |     const fixture = TestBed.createComponent(AppComponent);
19 |     const app = fixture.componentInstance;
20 |     expect(app.title).toEqual('angular-scaffolding');
21 |   });
22 | 
23 |   it('should render title', () => {
24 |     const fixture = TestBed.createComponent(AppComponent);
25 |     fixture.detectChanges();
26 |     const compiled = fixture.nativeElement as HTMLElement;
27 |     expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angular-scaffolding');
28 |   });
29 | });
30 | 


--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
 3 |   "version": "2.0.0",
 4 |   "tasks": [
 5 |     {
 6 |       "type": "npm",
 7 |       "script": "start",
 8 |       "isBackground": true,
 9 |       "problemMatcher": {
10 |         "owner": "typescript",
11 |         "pattern": "$tsc",
12 |         "background": {
13 |           "activeOnStart": true,
14 |           "beginsPattern": {
15 |             "regexp": "(.*?)"
16 |           },
17 |           "endsPattern": {
18 |             "regexp": "bundle generation complete"
19 |           }
20 |         }
21 |       }
22 |     },
23 |     {
24 |       "type": "npm",
25 |       "script": "test",
26 |       "isBackground": true,
27 |       "problemMatcher": {
28 |         "owner": "typescript",
29 |         "pattern": "$tsc",
30 |         "background": {
31 |           "activeOnStart": true,
32 |           "beginsPattern": {
33 |             "regexp": "(.*?)"
34 |           },
35 |           "endsPattern": {
36 |             "regexp": "bundle generation complete"
37 |           }
38 |         }
39 |       }
40 |     }
41 |   ]
42 | }
43 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # AngularScaffolding
 2 | 
 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.1.
 4 | 
 5 | ## Development server
 6 | 
 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
 8 | 
 9 | ## Code scaffolding
10 | 
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 | 
13 | ## Build
14 | 
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16 | 
17 | ## Running unit tests
18 | 
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 | 
21 | ## Running end-to-end tests
22 | 
23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
24 | 
25 | ## Further help
26 | 
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
28 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-scaffolding",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "ng": "ng",
 6 |     "start": "ng serve",
 7 |     "build": "ng build",
 8 |     "watch": "ng build --watch --configuration development",
 9 |     "test": "ng test"
10 |   },
11 |   "private": true,
12 |   "dependencies": {
13 |     "@angular/animations": "^18.0.0",
14 |     "@angular/common": "^18.0.0",
15 |     "@angular/compiler": "^18.0.0",
16 |     "@angular/core": "^18.0.0",
17 |     "@angular/forms": "^18.0.0",
18 |     "@angular/platform-browser": "^18.0.0",
19 |     "@angular/platform-browser-dynamic": "^18.0.0",
20 |     "@angular/router": "^18.0.0",
21 |     "rxjs": "~7.8.0",
22 |     "tslib": "^2.3.0",
23 |     "zone.js": "~0.14.3"
24 |   },
25 |   "devDependencies": {
26 |     "@angular-devkit/build-angular": "^18.0.1",
27 |     "@angular/cli": "^18.0.1",
28 |     "@angular/compiler-cli": "^18.0.0",
29 |     "@types/jasmine": "~5.1.0",
30 |     "jasmine-core": "~5.1.0",
31 |     "karma": "~6.4.0",
32 |     "karma-chrome-launcher": "~3.2.0",
33 |     "karma-coverage": "~2.2.0",
34 |     "karma-jasmine": "~5.1.0",
35 |     "karma-jasmine-html-reporter": "~2.1.0",
36 |     "typescript": "~5.4.2"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "angular-scaffolding": {
  7 |       "projectType": "application",
  8 |       "schematics": {
  9 |         "@schematics/angular:component": {
 10 |           "style": "scss"
 11 |         }
 12 |       },
 13 |       "root": "",
 14 |       "sourceRoot": "src",
 15 |       "prefix": "app",
 16 |       "architect": {
 17 |         "build": {
 18 |           "builder": "@angular-devkit/build-angular:application",
 19 |           "options": {
 20 |             "outputPath": "dist/angular-scaffolding",
 21 |             "index": "src/index.html",
 22 |             "browser": "src/main.ts",
 23 |             "polyfills": [
 24 |               "zone.js"
 25 |             ],
 26 |             "tsConfig": "tsconfig.app.json",
 27 |             "inlineStyleLanguage": "scss",
 28 |             "assets": [
 29 |               {
 30 |                 "glob": "**/*",
 31 |                 "input": "public"
 32 |               }
 33 |             ],
 34 |             "styles": [
 35 |               "src/styles.scss"
 36 |             ],
 37 |             "scripts": []
 38 |           },
 39 |           "configurations": {
 40 |             "production": {
 41 |               "budgets": [
 42 |                 {
 43 |                   "type": "initial",
 44 |                   "maximumWarning": "500kB",
 45 |                   "maximumError": "1MB"
 46 |                 },
 47 |                 {
 48 |                   "type": "anyComponentStyle",
 49 |                   "maximumWarning": "2kB",
 50 |                   "maximumError": "4kB"
 51 |                 }
 52 |               ],
 53 |               "outputHashing": "all"
 54 |             },
 55 |             "development": {
 56 |               "optimization": false,
 57 |               "extractLicenses": false,
 58 |               "sourceMap": true
 59 |             }
 60 |           },
 61 |           "defaultConfiguration": "production"
 62 |         },
 63 |         "serve": {
 64 |           "builder": "@angular-devkit/build-angular:dev-server",
 65 |           "configurations": {
 66 |             "production": {
 67 |               "buildTarget": "angular-scaffolding:build:production"
 68 |             },
 69 |             "development": {
 70 |               "buildTarget": "angular-scaffolding:build:development"
 71 |             }
 72 |           },
 73 |           "defaultConfiguration": "development"
 74 |         },
 75 |         "extract-i18n": {
 76 |           "builder": "@angular-devkit/build-angular:extract-i18n"
 77 |         },
 78 |         "test": {
 79 |           "builder": "@angular-devkit/build-angular:karma",
 80 |           "options": {
 81 |             "polyfills": [
 82 |               "zone.js",
 83 |               "zone.js/testing"
 84 |             ],
 85 |             "tsConfig": "tsconfig.spec.json",
 86 |             "inlineStyleLanguage": "scss",
 87 |             "assets": [
 88 |               {
 89 |                 "glob": "**/*",
 90 |                 "input": "public"
 91 |               }
 92 |             ],
 93 |             "styles": [
 94 |               "src/styles.scss"
 95 |             ],
 96 |             "scripts": []
 97 |           }
 98 |         }
 99 |       }
100 |     }
101 |   }
102 | }
103 | 


--------------------------------------------------------------------------------