arif-b-khan/Angular-Core-Concepts

Provides a simple demo application covering Angular core concepts (components, services, modules, routing)

TypeScript

Angular Core Concepts

This project shows several core features of Angular including:

Components
Data Binding
Communication between components
Services
Routing

Running the Project Locally

Install the Angular CLI

npm install -g @angular/cli
Run npm install at the root of this project
Run ng serve -o

Running the Project Using Docker Containers

Install the Angular CLI

npm install -g @angular/cli
Run npm install at the root of this project
Build the project

ng build
Ensure that you have volumes (file sharing) enabled in the Docker Desktop settings.
Note that this build puts the build files directly in the dist folder. If your angular.json file in your own custom project puts them in a subfolder such as dist/your-project-folder then you'll need to update the docker-compose.yml file. In that case you'd change:
```
volumes:
  - ./dist:/usr/share/nginx/html
```
To:
```
volumes:
  - ./dist/your-project-folder:/usr/share/nginx/html
```
Run docker-compose build
Run docker-compose up
Visit http://localhost

Running the `Production` Version in Containers

Run docker-compose -f docker-compose.prod.yml [build | up]. This uses a multi-stage Docker build process to create the nginx image for the Angular app.

Note: This project build puts the Angular build files directly in the dist folder. If your angular.json file in your own custom project puts them in a subfolder such as dist/your-project-folder then you'll need to update nginx.prod.dockerfile with the appropriate path. You'd need to update this instruction:
```
COPY --from=node /app/dist /usr/share/nginx/html
```
To:
```
COPY --from=node /app/dist/your-project-folder /usr/share/nginx/html
```