angular

Complete deployment guide for angular on NStrim

Overview

Angular is a TypeScript-based web application framework developed by Google. It provides a comprehensive solution for building dynamic single-page applications with a component-based architecture.

Before You Start
Make sure you have your dashboard open - you'll need the Git credentials displayed there. This template includes Tailwind CSS for styling.

Quick Start

1

Create Repository from Template

On your dashboard, go to the Tools & Deployment tab. Click the "New Repository" button, select the Angular template from the dropdown, enter a repository name and subdomain, then click "Create Repository".

2

Clone Your Repository

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

Install Dependencies

npm install
4

Start Development Server

npm start

Open http://localhost:4200 in your browser.

5

Build & Push

npm run build
git add .
git commit -m "Initial setup"
git push origin main
Every push to Git automatically deploys your application. Check your Module Work URL on the dashboard to see your live site.

Local Development with Docker

If you don't have Node.js installed locally, you can use Docker to run Angular commands. The project includes a Dockerfile for production builds.

What is Docker?
Docker creates isolated "containers" with all the software you need (Node.js, npm) without installing them on your computer. Think of it like a lightweight virtual machine.

Prerequisites

Install Docker Desktop for your operating system (Windows, Mac, or Linux).

Running Commands with Docker

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

# Run development server (accessible at localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm start

# Build for production
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm run build
Note
Docker is optional for local development. The NStrim platform handles deployment automatically - you only need Docker if you want to run commands locally without Node.js installed.

Project Structure

Understanding where files are located:

├── src/
│   ├── app/
│   │   ├── app.component.ts      # Root component
│   │   ├── app.component.html    # Root template
│   │   ├── app.component.css     # Component styles
│   │   ├── app.config.ts         # App configuration
│   │   └── app.routes.ts         # Routing configuration
│   ├── index.html                # Main HTML file
│   ├── main.ts                   # Application entry point
│   └── styles.css                # Global styles (Tailwind)
├── public/                       # Static assets
├── angular.json                  # Angular CLI configuration
├── package.json                  # Dependencies and scripts
├── tailwind.config.js            # Tailwind CSS configuration
├── tsconfig.json                 # TypeScript configuration
└── Dockerfile                    # Docker build configuration

Common Tasks

Creating a New Component

ng generate component components/my-component

Creating a New Service

ng generate service services/my-service

Adding a Route

Edit 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 }
];

Using Tailwind CSS

Tailwind is pre-configured. Use classes directly in your templates:

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

Useful Commands

npm start Start development server (port 4200)
npm run build Build for production
npm test Run unit tests
ng generate component Create a new component
ng generate service Create a new service
ng generate --help List all available generators

Troubleshooting

npm install fails with permission errors

Cause: Permission issues with npm cache or node_modules.

Solution: Delete node_modules folder and package-lock.json, then run npm install again.

Port 4200 already in use

Cause: Another process is using port 4200.

Solution: Use a different port: ng serve --port 4201 or stop the other process.

Module not found errors

Cause: Dependencies not installed or corrupted.

Solution: Run npm install to install all dependencies.

Changes not reflecting in browser

Cause: Browser cache or live reload not working.

Solution: Hard refresh (Ctrl+Shift+R or Cmd+Shift+R) or restart the dev server.

Build fails after deployment

Cause: Build errors or missing dependencies.

Solution: Run npm run build locally first to check for errors before pushing.

Deployment Workflow

Every time you push code to Git, your application is automatically built and deployed:

Code Change git push npm run build Deploy to nginx Live!

Your deployed application URL follows this format: 

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

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

For more information, visit the official Angular Documentation.