├── src ├── styles.scss ├── main.ts ├── app │ ├── app.config.ts │ ├── app.component.ts │ ├── app.routes.ts │ ├── services │ │ └── cart.service.ts │ ├── components │ │ ├── button │ │ │ └── button.component.ts │ │ ├── primary-button │ │ │ └── primary-button.component.ts │ │ └── header │ │ │ └── header.component.ts │ └── pages │ │ ├── cart │ │ ├── cart.component.ts │ │ ├── cart-item │ │ │ └── cart-item.component.ts │ │ └── order-summary │ │ │ └── order-summary.component.ts │ │ └── products-list │ │ ├── product-card │ │ └── product-card.component.ts │ │ └── products-list.component.ts └── index.html ├── public └── favicon.ico ├── .vscode ├── extensions.json ├── launch.json └── tasks.json ├── tailwind.config.js ├── .editorconfig ├── tsconfig.app.json ├── tsconfig.spec.json ├── .gitignore ├── tsconfig.json ├── package.json ├── README.md └── angular.json /src/styles.scss: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisiszoaib/angular-ecommerce/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 3 | "recommendations": ["angular.ng-template"] 4 | } 5 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./src/**/*.{html,ts}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 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/app.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; 2 | import { provideRouter } from '@angular/router'; 3 | 4 | import { routes } from './app.routes'; 5 | 6 | export const appConfig: ApplicationConfig = { 7 | providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)] 8 | }; 9 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularEcommerce 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /.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 | ij_typescript_use_double_quotes = false 14 | 15 | [*.md] 16 | max_line_length = off 17 | trim_trailing_whitespace = false 18 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { HeaderComponent } from './components/header/header.component'; 3 | import { RouterOutlet } from '@angular/router'; 4 | 5 | @Component({ 6 | selector: 'app-root', 7 | imports: [RouterOutlet, HeaderComponent], 8 | template: ` 9 | 10 | 11 | `, 12 | styles: [], 13 | }) 14 | export class AppComponent {} 15 | -------------------------------------------------------------------------------- /src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | import { ProductsListComponent } from './pages/products-list/products-list.component'; 3 | import { CartComponent } from './pages/cart/cart.component'; 4 | 5 | export const routes: Routes = [ 6 | { 7 | path: '', 8 | pathMatch: 'full', 9 | component: ProductsListComponent, 10 | }, 11 | { 12 | path: 'cart', 13 | component: CartComponent, 14 | }, 15 | ]; 16 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/app", 7 | "types": [] 8 | }, 9 | "files": [ 10 | "src/main.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/spec", 7 | "types": [ 8 | "jasmine" 9 | ] 10 | }, 11 | "include": [ 12 | "src/**/*.spec.ts", 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /src/app/services/cart.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, signal } from '@angular/core'; 2 | import { Product } from '../pages/products-list/products-list.component'; 3 | 4 | @Injectable({ 5 | providedIn: 'root', 6 | }) 7 | export class CartService { 8 | cart = signal([]); 9 | 10 | addToCart(product: Product) { 11 | this.cart.set([...this.cart(), product]); 12 | } 13 | 14 | removeFromCart(product: Product) { 15 | this.cart.set(this.cart().filter((p) => p.id !== product.id)); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/app/components/button/button.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, input, output } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-button', 5 | imports: [], 6 | template: ` 7 | 13 | `, 14 | styles: ``, 15 | }) 16 | export class ButtonComponent { 17 | label = input(); 18 | 19 | btnClicked = output(); 20 | } 21 | -------------------------------------------------------------------------------- /.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/components/primary-button/primary-button.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, input, output } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-primary-button', 5 | imports: [], 6 | template: ` 7 | 13 | `, 14 | styles: ``, 15 | }) 16 | export class PrimaryButtonComponent { 17 | label = input(); 18 | 19 | btnClicked = output(); 20 | } 21 | -------------------------------------------------------------------------------- /.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/components/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, computed, inject } from '@angular/core'; 2 | import { CartService } from '../../services/cart.service'; 3 | import { RouterLink } from '@angular/router'; 4 | import { PrimaryButtonComponent } from '../primary-button/primary-button.component'; 5 | 6 | @Component({ 7 | selector: 'app-header', 8 | imports: [PrimaryButtonComponent, RouterLink], 9 | template: ` 10 |
13 | 14 | 15 |
16 | `, 17 | styles: ``, 18 | }) 19 | export class HeaderComponent { 20 | cartService = inject(CartService); 21 | 22 | cartLabel = computed(() => `Cart (${this.cartService.cart().length})`); 23 | } 24 | -------------------------------------------------------------------------------- /src/app/pages/cart/cart.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, inject } from '@angular/core'; 2 | import { CartService } from '../../services/cart.service'; 3 | import { CartItemComponent } from './cart-item/cart-item.component'; 4 | import { OrderSummaryComponent } from './order-summary/order-summary.component'; 5 | import { ButtonComponent } from '../../components/button/button.component'; 6 | import { RouterLink } from '@angular/router'; 7 | 8 | @Component({ 9 | selector: 'app-cart', 10 | imports: [CartItemComponent, OrderSummaryComponent], 11 | template: ` 12 |
13 |

