Angular

Guide complet de déploiement pour Angular sur NStrim

Aperçu

Angular est un framework d'application web basé sur TypeScript développé par Google. Il fournit une solution complète pour créer des applications dynamiques à page unique avec une architecture basée sur les composants.

Avant de commencer
Assurez-vous que votre tableau de bord est ouvert - vous aurez besoin des identifiants Git qui y sont affichés. Ce modèle inclut Tailwind CSS pour le style.

Démarrage rapide

1

Créer un dépôt à partir du modèle

Sur votre tableau de bord, allez dans l'onglet Tools & Deployment. Cliquez sur le bouton "New Repository", sélectionnez le modèle Angular dans le menu déroulant, saisissez un nom de dépôt et un sous-domaine, puis cliquez sur "Create Repository".

2

Cloner votre dépôt

git clone https://<git-server>/<username>/<repo-name>.git
cd <repo-name>
3

Installer les dépendances

npm install
4

Démarrer le serveur de développement

npm start

Ouvrez http://localhost:4200 dans votre navigateur.

5

Construire et pousser

npm run build
git add .
git commit -m "Initial setup"
git push origin main
Chaque push vers Git déploie automatiquement votre application. Consultez l'URL de travail du module sur votre tableau de bord pour voir votre site en ligne.

Développement local avec Docker

Si vous n'avez pas Node.js installé localement, vous pouvez utiliser Docker pour exécuter les commandes Angular. Le projet inclut un Dockerfile pour les builds de production.

Qu'est-ce que Docker ?
Docker crée des "conteneurs" isolés contenant tous les logiciels nécessaires (Node.js, npm) sans les installer sur votre ordinateur. Considérez-le comme une machine virtuelle légère.

Prérequis

Installez Docker Desktop pour votre système d'exploitation (Windows, Mac ou Linux).

Exécuter des commandes avec Docker

# Exécuter npm install
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm install

# Exécuter le serveur de développement (accessible sur localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm start

# Construire pour la production
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm run build
Remarque
Docker est facultatif pour le développement local. La plateforme NStrim gère le déploiement automatiquement - vous n'avez besoin de Docker que si vous souhaitez exécuter des commandes localement sans avoir Node.js installé.

Structure du projet

Comprendre où sont situés les fichiers :

├── src/
│   ├── app/
│   │   ├── app.component.ts      # Composant racine
│   │   ├── app.component.html    # Template racine
│   │   ├── app.component.css     # Styles du composant
│   │   ├── app.config.ts         # Configuration de l'app
│   │   └── app.routes.ts         # Configuration du routage
│   ├── index.html                # Fichier HTML principal
│   ├── main.ts                   # Point d'entrée de l'application
│   └── styles.css                # Styles globaux (Tailwind)
├── public/                       # Ressources statiques
├── angular.json                  # Configuration Angular CLI
├── package.json                  # Dépendances et scripts
├── tailwind.config.js            # Configuration Tailwind CSS
├── tsconfig.json                 # Configuration TypeScript
└── Dockerfile                    # Configuration de build Docker

Tâches courantes

Créer un nouveau composant

ng generate component components/my-component

Créer un nouveau service

ng generate service services/my-service

Ajouter une route

Modifiez src/app/app.routes.ts :

import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

Utiliser Tailwind CSS

Tailwind est préconfiguré. Utilisez les classes directement dans vos templates :

<div class="bg-blue-500 text-white p-4 rounded-lg">
  Hello Tailwind!
</div>

Commandes utiles

npm start Démarrer le serveur de développement (port 4200)
npm run build Construire pour la production
npm test Exécuter les tests unitaires
ng generate component Créer un nouveau composant
ng generate service Créer un nouveau service
ng generate --help Lister tous les générateurs disponibles

Dépannage

npm install échoue avec des erreurs de permission

Cause : Problèmes de permission avec le cache npm ou node_modules.

Solution : Supprimez le dossier node_modules et le fichier package-lock.json, puis relancez npm install.

Le port 4200 est déjà utilisé

Cause : Un autre processus utilise le port 4200.

Solution : Utilisez un port différent : ng serve --port 4201 ou arrêtez l'autre processus.

Erreurs Module not found

Cause : Dépendances non installées ou corrompues.

Solution : Exécutez npm install pour installer toutes les dépendances.

Les modifications ne sont pas répercutées dans le navigateur

Cause : Cache du navigateur ou rechargement à chaud non fonctionnel.

Solution : Rechargement forcé (Ctrl+Shift+R ou Cmd+Shift+R) ou redémarrez le serveur de développement.

Le build échoue après le déploiement

Cause : Erreurs de build ou dépendances manquantes.

Solution : Exécutez d'abord npm run build localement pour vérifier les erreurs avant de pousser.

Flux de déploiement

Chaque fois que vous poussez du code vers Git, votre application est automatiquement construite et déployée :

Modification du code git push npm run build Déploiement vers nginx En ligne !

L'URL de votre application déployée suit ce format : 

https://<your-subdomain>-<repo-name>.<session-domain>

Exemple : https://student01-module-a.demo.nstrim.app

Pour plus d'informations, consultez la documentation officielle Angular.