跟随Aurelia教程安装nprogress后出现脚本错误，求排查方向

嘿，咱们来解决你在Aurelia联系人管理器教程里遇到的nprogress加载错误问题。既然你用的是ESNext，而且代码完全复制自教程，那我整理了几个关键的排查步骤：

1. 确认nprogress已正确安装 #

首先检查你的package.json文件，看看dependencies里有没有"nprogress"这个依赖项。如果没有，先重新安装：

npm install nprogress --save

要是用Yarn的话就执行：

yarn add nprogress

2. 检查Aurelia的模块配置是否到位 #

因为你用的是ESNext，Aurelia需要明确知道如何解析第三方模块：

• 如果你用Aurelia CLI，打开aurelia_project/aurelia.json，确认nprogress已经被添加到dependencies数组中，配置大概是这样的：

  "dependencies": [
    // 其他已有的依赖...
    {
      "name": "nprogress",
      "path": "../node_modules/nprogress",
      "main": "nprogress",
      "resources": [
        "nprogress.css" // 如果用到进度条样式的话，别忘了加这个
      ]
    }
  ]
  

• 如果是手动配置SystemJS的项目，要在systemjs.config.js里添加nprogress的映射规则：

  System.config({
    map: {
      // 其他映射...
      'nprogress': 'npm:nprogress/nprogress.js'
    },
    packages: {
      // 其他包配置...
      'npm:nprogress': {
        main: 'nprogress.js',
        defaultExtension: 'js'
      }
    }
  });
  

3. 验证导入语句是否正确 #

在你的loading-indicator元素文件里，确认导入nprogress的语句没有拼写错误：

import nprogress from 'nprogress';
// 如果需要加载样式，还要加这行
import 'nprogress/nprogress.css';

注意模块名是全小写的nprogress，别写错大小写或者多余字符。

4. 清理缓存并重启开发服务 #

有时候模块缓存会导致加载异常，试试这几步：

• 关掉当前运行的开发服务器
• 删除项目根目录下的node_modules/.cache文件夹（如果存在的话）
• 重新执行npm start或者yarn start启动服务

5. 检查nprogress的文件是否存在 #

手动去node_modules目录里找nprogress文件夹，确认里面有nprogress.js和对应的CSS文件。如果文件缺失，可能是安装过程出了问题，可以删除node_modules和package-lock.json（或yarn.lock），然后重新执行npm install/yarn install重新安装所有依赖。

内容的提问来源于stack exchange，提问作者Waku-2