Angular Core Concepts

This project shows several core features of Angular including:

• Components
• Data Binding
• Communication between components
• Services
• Routing

Running the Project Locally

1. Install the Angular CLI

   npm install -g @angular/cli

2. Run npm install at the root of this project

3. Run ng serve -o

Running the Project Using Docker Containers

1. Install the Angular CLI

   npm install -g @angular/cli

2. Run npm install at the root of this project

3. Build the project

   ng build

4. Ensure that you have volumes (file sharing) enabled in the Docker Desktop settings.

5. 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

6. Run docker-compose build

7. Run docker-compose up

8. Visit http://localhost

Running the Production Version in Containers

1. 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