ASP.NET Core + Angular SPA VS模板无法运行问题求助

我尝试使用Visual Studio的ASP.NET Core with Angular SPA模板学习Angular，但创建项目后点击运行无法正常启动。最初发现是用户名（John Anthony）包含空格导致的问题，按相关方案处理后仍编译失败，出现以下错误：

Error: Module not found: Error: Can't resolve 'C:/Users/John Anthony/Desktop/Repositories/C#/Flights/Flights/ClientApp/src/app/nav-menu/nav-menu.component.css?ngResource' in 'C:\Users\John Anthony\Desktop\Repositories\C#\Flights\Flights\ClientApp'
Error: Module not found: Error: Can't resolve 'C:\Users\John Anthony\Desktop\Repositories\C#\Flights\Flights\ClientApp\node_modules\webpack-dev-server\client\index.js?protocol=auto%3A&username=&password=&hostname=0.0.0.0&port=0&pathname=%2Fng-cli-ws&logging=info&overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&reconnect=10&hot=false&live-reload=true' in 'C:\Users\John Anthony\Desktop\Repositories\C#\Flights\Flights\ClientApp'
Error: The loader "C:/Users/John Anthony/Desktop/Repositories/C#/Flights/Flights/ClientApp/src/app/nav-menu/nav-menu.component.css" didn't return a string.

注：已尝试卸载重装Node.js、重启电脑，也尝试了相关npm升级方案。

可行解决方案 #

• 迁移项目到无空格/特殊字符的路径
  直接把整个项目移动到不含空格、特殊字符（比如原路径里的C#也可能触发问题）的目录下，例如C:\Projects\Flights。之后：

  1. 删除ClientApp目录下的node_modules文件夹和package-lock.json文件
  2. 打开命令行，切换到ClientApp目录，执行npm install重新安装依赖
  3. 重新在Visual Studio中打开项目并启动

• 重置npm全局路径
  给npm设置无空格的全局安装和缓存目录，避免路径空格影响依赖加载：

  1. 打开管理员命令提示符，执行以下命令：

     npm config set prefix "C:\npm-global"
     npm config set cache "C:\npm-cache"
     

  2. 打开系统环境变量设置，把C:\npm-global添加到PATH变量中
  3. 重启Visual Studio，删除项目的node_modules和package-lock.json，重新执行npm install后启动

• 自定义Webpack配置处理路径
  在ClientApp目录下创建webpack.config.js文件，添加路径解析规则：

  const path = require('path');
  module.exports = {
    resolve: {
      modules: [path.resolve(__dirname, 'node_modules')],
      alias: {
        '@app': path.resolve(__dirname, 'src/app')
      }
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader'],
          include: path.resolve(__dirname, 'src')
        }
      ]
    }
  };
  

  然后修改angular.json文件，在projects -> your-project-name -> architect -> build -> options和serve -> options中添加"webpackConfig": "webpack.config.js"，指定使用自定义配置。

内容的提问来源于stack exchange，提问作者John Phillip Abello