Static-web-apps: Angular build fails with "sh: 1: ngcc: not found"

[jepetko]

Angular build fails with "sh: 1: ngcc: not found"

This is because npm install --unsafe-perm --production is executed to install the dependencies (no dev dependencies installed, thus ngcc (Ivy compiler) is missing).

Log file:

Installing production dependencies in '/github/workspace/.oryx_prod_node_modules'...

Running 'npm install --unsafe-perm --production'...


> [email protected] postinstall /github/workspace/.oryx_prod_node_modules
> ngcc

sh: 1: ngcc: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! [email protected] postinstall: `ngcc`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

app_build_command: npm i --unsafe-perm && npm run build does not help if ngcc is configured like this: "postinstall": "ngcc". It fails during the "npm install" phase initiated by the Azure build itself (Azure/[email protected]).

A workaround might be to move all devDependencies to the dependencies section.

What is the recommended solution here?

[anthonychu]

@shmool recently ran into the same thing. @shmool @johnpapa @manekinekko any thoughts on best way to resolve this?

[shmool]

I moved two dependencies from devDependencies to dependencies: typescript and @angular/compiler-cli.
However, I think the solution should come from Angular. If ngcc is needed - we should have it by default in the dependencies, already compiled to JavaScript. I'll reach out to the Angular team.

[joelcoxokc]

This is not an issue with ngcc.
I am unable to get node commands to run in postinstall either

[joelcoxokc]

Can you please allow us to have an install command before the build runs?

This way I can install the necessary dependencies manually, or at least prevent postinstall from running.

[manekinekko]

Hey @joelcoxokc thank you for reporting this behavior.

You can use the PRE_BUILD_COMMAND env var and provide a script that would run before the build is triggered:

      with:
        azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ORANGE_WAVE_04EEA641E }}
        repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
        action: 'upload'
        app_location: '/'
        api_location: 'api'
        app_artifact_location: 'dist/static'
      env:  
        PRE_BUILD_COMMAND: './scripts/setup-puppeteer.sh'

See an example here with a Scully app: https://github.com/manekinekko/scully-swa/blob/master/.github/workflows/azure-static-web-apps-orange-wave-04eea641e.yml#L31

[oidacra]

Angular build fails with "sh: 1: ngcc: not found"

This is because npm install --unsafe-perm --production is executed to install the dependencies (no dev dependencies installed, thus ngcc (Ivy compiler) is missing).

Log file:

Installing production dependencies in '/github/workspace/.oryx_prod_node_modules'...

Running 'npm install --unsafe-perm --production'...


> [email protected] postinstall /github/workspace/.oryx_prod_node_modules
> ngcc

sh: 1: ngcc: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! [email protected] postinstall: `ngcc`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

app_build_command: npm i --unsafe-perm && npm run build does not help if ngcc is configured like this: "postinstall": "ngcc". It fails during the "npm install" phase initiated by the Azure build itself (Azure/[email protected]).

A workaround might be to move all devDependencies to the dependencies section.

What is the recommended solution here?

@jepetko You fix this problem? Im still with the same problem.

[jepetko]

@oidacra actually, the only solution was to move devDependencies to dependencies.

