Angular 17 无法使用 vite dev-server 进行调试

Question

我有一个 Angular 16 应用程序，已成功升级到 17。该应用程序是完全独立的。 当我尝试在 vsCode 中调试它时，从调试菜单启动 ngserve 会构建应用程序并启动它。 Vite 显示本地 url 并显示一些可用的命令。 但浏览器没有启动，我可以在底部看到“正在构建...”仍然处于活动状态。 更奇怪的是，如果我退出开发服务器（q + Enter），浏览器会立即启动，但应用程序当然会在此时关闭。 从头开始创建一个新的应用程序当然可行，但这对我来说不是一个选择，因为该应用程序太大了。 我按照所有说明从 16 升级了它，我必须修改 tsconfigs 和 angular.json，因为它们非常不同，我的问题是，从我所看到的来看，我没有任何方法可以了解 vite 内部发生的情况来了解什么是错误的。 有人可以给我指点一些文档，或者解释一下在哪里可以找到 vite 配置、vite 输出吗？

这是我的 angular.json：

  {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "dottnet": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "changeDetection": "OnPush",
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "dottnet",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/dottnet_client",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "externalDependencies": [
              "canvas"
            ],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss",
              "src/themes.scss"
            ],
            "scripts": [],
            "extractLicenses": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "production": {
              "server": "./src/main.server.ts",
              "prerender": false,
              "ssr": {
                "entry": "server.ts"
              },
                "fileReplacements": [
                {
                  "replace": "src-server/configure/config.ts",
                  "with": "src-server/configure/config.prod.ts"
                },
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "namedChunks": true,
              "extractLicenses": true,
              "budgets": [
                {
                  "type": "bundle",
                  "name": "polyfills",
                  "baseline": "150kb",
                  "maximumWarning": "50kb",
                  "maximumError": "100kb"
                },
                {
                  "type": "bundle",
                  "name": "styles",
                  "baseline": "280kb",
                  "maximumWarning": "50kb",
                  "maximumError": "100kb"
                },
                {
                  "type": "bundle",
                  "name": "main",
                  "baseline": "2200kb",
                  "maximumWarning": "100kb",
                  "maximumError": "200kb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ]
            },
            "staging": {
              "server": "./src/main.server.ts",
              "prerender": false,
              "ssr": {
                "entry": "server.ts"
              },
                "fileReplacements": [
                {
                  "replace": "src-server/configure/config.ts",
                  "with": "src-server/configure/config.staging.ts"
                },
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.server.staging.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "namedChunks": true,
              "extractLicenses": true,
              "budgets": [
                {
                  "type": "bundle",
                  "name": "polyfills",
                  "baseline": "150kb",
                  "maximumWarning": "50kb",
                  "maximumError": "100kb"
                },
                {
                  "type": "bundle",
                  "name": "styles",
                  "baseline": "280kb",
                  "maximumWarning": "50kb",
                  "maximumError": "100kb"
                },
                {
                  "type": "bundle",
                  "name": "main",
                  "baseline": "2200kb",
                  "maximumWarning": "100kb",
                  "maximumError": "200kb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ]
            },
            "development": {
              "fileReplacements": [
                {
                  "replace": "src-server/configure/config.ts",
                  "with": "src-server/configure/config.dev.ts"
                },
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.server.dev.ts"
                }
              ]

            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {},
          "configurations": {
            "production": {
              "buildTarget": "dottnet:build:production"
            },
            "staging": {
              "buildTarget": "dottnet:build:staging"
            },
            "development": {
              "buildTarget": "dottnet:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "dottnet:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss",
              "src/themes.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "test": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.test.ts"
                }
              ]
            }
          }
        },
        "e2e": {
          "builder": "@cypress/schematic:cypress",
          "options": {
            "devServerTarget": "dottnet:serve",
            "watch": true,
            "headless": false
          },
          "configurations": {
            "production": {
              "devServerTarget": "dottnet:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "**/*.ts",
              "**/*.html"
            ]
          }
        },
        "cypress-run": {
          "builder": "@cypress/schematic:cypress",
          "options": {
            "devServerTarget": "dottnet:serve",
            "configFile": "cypress.config.js"
          },
          "configurations": {
            "production": {
              "devServerTarget": "dottnet:serve:production"
            }
          }
        },
        "cypress-open": {
          "builder": "@cypress/schematic:cypress",
          "options": {
            "watch": true,
            "headless": false,
            "configFile": "cypress.config.js"
          }
        },
        "ct": {
          "builder": "@cypress/schematic:cypress",
          "options": {
            "devServerTarget": "dottnet:serve",
            "watch": true,
            "headless": false,
            "testingType": "component"
          },
          "configurations": {
            "development": {
              "devServerTarget": "dottnet:serve:development"
            }
          }
        }
      }
    }
  },
  "cli": {
    "analytics": false,
    "cache": {
      "enabled": true,
      "path": ".cache",
      "environment": "all"
    },
    "schematicCollections": [
      "@cypress/schematic",
      "@angular-eslint/schematics",
      "@schematics/angular",
      "@ngrx/schematics"
    ]
  },
  "schematics": {
    "@angular-eslint/schematics:application": {
      "setParserOptionsProject": true
    },
    "@angular-eslint/schematics:library": {
      "setParserOptionsProject": true
    }
  }
}

我的 tsconfig.json：

{
    "compileOnSave": false,
    "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "importHelpers": true,
    "module": "esnext",
    "target": "ES2022",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2021",
      "dom"
    ],
    "useDefineForClassFields": false
  },
    "angularCompilerOptions": {
        "fullTemplateTypeCheck": true,
        "strictInjectionParameters": true,
        //"strictTemplates": true,
    }
}

我的 tsconfig.app.json

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
      "outDir": "./out-tsc/app",
      "types": ["node","gtag.js","googletag"],
      "strictPropertyInitialization": false,
  
    },
    "files": [
      "src/main.ts",
      "src/main.server.ts",
      "server.ts", 
      "src/polyfills.ts"
    ],
    "include": [
      "src/**/*.d.ts"
    ]
  }
  

Answer 1

我找到了解决方案。 事实证明，vite dev-server nedds的npm配置略有不同：tasks.json中的start。这是对我有用的：

{
    // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
    "version": "2.0.0",
    "tasks": [
      {
        "type": "npm",
        "script": "start",
        "isBackground": true,
        "problemMatcher": {
          "owner": "typescript",
          "pattern": "$tsc",
          "background": {
            "activeOnStart": true,
            "beginsPattern": {
              "regexp": "(.*?)"
            },
            "endsPattern": {
              "regexp": "bundle generation complete"
            }
          }
        }
      },
      {
        "type": "npm",
        "script": "test",
        "isBackground": true,
        "problemMatcher": {
          "owner": "typescript",
          "pattern": "$tsc",
          "background": {
            "activeOnStart": true,
            "beginsPattern": {
              "regexp": "(.*?)"
            },
            "endsPattern": {
              "regexp": "bundle generation complete"
            }
          }
        }
      }
    ]
  }