How to deploy Angular 4 web application to Google Cloud Platform?

[nyannko]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [x] question

Versions.

@angular/cli: 1.0.2
node: 6.9.2
os: linux x64
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.0.2
@angular/compiler-cli: 4.1.3

Repro steps.

I followed the steps in this article Build a web app using Google Cloud Platform, but I met some problems when I ran this command to deploy the web app.

gcloud app deploy --version v1

The error shows 'ng not found'. How can I deal with it? Should I change the npm start command? Or build my own docker file and push to Google Cloud? I have node and npm installed(both meet requirement), as well as angular/cli.

The log given by the failure.

Updating service [default]...failed.                                                                                                                            
ERROR: (gcloud.app.deploy) Error Response: [9] 
Application startup error:
> loklak-message-publisher@0.0.0 start /app
> ng serve
sh: 1: ng: not found
npm ERR! Linux 3.16.0-4-amd64
npm ERR! argv "/nodejs/bin/node" "/nodejs/bin/npm" "start"
npm ERR! node v6.10.3
npm ERR! npm  v3.10.10
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! loklak-message-publisher@0.0.0 start: `ng serve`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the loklak-message-publisher@0.0.0 start script 'ng serve'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the loklak-message-publisher package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ng serve
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs loklak-message-publisher
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls loklak-message-publisher
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR!     /app/npm-debug.log

[nyannko]

I've solved that by deploying a docker image to Google Cloud.

[GNrosen]

I just received the same exact error while trying to deploy my Angular App on the Google Cloud Platform. Did you deploy a docker image to that one specific instance? Is there a way to deploy it only in the specific directory that your app is in? Thanks in advance for your help.

[nyannko]

@GNrosen Yes, here is how I deploy the docker image. As you can see in my Dockerfile in line 12, the command add all files in current directory to docker image directory. You can see the document here.

[boredcorpguys]

Great!! this works. Thanks.

[egarson]

Docker is awesome.
If you don't happen to be using Docker, this link provides one deployment solution to vanilla App Engine, and although slightly dated, I have used it successfully with Angular 5.1.6. Interestingly, it uses the Python runtime.
HTH

[lal-verma]

I was facing the same error. I moved following dependencies from devDependencies to dependencies (in package.json) and it worked.
"@angular/compiler-cli": "^6.0.2",
"@angular/cli": "~6.0.3",

[maaaaaaaax]

If anyone still has this issue, I compiled the Angular components locally (with ng build), removed the /dist folder from my gitignore file, then committed the NodeJS project with pre-built Angular dist files.

It's not a great solution, but the pages render now, and I didn't have to bother with Docker or changing my dependencies ¯_(ツ)_/¯

[NicolaSpreafico]

I'm trying to deploy an Angular application on a Google App Engine Flexible service with NodeJS runtime, but I'm getting the same error.

@maaaaaaaax I tried your solution, I compiled locally with ng build and the folder dist was created.
I then tried to deploy, on Cloud Console the version is shown, but I got an error during deploy:

Updating service [*****] (this may take several minutes)...failed.
ERROR: (gcloud.app.deploy) Error Response: [9]
Application startup error:

> Sidel@6.0.0 start /app
> ng serve --port 9090

sh: 1: ng: not found

QUESTION 1
I got this configuration in my package.json, do I need to edit them to make it work your suggestion?

"scripts": {
    "ng": "ng",
    "start": "ng serve --port 9090",
    "build": "ng build --prod --build-optimizer --aot",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

I'm using a pre-built Angular Theme, named Fury: https://themeforest.net/item/fury-angular-2-material-design-admin-template/19325966

ALSO...

I tried copying dependencies to node, as suggested by @albeever from devDependencies to `dependencies:

"@angular/cli": "~6.0.1",
"@angular/compiler-cli": "~6.0.0",
"@angular-devkit/build-angular": "~0.6.1",

I added angular-devkit/build-angular also because I got

Could not find module "@angular-devkit/build-angular" from "/app".` error)

The deploy worked successfully but the request ends with timeout error, calling host:9090 I got a timeout from browser.
QUESTION 2 Do I need an additional configuration?

ALSO...

An alternative solution can be using a `Dockerfile' (I did not tried yet) like suggested here https://stackoverflow.com/a/48612427
QUESTION 3 Can this be a suitable way?

Thanks

[MarcinZielinski]

I've added these two scripts to package.json:

"deploy": "gcloud app deploy",
"start": "node app.js" // in place of old start script (change app.js to the name of your own node server file. Also remove this comment.)

and it works like a charm! Gcloud was trying to launch server with start script and now, instead of executing ng serve it is doing node app.js, so ng is not needed anymore. I'm not sure if deploy script is needed, but I wasn't trying without it.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}