Giter VIP home page Giter VIP logo

angular-core-concepts's Introduction

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. Run docker-compose build

  6. Run docker-compose up

  7. Visit http://localhost

Running the Production Version in Containers

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

  2. Run docker-compose -f docker-compose.prod.yml up and visit http://localhost.

  3. Run docker-compose -f docker-compose.prod.yml down once you're done.

angular-core-concepts's People

Contributors

danwahlin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

angular-core-concepts's Issues

ERROR: Service 'nginx' failed to build : Build failed

I'm having problems when I try to run this command on Mac $ docker-compose -f docker-compose.prod.yml build.

npm ERR! code ERR_SOCKET_TIMEOUT
npm ERR! network Socket timeout
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2021-10-24T16_09_20_853Z-debug.log

executor failed running [/bin/sh -c npm install]: exit code: 1
ERROR: Service 'nginx' failed to build : Build failed

And when I run command $ docker-compose -f docker-compose.prod.yml up this interface is shown.

Captura de ecrã 2021-10-24, às 17 59 09

Example doesn't work on Windows

I came here because of your awsome video tutorial on CloudSkills.io. Today I cloned this repo on my Windows machine. I saw that cadvisor had been disabled, because it is linux only. I can spin up with docker compose, but I get an authorisation issue. This is what I do:

D:\git\Angular-Core-Concepts>docker-compose up -d
Creating network "angular-core-concepts_app-network" with driver "bridge"
Creating angular-node-service ... done                                                                                  Creating nginx-angular        ... done                                                                                  
D:\git\Angular-Core-Concepts>docker-compose logs -f
Attaching to nginx-angular, angular-node-service
angular-node-service | Express listening on port 3000.
nginx-angular | 2020/04/11 12:20:11 [error] 6#6: *1 directory index of "/usr/share/nginx/html/" is forbidden, client: 172.26.0.1, server: , request: "GET / HTTP/1.1", host: "localhost"
nginx-angular | 172.26.0.1 - - [11/Apr/2020:12:20:11 +0000] "GET / HTTP/1.1" 403 555 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36" "-"

The version I use has sha 8ea2566.

I didn't expect this error. /usr/share/nginx/html is the directory inside of the nginx container.

Any idea what could be going on?

Getting ERR_CONNECTION-REFUSED error

Thank you for this repo. It has helped me a lot with learning Docker, and by watching your great courses on Pluralsight.

After running the docker-compose, everything works great on my Host laptop (Windows 10), however when I browse to the same app from another laptop (Mac) that I have at home (both running in my home network), the Angular and Nginx works fine, but the Angular cannot connect to Node api container. I get ERR_CONNECTION-REFUSED error as show below.

err

Have you seen this type of error before?

Thank you

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.