blfuentes
Reputation: 2827
Deploying angular app to Azure with Github Actions failed. package.json not found
I am trying to deploy an Angular(10) WebApp to Azure with CI/CD using the Github Actions but I get an error saying the package.json cannot be found while running the npm install command.
This is my yml file
name: Deploy to Azure with Hexa.ru
on:
push:
branches:
- main
- release/*
jobs:
build:
runs-on: windows-latest
strategy:
matrix:
node-version: [12.x]
steps:
- uses: actions/checkout@v1
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: npm install
run: |
npm --prefix D:\home\site\wwwroot\SleepDiary\package.json install
- name: npm build, and deploy
env:
AZURE_SERVICE_PRINCIPAL_ID: ${{ secrets.AZURE_SERVICE_PRINCIPAL_ID }}
AZURE_SERVICE_PRINCIPAL_PASSWORD: ${{ secrets.AZURE_SERVICE_PRINCIPAL_PASSWORD }}
AZURE_SERVICE_PRINCIPAL_TENANT: ${{ secrets.AZURE_SERVICE_PRINCIPAL_TENANT }}
run: |
npm run hexa:login
npm run build -- --prod
npm run hexa:deploy
And the error:
Run npm --prefix D:\home\site\wwwroot\SleepDiary\package.json install
npm --prefix D:\home\site\wwwroot\SleepDiary\package.json install
shell: C:\Program Files\PowerShell\7\pwsh.EXE -command ". '{0}'"
npm ERR! code ENOLOCAL
npm ERR! Could not install from "" as it does not contain a package.json file.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\npm\cache\_logs\2020-09-28T06_32_50_591Z-debug.log
Error: Process completed with exit code 1.
I also tried without the parameter --prefix and the error remains (similar)
Run npm install
npm install
shell: C:\Program Files\PowerShell\7\pwsh.EXE -command ". '{0}'"
npm WARN saveError ENOENT: no such file or directory, open 'D:\a\SleepDiary\SleepDiary\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'D:\a\SleepDiary\SleepDiary\package.json'
npm WARN SleepDiary No description
npm WARN SleepDiary No repository field.
npm WARN SleepDiary No README data
npm WARN SleepDiary No license field.
I've checked the path in the azure console of my appservice and it should be
D:\home\site\wwwroot\SleepDiary (you can ignore the dist folder, I created a kudu deployment that works just for testing but I want to achieve the same result with github actions)
Any idea how to make it run?
UPDATE
I moved the code to the upper folder in the repository as suggested but the github action still cannot continue. It gets stuck after the ng test It doesn't throw any error, just remains there for more than hour.
Run npm install
npm install
npm run build --if-present
npm run test --if-present
shell: C:\Program Files\PowerShell\7\pwsh.EXE -command ". '{0}'"
> [email protected] postinstall D:\a\SleepDiary\SleepDiary\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> @angular/[email protected] postinstall D:\a\SleepDiary\SleepDiary\node_modules\@angular\cli
> node ./bin/postinstall/script.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
added 1494 packages from 1234 contributors and audited 1499 packages in 79.932s
found 0 vulnerabilities
> [email protected] build D:\a\SleepDiary\SleepDiary
> ng build
Compiling @angular/core : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/cdk/clipboard : es2015 as esm2015
Compiling @angular/cdk/platform : es2015 as esm2015
Compiling @angular/cdk/bidi : es2015 as esm2015
Compiling @angular/cdk/collections : es2015 as esm2015
Compiling @angular/cdk/scrolling : es2015 as esm2015
Compiling @angular/cdk/drag-drop : es2015 as esm2015
Compiling @angular/cdk/keycodes : es2015 as esm2015
Compiling @angular/cdk/observers : es2015 as esm2015
Compiling @angular/cdk/a11y : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/material/core : es2015 as esm2015
Compiling @angular/cdk/portal : es2015 as esm2015
Compiling @angular/cdk/overlay : es2015 as esm2015
Compiling @angular/material/form-field : es2015 as esm2015
Compiling @angular/material/autocomplete : es2015 as esm2015
Compiling @angular/material/badge : es2015 as esm2015
Compiling @angular/cdk/layout : es2015 as esm2015
Compiling @angular/material/bottom-sheet : es2015 as esm2015
Compiling @angular/material/button-toggle : es2015 as esm2015
Compiling @angular/material/card : es2015 as esm2015
Compiling @angular/material/checkbox : es2015 as esm2015
Compiling @angular/material/chips : es2015 as esm2015
Compiling @angular/cdk/stepper : es2015 as esm2015
Compiling @angular/material/button : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/material/icon : es2015 as esm2015
Compiling @angular/material/stepper : es2015 as esm2015
Compiling @angular/material/dialog : es2015 as esm2015
Compiling @angular/cdk/text-field : es2015 as esm2015
Compiling @angular/material/input : es2015 as esm2015
Compiling @angular/material/datepicker : es2015 as esm2015
Compiling @angular/cdk/accordion : es2015 as esm2015
Compiling @angular/material/expansion : es2015 as esm2015
Compiling @angular/material/grid-list : es2015 as esm2015
Compiling @angular/material/divider : es2015 as esm2015
Compiling @angular/material/list : es2015 as esm2015
Compiling @angular/material/menu : es2015 as esm2015
Compiling @angular/material/progress-bar : es2015 as esm2015
Compiling @angular/material/progress-spinner : es2015 as esm2015
Compiling @angular/material/radio : es2015 as esm2015
Compiling @angular/material/sidenav : es2015 as esm2015
Compiling @angular/material/slider : es2015 as esm2015
Compiling @angular/material/slide-toggle : es2015 as esm2015
Compiling @angular/material/snack-bar : es2015 as esm2015
Compiling @angular/cdk/table : es2015 as esm2015
Compiling @angular/material/select : es2015 as esm2015
Compiling @angular/material/tooltip : es2015 as esm2015
Compiling @angular/material/paginator : es2015 as esm2015
Compiling @angular/material/sort : es2015 as esm2015
Compiling @angular/material/table : es2015 as esm2015
Compiling @angular/material/tabs : es2015 as esm2015
Compiling @angular/material/toolbar : es2015 as esm2015
Compiling @angular/cdk/tree : es2015 as esm2015
Compiling @angular/material/tree : es2015 as esm2015
chunk {main} main.js, main.js.map (main) 35.6 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 139 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 168 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 6.03 MB [initial] [rendered]
Date: 2020-09-29T06:44:33.715Z - Hash: d5c650f4ac85337a8e18 - Time: 17250ms
> [email protected] test D:\a\SleepDiary\SleepDiary
> ng test
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015
29 09 2020 06:44:54.035:WARN [karma]: No captured browser, open http://localhost:9876/
29 09 2020 06:44:54.041:INFO [karma-server]: Karma v5.2.3 server started at http://localhost:9876/
29 09 2020 06:44:54.042:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
29 09 2020 06:44:54.047:INFO [launcher]: Starting browser Chrome
29 09 2020 06:45:03.234:WARN [karma]: No captured browser, open http://localhost:9876/
29 09 2020 06:45:07.874:INFO [Chrome 85.0.4183.102 (Windows 10)]: Connected on socket zXnYWqIDSNfH7VtIAAAA with id 11289129
Chrome 85.0.4183.102 (Windows 10): Executed 0 of 7 SUCCESS (0 secs / 0 secs)
Chrome 85.0.4183.102 (Windows 10): Executed 1 of 7 SUCCESS (0 secs / 0.003 secs)
Chrome 85.0.4183.102 (Windows 10): Executed 2 of 7 SUCCESS (0 secs / 0.003 secs)
Chrome 85.0.4183.102 (Windows 10): Executed 3 of 7 SUCCESS (0 secs / 0.004 secs)
Chrome 85.0.4183.102 (Windows 10): Executed 4 of 7 SUCCESS (0 secs / 0.004 secs)
Chrome 85.0.4183.102 (Windows 10): Executed 5 of 7 SUCCESS (0 secs / 0.087 secs)
ERROR: ''mat-sidenav-container' is not a known element:
1. If 'mat-sidenav-container' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
Chrome 85.0.4183.102 (Windows 10): Executed 5 of 7 SUCCESS (0 secs / 0.087 secs)
ERROR: ''mat-sidenav-container' is not a known element:
1. If 'mat-sidenav-container' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
ERROR: ''mat-sidenav' is not a known element:
1. If 'mat-sidenav' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
Chrome 85.0.4183.102 (Windows 10): Executed 5 of 7 SUCCESS (0 secs / 0.087 secs)
ERROR: ''mat-sidenav' is not a known element:
1. If 'mat-sidenav' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
ERROR: ''mat-sidenav-content' is not a known element:
1. If 'mat-sidenav-content' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
Chrome 85.0.4183.102 (Windows 10): Executed 5 of 7 SUCCESS (0 secs / 0.087 secs)
ERROR: ''mat-sidenav-content' is not a known element:
1. If 'mat-sidenav-content' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
Chrome 85.0.4183.102 (Windows 10): Executed 6 of 7 SUCCESS (0 secs / 0.104 secs)
Chrome 85.0.4183.102 (Windows 10): Executed 7 of 7 SUCCESS (0 secs / 0.11 secs)
Chrome 85.0.4183.102 (Windows 10): Executed 7 of 7 SUCCESS (0.14 secs / 0.11 secs)
TOTAL: 7 SUCCESS
TOTAL: 7 SUCCESS
Upvotes: 1
Views: 1094
Answers (1)
Jason Pan
Reputation: 21838
Your question, obviously, is the wrong path of the package.json file.
Why is your package.json file in the SleepDiary directory.
Under normal circumstances, the file path should look like this.
Under Linux, the package.json file should exist in the wwwroot folder after release, and it should also be like this locally:
The solution is to move the package.json file out of the SleepDiary folder. Because it is not clear why you have the SleepDiary folder, and what is inside, please try it first. If it is convenient, you can update the screenshot of your directory structure. In the question, we can help you better.
Under normal circumstances, it is recommended to deploy the ng10 project through FTP or zip, because after personal testing, no matter under the linux or windows platform, the ng build command will be executed, and the content in the dist folder generated after the build is really to be released. document.
Upvotes: 1
Related Questions
- Azure pipeline to build angular JS app Bundle failing - npm ERR! missing script: D:\a\1\s/bundle.js
- Azure DevOps - Angular project build failing with error: Npm failed with return code: 3
- Building Release Pipeline in Azure DevOps with Angular Application - cannot find working folder that contains package.json
- FAILED to deploy ASP.NET Core / Angular app to Azure from Github repository
- Deploy default angular application on azure from github gives error
- Deployment of Angular project from GitHub to Azure App Service
- Deploying AngularJS app to Azure via github not working
- Azure Continuous deployment failed with Github when deploying an Angular 2 project
- AZURE Web Apps: deploying Angular SPA & Node Express server from Github repository
- Node version error while deploying Angular2 app on Azure