I can't seem to make angular work

Hello,

I like this devilbox a lot, I have used it to develop some symfony 4 web apps, and it works like a charm.

Now I would like to use it to develop Angular applications, but I can’t make it work. You will find below the methods I have tried to make it work without luck :frowning:

Here are the steps I did on my first try :

  1. Launch the httpd, php, and bind container with : host> docker-compose -d httpd php bind

  2. Connect to the php container with shell.bat

  3. Execute command : php-container /shared/httpd> ng new my-app

  4. This creates my angular app in the folder my-app

  5. I followed the steps to create a reversed-proxy vhost available the documentation (adapting to angular structure) :

  6. Created a virtual htdocs directory in folder my-app

  7. Added reverse proxy vhost-gen config files in my-app/.devilbox directory

  8. I adjusted the ports for nginx and apache in the vhost-gen files :
    For nginx :

     vhost: |
         server {
             ...
             location / {
                 proxy_set_header Host $host;
                 proxy_set_header X-Real-IP $remote_addr;
                 proxy_pass http://php:4200;
             }
             ...
    

For Apache 2.4 :

vhost: |
    <VirtualHost __DEFAULT_VHOST__:__PORT__>
    ServerName __VHOST_NAME__
    Protocols  __HTTP_PROTO__
    ...
    ProxyRequests On
    ProxyPreserveHost On
    ProxyPass / http://php:4200/
    ProxyPassReverse / http://php:4200/
  1. The I created a autostart script which is available here :

     # devilbox/autostart/run_angular_projects.sh
     ANGULAR_PROJECTS=(
         "/shared/httpd/my-app/angular.json",
     )
    
     # Check if any projects have been defined
     if [ ${#ANGULAR_PROJECTS[@]} -eq 0 ]; then
         echo "No projects defined. Exiting."
         exit 0
     fi
    
     for item in ${ANGULAR_PROJECTS[*]}; do
         ANGULAR_APP_PATH="$( dirname "${item}" )"
     
         if [ ! -d "${ANGULAR_APP_PATH}" ]; then
             >&2 echo "[Warning], skipping startup, directory does not exist: ${ANGULAR_APP_PATH}"
             continue;
         fi
    
         echo "================================================================="
         echo "===================== LAUNCHING ANGULAR APP ====================="
         echo "================================================================="
         echo "su -c \"cd ${ANGULAR_APP_PATH}; ng serve\" -l devilbox"
         cd ${ANGULAR_APP_PATH} 
         ng serve
     done
    
  2. Added the dns record in hosts file (127.0.0.1 my-app.loc)

  3. Relauched the containers with :

    docker-compose stop
    docker-compose rm -f
    docker-compose up -d httpd php mysql
    
  4. 2 problems here occur. The first one is the httpd server launching before php is really ready, so httpd server doesn’t work well. The second problem is when I try to access http://my-app.loc, it doesn’t work and i get a forbidden error from nginx, or a service unavailable from apache.

  5. Afterwards I deactivated the automatic launch script and lauched the ng serve inside the php container. Even with this, I can’t access to the site (it should be the default angular welcome page, but i still get a forbidden from nginx, and service unavailable from apache)

  6. I tried to map the 4200 port to the 4200 local port from within the php service in docker-compose.yml, but this doesn’t work also.

  7. I tried to use the docker-compose.override.yml file with no more success.

  8. here is for example an error log from the file my-app-error.log :

     2019/05/07 22:49:42 [error] 253#253: *70 connect() failed (111: Connection refused) while connecting to upstream, client: 172.16.238.1, server: my-app.loc, request: "GET / HTTP/1.1", upstream: "http://172.16.238.10:4200/", host: "my-app.loc"
    

The translation to the right port is occuring, but I can’t access the site.

The autostart script works also because at the end i have the line that says listening to http://localhost:4200/ within the container.

I am now out of ideas. It would be great if you would have some suggestions or some working example of angular over devilbox.

Thank you

Can you drop a very simple hello world Angular application here, I will give it a shot.

Hello!

Was this issue solved?

I have the same problem trying the run an Angular project.
I have set everything as in the instruction here https://devilbox.readthedocs.io/en/latest/examples/setup-reverse-proxy-nodejs.html
When I add in the “file run-node-js-projects.sh” the line /shared/httpd/angular/angular.json I can’t start DevilBox by localhost.

Proxy Error
The proxy server received an invalid response from an upstream server.
The proxy server could not handle the request GET /index.php.

Reason: DNS lookup failure for: php

Hi guys,

So I got it working, while getting a 403 at first as well. I’ve actually followed dodomomo’s steps until step 11. I’ve also skipped step 9.

What I did differently is:

  • at step 7. Make sure that you didn’t just copy the nginx.yml-example-rproxy but also renamed it to nginx.yml. After figuring out how stupid I was for not changing it and restarting docker-compose I immediately fixed the 403.
  • So instead of step 9 I just shelled (.shell.sh) into devilbox and ran ng serve.
  • However, when going to the url of my angular project I received a 502 Bad Gateway. To fix this 502 I had to run ng serve --host 0.0.0.0 --disableHostCheck. Now everything works as expected :slight_smile:
2 Likes

This also worked for me, thanks a lot :wink: