Angular App - Error when using AzureStaticWebApp step in Azure DevOps pipeline Error: EACCES: permission denied, open '/working_dir/node_modules/@angular/compiler-cli/ngcc/__ngcc_lock_file__'

[vikaskk13]

Hi All,

I am getting the below error using the sample pipeline mentioned in the below link https://docs.microsoft.com/en-us/azure/static-web-apps/publish-devops

ngcc --properties es2015 browser module main --first-only

Error: EACCES: permission denied, open '/working_dir/node_modules/@angular/compiler-cli/ngcc/ngcc_lock_file' at Object.openSync (node:fs:488:3) at Object.writeFileSync (node:fs:1512:35) at NodeJSFileSystem.writeFile (/working_dir/node_modules/@angular/compiler-cli/src/ngtsc/file_system/src/node_js_file_system.js:131:16) at LockFileWithChildProcess.write (/working_dir/node_modules/@angular/compiler-cli/ngcc/src/locking/lock_file_with_child_process/index.js:58:21) at AsyncLocker. (/working_dir/node_modules/@angular/compiler-cli/ngcc/src/locking/async_locker.js:82:65) at step (/working_dir/node_modules/tslib/tslib.js:143:27) at Object.next (/working_dir/node_modules/tslib/tslib.js:124:57) at /working_dir/node_modules/tslib/tslib.js:117:75 at new Promise () at Object.__awaiter (/working_dir/node_modules/tslib/tslib.js:113:16)

[anthonychu]

Can you please share more information on your app? The package.json and the pipeline YAML would be helpful here.

/cc @manekinekko

[vikaskk13]

Building a admin console, using the free angular template.. Package.json { "name": "@coreui/coreui-free-angular-admin-template", "version": "2.11.2", "description": "CoreUI Free Angular 11 Admin Template", "author": { "name": "Łukasz Holeczek", "url": "http://holeczek.pl", "github": "https://github.com/mrholek", "twitter": "https://twitter.com/lukaszholeczek" }, "contributors": [ { "name": "Andrzej Kopański", "url": "https://github.com/xidedix" } ], "homepage": "https://coreui.io/angular", "copyright": "Copyright 2021 creativeLabs Łukasz Holeczek", "license": "MIT", "scripts": { "ng": "ng", "postinstall": "sudo ngcc --properties es2015 browser module main --first-only", "start": "ng serve", "build": "ng build --prod --aot --build-optimizer --common-chunk --vendor-chunk --optimization --progress", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^11.2.5", "@angular/cdk": "^11.2.4", "@angular/common": "^11.2.5", "@angular/compiler": "^11.2.5", "@angular/core": "^11.2.5", "@angular/forms": "^11.2.5", "@angular/localize": "^11.2.5", "@angular/platform-browser": "^11.2.5", "@angular/platform-browser-dynamic": "^11.2.5", "@angular/router": "^11.2.5", "@coreui/angular": "^2.11.2", "@coreui/coreui": "^2.1.16", "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1", "@coreui/icons": "^2.0.0-rc.0", "@coreui/icons-angular": "1.0.0-alpha.3", "bootstrap": "^4.6.0", "chart.js": "^2.9.4", "classlist.js": "^1.1.20150312", "core-js": "^3.9.1", "flag-icon-css": "^3.5.0", "font-awesome": "^4.7.0", "ng2-charts": "^2.4.2", "ngx-bootstrap": "^6.2.0", "ngx-perfect-scrollbar": "^10.1.0", "rxjs": "^6.6.6", "simple-line-icons": "^2.5.5", "ts-helpers": "^1.1.2", "tslib": "^2.0.0", "web-animations-js": "^2.3.2", "zone.js": "~0.10.3" }, "devDependencies": { "@angular-devkit/build-angular": "^0.1102.4", "@angular/cli": "^11.2.4", "@angular/compiler-cli": "^11.2.5", "@angular/language-service": "^11.2.5", "@types/jasmine": "^3.6.6", "@types/jasminewd2": "^2.0.8", "@types/node": "^14.14.33", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~5.2.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", "ts-node": "^8.10.2", "tslint": "~6.1.0", "typescript": "~4.1.5" }, "engines": { "node": ">= 10.13", "npm": ">= 6" } }

Piepleline

trigger:

• master

pool: vmImage: ubuntu-latest

steps:

• task: AzureStaticWebApp@0 inputs: app_location: "/" api_location: "api" output_location: "" env: azure_static_web_apps_api_token: $(deployment_token)

[manekinekko]

The error does not look like an Angular error. It's rather an issue with npm not being able to access files under /working_dir/node_modules/**. Not sure how we can debug this.

@vikaskk13 can you share the link to your repository so we can try to reproduce this?

[vikaskk13]

Hi @manekinekko .. Here is the repo link https://github.com/vikaskk13/adminconsole.git

[vikaskk13]

Hi @manekinekko .. Were you able to reproduce the issue. ? Any updates here please.. ?

[manekinekko]

Hey @vikasapr I eventually investigated this issue and here is what I found.

tl;dr for @anthonychu Oryx's npm install --production was causing part of this issue because it's not installing the necessary devDependencies to build the app.

Node.js 15 & npm 7 issues

The package.json is requiring the latest version of Node.js and npm (ie. node 15 and npm 7). So our build system Oryx was using Node 15 and npm 7 to build your app. This was broken because the dependencies of this app don't support Node 15 and npm 7.

Here is the issue that Oryx was throwing because of this:

npm notice 
npm notice New minor version of npm available! 7.0.14 -> 7.8.0
npm notice Changelog: <https://github.com/npm/cli/releases/tag/v7.8.0>
npm notice Run `npm install -g npm@7.8.0` to update!
npm notice 
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: @coreui/coreui-free-angular-admin-template@2.11.2
npm ERR! Found: @angular/compiler@11.2.8
npm ERR! node_modules/@angular/compiler
npm ERR!   @angular/compiler@"^11.2.5" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@"11.2.9" from @angular/localize@11.2.9
npm ERR! node_modules/@angular/localize
npm ERR!   @angular/localize@"^11.2.5" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /root/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-04-07T19_37_27_525Z-debug.log

In order to fix, I had to change node and npm engine version in the package.json:

  "engines": {
    "node": "~14",
    "npm": "~6"
  }

devDependencies are not installed

By default, Oryx runs the following command when installing npm dependencies: npm install --production. This command doesn't install the devDependencies (in package.json). Which means that the tools necessary to build the app aren't available.

The error that that is thrown because of this is:

sh: 1: ngcc: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! @coreui/coreui-free-angular-admin-template@2.11.2 postinstall: `ngcc --properties es2015 browser module main --first-only`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the @coreui/coreui-free-angular-admin-template@2.11.2 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!     /root/.npm/_logs/2021-04-07T19_45_21_578Z-debug.log

The ngcc binary isn't installed because it's part of the devDependencies. But devDependencies aren't installed!

In order to temporarily unblock you, I had to move these 2 dependencies to the dependencies section on package.json:

  "dependencies": {
    ...
    "@angular/compiler-cli": "^11.2.5",
    "typescript": "~4.1.5"
  },

Result...

After fixing these 2 issues, and following the docs, I managed to deploy the app at https://polite-bush-082991903.azurestaticapps.net/

And here is a screenshot of the Azure DevOps pipelines:

[vikaskk13]

Thanks a lot @manekinekko.. After following the above steps able to deploy site..

[manekinekko]

That's awesome! I am glad this worked for you. Please feel free to close this issue.