BTW, I also tried to do this (see https://docs.microsoft.com/en-us/azure/static-web-apps/github-actions-workflow for more information):

          app_build_command: npm i --unsafe-perm && ng build --prod

This did not help either as Azure is always prepending the "npm i" phase (containing the --production switch).

[oidacra]

@oidacra actually, the only solution was to move devDependencies to dependencies.

BTW, I also tried to do this (see https://docs.microsoft.com/en-us/azure/static-web-apps/github-actions-workflow for more information):

          app_build_command: npm i --unsafe-perm && ng build --prod

This did not help either as Azure is always prepending the "npm i" phase (containing the --production switch).

Thanks... I'll try this option.

[jepetko]

It's not nice to have dev dependendencies in the actual (runtime) dependencies but angular will not involve them in the compilation as they are not referenced in the compiled (and packaged) code (no import/require command). Thus, the dev dependencies code is not served by browser anyway.

[georgyevv]

I have the same issue:

Running 'npm install --unsafe-perm --production'...

[email protected] postinstall /github/workspace/.oryx_prod_node_modules/node_modules/core-js
node -e "try{require('./postinstall')}catch(e){}"

[email protected] postinstall /github/workspace/.oryx_prod_node_modules
ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points && node ./decorate-angular-cli.js

sh: 1: ngcc: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! [email protected] postinstall: ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points && node ./decorate-angular-cli.js
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /github/home/.npm/_logs/2021-01-18T00_32_11_942Z-debug.log

---

After I copy the devDependecies in Dependencies I get a new error here it is:

`internal/modules/cjs/loader.js:883
throw err;
^

Error: Cannot find module '/github/workspace/.oryx_prod_node_modules/decorate-angular-cli.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
at Function.Module._load (internal/modules/cjs/loader.js:725:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
at internal/main/run_main_module.js:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points && node ./decorate-angular-cli.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /github/home/.npm/_logs/2021-01-18T09_53_27_589Z-debug.log

---End of Oryx build logs---
Oryx has failed to build the solution.`

[vazsonyidl]

Is there any update on this issue?
Until then, adding typescript and compiler-cli to dependencies is the solution for this?!

Tanks in advance.

[manekinekko]

Can you try this config (see the env section)?

yaml with: azure_static_web_apps_api_token: ${{ secrets.XXXX }} repo_token: ${{ secrets.YYYY }} # Used for Github integrations (i.e. PR comments) action: 'upload' app_location: '/' api_location: 'api' app_artifact_location: 'dist/static' env: DISABLE_NODEJS_BUILD: true CUSTOM_BUILD_COMMAND: 'npm ci' RUN_BUILD_COMMAND: 'npm run build -- --prod'

[dennisameling]

@manekinekko Thanks for the suggestion. This doesn't work however:

DISABLE_NODEJS_BUILD fails the build with:

Detecting platforms...
Platform 'nodejs' has been disabled, so skipping detection for it.
Could not detect any platform in the source directory.
Error: Could not detect the language from repo.

What worked for us is to do the following:

1. Remove "postinstall": "ngcc" from the package.json file. Having the command there is recommended by Angular, though it's not a hard requirement, as it will run at build time as well.
2. Update the Workflow file to add the env section like you mentioned, but with this config:

env:
  CUSTOM_BUILD_COMMAND: 'npm ci && npm run build' 

Just created an issue in the Oryx repo for this: https://github.com/microsoft/Oryx/issues/959

[manekinekko]

@dennisameling I am sorry I should have been more explicit.

The config I shared will disable the Node.js build (DISABLE_NODEJS_BUILD: true) done by Oryx. So you will have to build the app outside of Oryx (in a different step in your workflow file – like usual). The SWA config will then be used for deployment only – That's the extreme scenario!

Also, there might be a change in Angular v12 in the way ngcc is executed. And the ng build will do a prod build by default. I am personally keeping track of these changes.

[anthonychu]

Looks like there’s an opportunity to improve the built-in build commands that Oryx runs. In particular, I don’t think there’s a reason to run the build with --production for the frontend build.

@manekinekko Can you help provide some apps with common Angular configs and some recommendations for how we should best build them?

[manekinekko]

@anthonychu all Angular apps are built using the ng build --prod command. This is provided by the Angular CLI. All other ways of building Angular apps are considered as custom and therefor the user is responsible for the build pipeline.

The issue reported here is not related to the build step, but with the npm install. The ngcc postinstall script is a temporary workaround while Angular is transitioning to the new templating engine, and should be removed in future versions.

I do agree that we could try to remove the --production flag when npm installing the frontend app. This can be left to the user to add.

[dennisameling]

The config I shared will disable the Node.js build (DISABLE_NODEJS_BUILD: true) done by Oryx. So you will have to build the app outside of Oryx (in a different step in your workflow file – like usual). The SWA config will then be used for deployment only – That's the extreme scenario!

Can confirm that works, we just build it separately now and use the action only to upload the dist files. Thanks @manekinekko! 🚀

[manekinekko]

@dennisameling that's awesome. Glad to hear it's working.

We are working hard on improving the build experience for most Web frameworks.
Thank you for your feedback.