ng serve 正在检查上一个目录中的节点模块

Question

当我尝试使用 ng serve 命令为我的 angular 应用程序提供服务时，它抛出一个错误

An unhandled exception occurred: ENOENT: no such file or directory, lstat 'D:\Ea syParking\node_modules' See "C:\Users\miracle\AppData\Local\Temp\ng-q55p4U\angular-errors.log" for furth er details.

但是我现在的导演是D:\EasyParking\easyparking_UI

谁能帮帮我。提前致谢。

版本

"@angular/cli": "~11.2.7",

angulr.json

{
 "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 "cli": {
 "analytics": false
},
 "version": 1,
 "newProjectRoot": "projects",
 "projects": {
 "parking-web": {
  "projectType": "application",
  "schematics": {
    "@schematics/angular:application": {
      "strict": true
    }
  },
  "root": "",
  "sourceRoot": "src",
  "prefix": "app",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/parking-web",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "aot": true,
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "src/styles.scss",
          "./node_modules/@angular/material/prebuilt-themes/indigo- 
            pink.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/bootstrap4-toggle/css/bootstrap4-toggle.min.css",
          "../node_modules/font-awesome/css/font-awesome.css",
          "../node_modules/pe7-icon/dist/dist/pe-icon-7-stroke.min.css",
          "../node_modules/bootstrap-float-label/dist/bootstrap-float- 
          label.min.css"
        
          
     
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.slim.min.js",
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/bootstrap4-toggle/js/bootstrap4-toggle.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "500kb",
              "maximumError": "1mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "2kb",
              "maximumError": "4kb"
            }
          ]
        }
      }
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "parking-web:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "parking-web:build:production"
        }
      }
    },
    "extract-i18n": {
      "builder": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        "browserTarget": "parking-web:build"
      }
    },
    "test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "main": "src/test.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.spec.json",
        "karmaConfig": "karma.conf.js",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
          "src/styles.scss"
        ],
        "scripts": []
      }
    },
    "lint": {
      "builder": "@angular-devkit/build-angular:tslint",
      "options": {
        "tsConfig": [
          "tsconfig.app.json",
          "tsconfig.spec.json",
          "e2e/tsconfig.json"
        ],
        "exclude": [
          "**/node_modules/**"
        ]
      }
    },
    "e2e": {
      "builder": "@angular-devkit/build-angular:protractor",
      "options": {
        "protractorConfig": "e2e/protractor.conf.js",
        "devServerTarget": "parking-web:serve"
      },
      "configurations": {
        "production": {
          "devServerTarget": "parking-web:serve:production"
        }
      }
    }
  }
}
     },
     "schematics": {
    "@schematics/angular:component": {
    "styleext": "scss"
  }
  },
    "defaultProject": "parking-web"
  }

Answer 1

问题出在您的angular.json。看看你的风格。开头还行

"styles": [
      "src/styles.scss",
      "./node_modules/@angular/material/prebuilt-themes/indigo- 
        pink.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "node_modules/bootstrap4-toggle/css/bootstrap4-toggle.min.css",

但是下面3行指向父文件夹，是相对路径中的../造成的。您必须将其从路径中完全删除或至少删除 ./ 等点之一。如上面 3 行所示。然后它将按预期工作。

这些行指向父文件夹

      "../node_modules/font-awesome/css/font-awesome.css",
      "../node_modules/pe7-icon/dist/dist/pe-icon-7-stroke.min.css",
      "../node_modules/bootstrap-float-label/dist/bootstrap-float- 
      label.min.css"

这样做

      "./node_modules/font-awesome/css/font-awesome.css",
      "./node_modules/pe7-icon/dist/dist/pe-icon-7-stroke.min.css",
      "./node_modules/bootstrap-float-label/dist/bootstrap-float- 
      label.min.css"

或者这样

      "node_modules/font-awesome/css/font-awesome.css",
      "node_modules/pe7-icon/dist/dist/pe-icon-7-stroke.min.css",
      "node_modules/bootstrap-float-label/dist/bootstrap-float- 
      label.min.css"

ng serve 正在检查上一个目录中的节点模块

ng serve is checking nodemodules in previous directory

node-modules

angular