Shopping cart

14 | 15 | @for (item of cartService.cart(); track item.id) { 16 | 17 | } 18 | 19 |
20 | `, 21 | styles: ``, 22 | }) 23 | export class CartComponent { 24 | cartService = inject(CartService); 25 | } 26 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "compileOnSave": false, 5 | "compilerOptions": { 6 | "outDir": "./dist/out-tsc", 7 | "strict": true, 8 | "noImplicitOverride": true, 9 | "noPropertyAccessFromIndexSignature": true, 10 | "noImplicitReturns": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "skipLibCheck": true, 13 | "isolatedModules": true, 14 | "esModuleInterop": true, 15 | "experimentalDecorators": true, 16 | "moduleResolution": "bundler", 17 | "importHelpers": true, 18 | "target": "ES2022", 19 | "module": "ES2022" 20 | }, 21 | "angularCompilerOptions": { 22 | "enableI18nLegacyMessageIdFormat": false, 23 | "strictInjectionParameters": true, 24 | "strictInputAccessModifiers": true, 25 | "strictTemplates": true 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/app/pages/cart/cart-item/cart-item.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, inject, input } from '@angular/core'; 2 | import { Product } from '../../products-list/products-list.component'; 3 | import { ButtonComponent } from '../../../components/button/button.component'; 4 | import { CartService } from '../../../services/cart.service'; 5 | 6 | @Component({ 7 | selector: 'app-cart-item', 8 | imports: [ButtonComponent], 9 | template: ` 10 |
13 | 14 |
15 | {{ item().title }} 16 | {{ '$' + item().price }} 17 |
18 |
19 | 23 |
24 | `, 25 | styles: ``, 26 | }) 27 | export class CartItemComponent { 28 | item = input.required(); 29 | 30 | cartService = inject(CartService); 31 | } 32 | -------------------------------------------------------------------------------- /src/app/pages/cart/order-summary/order-summary.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, computed, inject } from '@angular/core'; 2 | import { CartService } from '../../../services/cart.service'; 3 | import { ButtonComponent } from '../../../components/button/button.component'; 4 | import { PrimaryButtonComponent } from '../../../components/primary-button/primary-button.component'; 5 | 6 | @Component({ 7 | selector: 'app-order-summary', 8 | imports: [PrimaryButtonComponent], 9 | template: ` 10 |
11 |

Order Summary

