Skip to main content

​
Getting started

This guide will walk you through setting up the Angular 18 Archetype and running your first development server.
Before starting, make sure you have Node.js 18.x or later and Angular CLI installed. See the introduction for prerequisites.

​
Clone the repository

1

Clone the project

Clone the repository to your local machine:
git clone <repository-url> angular-18-archetype
cd angular-18-archetype
Replace <repository-url> with the actual URL of your repository.
2

Verify the structure

Check that you have the correct project structure:
ls -la
You should see:
  • src/ - Source code directory
  • package.json - Project dependencies
  • angular.json - Angular configuration
  • tsconfig.json - TypeScript configuration

​
Install dependencies

1

Install npm packages

Install all project dependencies:
npm install
This will install Angular 18.2, ngx-translate, and all development dependencies.
2

Verify installation

Confirm the installation was successful:
npm list --depth=0
You should see all dependencies from package.json listed.
If you encounter peer dependency warnings, you can safely ignore them or use npm install --legacy-peer-deps if needed.

​
Run the development server

1

Start the dev server

Launch the development server:
npm start
Or using Angular CLI directly:
ng serve
The application will start on http://localhost:4200/
2

Open in browser

Navigate to http://localhost:4200/ in your browser.The app will automatically reload whenever you make changes to the source files.
The development server uses Angular’s default configuration with source maps enabled for easier debugging.

​
Make your first changes

Let’s make a simple change to verify everything is working:
1

Open the main component

Open src/app/app.component.ts in your editor:
src/app/app.component.ts
import { Component, inject } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { LanguageSwitchService } from './core/language-switch/language-switch.service';
import { NavbarComponent } from './core/language-switch/language-switch.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, TranslateModule, NavbarComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'angular-18-archetype';
  languageService = inject(LanguageSwitchService);
  constructor() {
    this.languageService.setLanguage('es')
  }
}
2

Change the default language

Modify the default language from Spanish to English:
constructor() {
  this.languageService.setLanguage('en')  // Changed from 'es' to 'en'
}
Save the file and observe the automatic reload in your browser.
3

Test the language switcher

The archetype includes a language switcher component. Try switching between English and Spanish using the UI component.
The language preference is automatically saved to localStorage and persists across sessions.

​
Understanding the project structure

The archetype uses a structured folder organization: 
src/
├── app/
│   ├── config/          # App configuration and factories
│   ├── core/            # Core services, guards, interceptors
│   │   ├── language-switch/
│   │   ├── layout/
│   │   └── providers/
│   ├── shared/          # Shared code across features
│   │   ├── domain/      # Type definitions
│   │   ├── services/    # Shared services
│   │   │   ├── state/   # State management
│   │   │   └── utils/   # Utility services
│   │   └── ui/          # Reusable UI components
│   ├── app.component.ts
│   ├── app.config.ts    # Application providers
│   └── app.routes.ts    # Route definitions
├── assets/
│   └── i18n/           # Translation files (en.json, es.json)
└── environments/        # Environment configurations

​
TypeScript path aliases

The archetype includes pre-configured path aliases for cleaner imports:
Example imports
import { NotificationComponent } from '@ui/notifications.component';
import { User } from '@domain/user.type';
import { AuthStore } from '@state/auth.store';
import { LocalRepository } from '@services/utils/local.repository';

​
Available scripts

The archetype includes these npm scripts: 
npm start
# Starts the dev server at http://localhost:4200/

​
Build for production

1

Create production build

Build the application for production:
npm run build
This creates an optimized build in the dist/angular-18-archetype/ directory.
2

Review build output

The production build includes:
  • Output hashing for cache busting
  • Bundle optimization and minification
  • Tree shaking for smaller bundle sizes
  • Source maps disabled by default
The build has budget limits configured: 500kB warning, 1MB error for initial bundles.
3

Test production build locally

You can test the production build locally using a static file server:
npx serve dist/angular-18-archetype/browser

​
Generate new components

Use Angular CLI to generate new components, services, and other artifacts:
Generate a new component:
ng generate component feature/my-component
Or using the shorthand:
ng g c feature/my-component
All generated components will be standalone by default, matching the archetype’s approach.

​
Working with translations

The archetype uses ngx-translate for internationalization:
1

Add translation keys

Edit the translation files in src/assets/i18n/:
src/assets/i18n/en.json
{
  "WELCOME": "Welcome to Angular 18 Archetype",
  "DESCRIPTION": "A production-ready starter template"
}
src/assets/i18n/es.json
{
  "WELCOME": "Bienvenido a Angular 18 Archetype",
  "DESCRIPTION": "Una plantilla inicial lista para producción"
}
2

Use translations in components

Import TranslateModule and use the translate pipe:
import { TranslateModule } from '@ngx-translate/core';

@Component({
  // ...
  imports: [TranslateModule],
  template: `
    <h1>{{ 'WELCOME' | translate }}</h1>
    <p>{{ 'DESCRIPTION' | translate }}</p>
  `
})
3

Switch languages programmatically

Use the LanguageSwitchService:
import { LanguageSwitchService } from './core/language-switch/language-switch.service';

export class MyComponent {
  languageService = inject(LanguageSwitchService);
  
  switchToEnglish() {
    this.languageService.setLanguage('en');
  }
}
Available languages are defined in LanguageSwitchService.availableLanguages: [‘en’, ‘es’]

​
Next steps

Now that you have the archetype running, explore these topics:

Architecture guide

Learn about the folder structure and architectural decisions

State management

Understand the state management patterns using stores

Authentication

Implement authentication using the included guard and interceptor

Deployment

Deploy your application to production
Remember to update the README.md with project-specific information and replace placeholder content with your actual project details.

​
Getting help

If you encounter issues or have questions:

Build docs developers (and LLMs) love

Get started for freeTalk to us