使用 Github Actions 将 Angular 应用程序部署到 Azure 失败。 找不到 package.json

Question

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}'"

> core-js@3.6.4 postinstall D:\a\SleepDiary\SleepDiary\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> @angular/cli@10.1.3 postinstall D:\a\SleepDiary\SleepDiary\node_modules\@angular\cli
> node ./bin/postinstall/script.js

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: 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


> sleep-diary@0.0.0 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

> sleep-diary@0.0.0 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

Answer 1

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.