12 |
13 |
14 | Total 15 | {{ '$ ' + total() }} 16 |
17 | 18 |
19 |
20 | `, 21 | styles: ``, 22 | }) 23 | export class OrderSummaryComponent { 24 | cartService = inject(CartService); 25 | 26 | total = computed(() => { 27 | let total = 0; 28 | for (const item of this.cartService.cart()) { 29 | total += item.price; 30 | } 31 | 32 | return total; 33 | }); 34 | } 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-ecommerce", 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": "^19.0.0", 14 | "@angular/common": "^19.0.0", 15 | "@angular/compiler": "^19.0.0", 16 | "@angular/core": "^19.0.0", 17 | "@angular/forms": "^19.0.0", 18 | "@angular/platform-browser": "^19.0.0", 19 | "@angular/platform-browser-dynamic": "^19.0.0", 20 | "@angular/router": "^19.0.0", 21 | "rxjs": "~7.8.0", 22 | "tslib": "^2.3.0", 23 | "zone.js": "~0.15.0" 24 | }, 25 | "devDependencies": { 26 | "@angular-devkit/build-angular": "^19.0.0", 27 | "@angular/cli": "^19.0.0", 28 | "@angular/compiler-cli": "^19.0.0", 29 | "@types/jasmine": "~5.1.0", 30 | "autoprefixer": "^10.4.20", 31 | "jasmine-core": "~5.4.0", 32 | "karma": "~6.4.0", 33 | "karma-chrome-launcher": "~3.2.0", 34 | "karma-coverage": "~2.2.0", 35 | "karma-jasmine": "~5.1.0", 36 | "karma-jasmine-html-reporter": "~2.1.0", 37 | "postcss": "^8.4.49", 38 | "tailwindcss": "^3.4.15", 39 | "typescript": "~5.6.2" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/app/pages/products-list/product-card/product-card.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, inject, input } from '@angular/core'; 2 | import { Product } from '../products-list.component'; 3 | import { CartService } from '../../../services/cart.service'; 4 | import { PrimaryButtonComponent } from '../../../components/primary-button/primary-button.component'; 5 | 6 | @Component({ 7 | selector: 'app-product-card', 8 | imports: [PrimaryButtonComponent], 9 | template: ` 10 |
13 |
14 | 18 |
19 |
20 | {{ product().title }} 21 | {{ '$' + product().price }} 22 | 27 |
28 | 29 | 33 | @if (product().stock) { 34 | {{ product().stock }} left } @else { Out of stock } 35 | 36 |
37 | `, 38 | styles: ``, 39 | }) 40 | export class ProductCardComponent { 41 | cartService = inject(CartService); 42 | 43 | product = input.required(); 44 | } 45 | -------------------------------------------------------------------------------- /src/app/pages/products-list/products-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, signal } from '@angular/core'; 2 | import { ProductCardComponent } from './product-card/product-card.component'; 3 | 4 | export type Product = { 5 | id: number; 6 | title: string; 7 | price: number; 8 | image: string; 9 | stock?: number; 10 | }; 11 | 12 | @Component({ 13 | selector: 'app-products-list', 14 | imports: [ProductCardComponent], 15 | template: ` 16 |
17 | @for (product of products(); track product.id) { 18 | 19 | } 20 |
21 | `, 22 | styles: ``, 23 | }) 24 | export class ProductsListComponent { 25 | products = signal([ 26 | { 27 | id: 1, 28 | title: 'Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops', 29 | price: 109.95, 30 | image: 'https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_t.png', 31 | stock: 10, 32 | }, 33 | { 34 | id: 2, 35 | title: 'Mens Casual Premium Slim Fit T-Shirts ', 36 | price: 22.3, 37 | image: 38 | 'https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_t.png', 39 | stock: 0, 40 | }, 41 | { 42 | id: 3, 43 | title: 'Mens Cotton Jacket', 44 | price: 55.99, 45 | 46 | image: 'https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_t.png', 47 | stock: 5, 48 | }, 49 | { 50 | id: 4, 51 | title: 'Mens Casual Slim Fit', 52 | price: 15.99, 53 | image: 'https://fakestoreapi.com/img/71YXzeOuslL._AC_UY879_t.png', 54 | stock: 7, 55 | }, 56 | ]); 57 | } 58 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # AngularEcommerce 2 | 3 | This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.0.0. 4 | 5 | ## Development server 6 | 7 | To start a local development server, run: 8 | 9 | ```bash 10 | ng serve 11 | ``` 12 | 13 | Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files. 14 | 15 | ## Code scaffolding 16 | 17 | Angular CLI includes powerful code scaffolding tools. To generate a new component, run: 18 | 19 | ```bash 20 | ng generate component component-name 21 | ``` 22 | 23 | For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run: 24 | 25 | ```bash 26 | ng generate --help 27 | ``` 28 | 29 | ## Building 30 | 31 | To build the project run: 32 | 33 | ```bash 34 | ng build 35 | ``` 36 | 37 | This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed. 38 | 39 | ## Running unit tests 40 | 41 | To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command: 42 | 43 | ```bash 44 | ng test 45 | ``` 46 | 47 | ## Running end-to-end tests 48 | 49 | For end-to-end (e2e) testing, run: 50 | 51 | ```bash 52 | ng e2e 53 | ``` 54 | 55 | Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs. 56 | 57 | ## Additional Resources 58 | 59 | For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page. 60 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "angular-ecommerce": { 7 | "projectType": "application", 8 | "schematics": { 9 | "@schematics/angular:component": { 10 | "inlineTemplate": true, 11 | "inlineStyle": true, 12 | "style": "scss", 13 | "skipTests": true 14 | }, 15 | "@schematics/angular:class": { 16 | "skipTests": true 17 | }, 18 | "@schematics/angular:directive": { 19 | "skipTests": true 20 | }, 21 | "@schematics/angular:guard": { 22 | "skipTests": true 23 | }, 24 | "@schematics/angular:interceptor": { 25 | "skipTests": true 26 | }, 27 | "@schematics/angular:pipe": { 28 | "skipTests": true 29 | }, 30 | "@schematics/angular:resolver": { 31 | "skipTests": true 32 | }, 33 | "@schematics/angular:service": { 34 | "skipTests": true 35 | } 36 | }, 37 | "root": "", 38 | "sourceRoot": "src", 39 | "prefix": "app", 40 | "architect": { 41 | "build": { 42 | "builder": "@angular-devkit/build-angular:application", 43 | "options": { 44 | "outputPath": "dist/angular-ecommerce", 45 | "index": "src/index.html", 46 | "browser": "src/main.ts", 47 | "polyfills": [ 48 | "zone.js" 49 | ], 50 | "tsConfig": "tsconfig.app.json", 51 | "inlineStyleLanguage": "scss", 52 | "assets": [ 53 | { 54 | "glob": "**/*", 55 | "input": "public" 56 | } 57 | ], 58 | "styles": [ 59 | "src/styles.scss" 60 | ], 61 | "scripts": [] 62 | }, 63 | "configurations": { 64 | "production": { 65 | "budgets": [ 66 | { 67 | "type": "initial", 68 | "maximumWarning": "500kB", 69 | "maximumError": "1MB" 70 | }, 71 | { 72 | "type": "anyComponentStyle", 73 | "maximumWarning": "4kB", 74 | "maximumError": "8kB" 75 | } 76 | ], 77 | "outputHashing": "all" 78 | }, 79 | "development": { 80 | "optimization": false, 81 | "extractLicenses": false, 82 | "sourceMap": true 83 | } 84 | }, 85 | "defaultConfiguration": "production" 86 | }, 87 | "serve": { 88 | "builder": "@angular-devkit/build-angular:dev-server", 89 | "configurations": { 90 | "production": { 91 | "buildTarget": "angular-ecommerce:build:production" 92 | }, 93 | "development": { 94 | "buildTarget": "angular-ecommerce:build:development" 95 | } 96 | }, 97 | "defaultConfiguration": "development" 98 | }, 99 | "extract-i18n": { 100 | "builder": "@angular-devkit/build-angular:extract-i18n" 101 | }, 102 | "test": { 103 | "builder": "@angular-devkit/build-angular:karma", 104 | "options": { 105 | "polyfills": [ 106 | "zone.js", 107 | "zone.js/testing" 108 | ], 109 | "tsConfig": "tsconfig.spec.json", 110 | "inlineStyleLanguage": "scss", 111 | "assets": [ 112 | { 113 | "glob": "**/*", 114 | "input": "public" 115 | } 116 | ], 117 | "styles": [ 118 | "src/styles.scss" 119 | ], 120 | "scripts": [] 121 | } 122 | } 123 | } 124 | } 125 | } 126 | } 127 | --------------------------------------------------------------------------------