Search Results

Build Configuration Angular build configuration in angular.json: Project Name: project (generic name) Output Directory: dist/agent Source Root: src Build Commands Development Build npm run build-dev # Creates development build with source maps # Output: dist/a...

Code Style TypeScript Use TypeScript strict mode Define interfaces for all data structures Use type annotations for function parameters and returns Angular Follow Angular style guide Use Angular CLI for scaffolding One component per file Use services for bu...

Common Issues 1. Cannot connect to API Symptom: API calls fail with connection errors Solution: Check API endpoints in src/app/addrezz.ts Verify API server is running Check CORS configuration on API server Verify network connectivity 2. Authentication fails...

Official Documentation Angular Documentation TypeScript Documentation RxJS Documentation Angular Material Bootstrap Documentation Leaflet Documentation Useful Tools Angular CLI Visual Studio Code (Recommended IDE) Angular Language Service (V...

OnMarket Landing is a comprehensive Angular-based e-commerce marketplace application. It provides a full-featured online shopping platform with product browsing, cart management, checkout, user profiles, affiliate program, and real-time chat functionality. Key...

Prerequisites Before you begin, ensure you have the following installed: Node.js: v12.x or higher (recommended v14.x or v16.x) npm: v6.x or higher (comes with Node.js) Angular CLI: v12.2.2 npm install -g @angular/cli@12.2.2 Installation & Setup 1. Clon...

on-market-landing/ ├── e2e/ # End-to-end tests ├── src/ │ ├── app/ │ │ ├── components/ # All UI components │ │ │ ├── accounts/ # Login, signup, profile │ │ │ ├── affiliate/ # Affiliate program...

1. E-Commerce Functionality Product catalog browsing Advanced search and filtering Product details with images and specifications Shopping cart management Checkout process with multiple payment options Order tracking and history 2. User Management User regi...

Component-Based Architecture The application follows Angular's component-based architecture where each feature is encapsulated in its own component with clear responsibilities. Modular Design Feature Modules: Components are organized by feature Shared Modul...

ApiService (api.service.ts) The main service handling all API communications. Base URLs // Production BASEURL = "https://onmarket.id/"; API_USERSTATE_SERVER = "https://usapi.onindonesia.id/"; API_USERONDELIVERY_SERVER = "https://onapps-api.onindonesia.id/"; AP...

Main Routes The application uses Angular Router with the following main routes: // Home & Product Routes { path: "", component: HomePageComponent } { path: "search", component: SearchResultComponent } { path: "product", component: ProductDetailsComponent } { p...

BehaviorSubjects The application uses RxJS BehaviorSubjects for state management: ApiService State isUpdateCart = new BehaviorSubject(true); deletedFromCart = new BehaviorSubject(true); login = new BehaviorSubject(true); SocketsService State private chatOpenS...

JWT Authentication The application uses JWT (JSON Web Token) for authentication: Login Flow: // User logs in this.apiService.getUser(username, password).subscribe( response => { // Store JWT token localStorage.setItem('jwt', response.token); //...

1. Homepage Component Path: src/app/components/homepage/ Main landing page featuring: Banner slider Product categories Featured products Promotions Flash sales 2. Product Details Component Path: src/app/components/product-details/ Displays detailed product i...

1. PhoneNumberPipe File: src/app/pipes/phone-number.pipe.ts Formats phone numbers according to Indonesian format. Usage: {{ phoneNumber | phoneNumber }} 2. ShortNumberPipe File: src/app/pipes/short-number-pipe.pipe.ts Converts large numbers to shortened forma...

Starting Development Server # For Unix/Linux/Mac npm start # For Windows npm run startWindows The app will automatically reload when you make changes to source files. Code Scaffolding Generate new components, services, etc. using Angular CLI: # Generate a ne...

Development Build npm run build Production Build ng build --configuration production Build Configuration Configured in angular.json: { "configurations": { "production": { "fileReplacements": [{ "replace": "src/environments/environment.ts"...

Unit Tests Run unit tests via Karma: npm test Tests are written using Jasmine and located alongside components: *.spec.ts files End-to-End Tests Run e2e tests via Protractor: npm run e2e E2E tests are located in the e2e/ directory. Test Configuration Ka...

TypeScript Style Guide Follow Angular's TypeScript style guide: Use 2 spaces for indentation Use single quotes for strings Use camelCase for variables and functions Use PascalCase for classes and interfaces Use UPPER_CASE for constants Component Structure @C...

Common Issues and Solutions 1. OpenSSL Error on npm start Error: Error: error:0308010C:digital envelope routines::unsupported Solution: The project already includes the fix in package.json: NODE_OPTIONS='--openssl-legacy-provider' ng serve 2. Module Not Found...