Angular 4项目添加@progress/kendo-scrollview包遇404错误求助

我正尝试在Angular 4项目中添加@progress/kendo-angular-scrollview包，却遇到了以下404错误：

Error: (SystemJS) XHR error (404) loading https://127.0.0.1:470/node_modules/@progress/kendo-angular-scrollview/dist/cdn/js/kendo-angular-scrollview.js
Error: XHR error (404) loading https://127.0.0.1:470/node_modules/@progress/kendo-angular-scrollview/dist/cdn/js/kendo-angular-scrollview.js
at XMLHttpRequest.wrapFn (https://127.0.0.1:470/node_modules/zone.js/dist/zone.js:1166:39)
at ZoneDelegate.invokeTask (https://127.0.0.1:470/node_modules/zone.js/dist/zone.js:421:31)
at Zone.runTask (https://127.0.0.1:470/node_modules/zone.js/dist/zone.js:188:47)
at ZoneTask.invokeTask [as invoke] (https://127.0.0.1:470/node_modules/zone.js/dist/zone.js:496:34)
at invokeTask (https://127.0.0.1:470/node_modules/zone.js/dist/zone.js:1517:14)
at XMLHttpRequest.globalZoneAwareCallback (https://127.0.0.1:470/node_modules/zone.js/dist/zone.js:1554:21)
Error loading https://127.0.0.1:470/node_modules/@progress/kendo-angular-scrollview/dist/cdn/js/kendo-angular-scrollview.js as "@progress/kendo-angular-scrollview" from https://127.0.0.1:470/src/app/app.module.js
at XMLHttpRequest.wrapFn (https://127.0.0.1:470/node_modules/zone.js/dist/zone.js:1166:39)
at ZoneDelegate.invokeTask (https://127.0.0.1:470/node_modules/zone.js/dist/zone.js:421:31)
at Zone.runTask (https://127.0.0.1:470/node_modules/zone.js/dist/zone.js:188:47)
at ZoneTask.invokeTask [as invoke] (https://127.0.0.1:470/node_modules/zone.js/dist/zone.js:496:34)
at invokeTask (https://127.0.0.1:470/node_modules/zone.js/dist/zone.js:1517:14)
at XMLHttpRequest.globalZoneAwareCallback (https://127.0.0.1:470/node_modules/zone.js/dist/zone.js:1554:21)
Error loading https://127.0.0.1:470/node_modules/@progress/kendo-angular-scrollview/dist/cdn/js/kendo-angular-scrollview.js as "@progress/kendo-angular-scrollview" from https://127.0.0.1:470/src/app/app.module.js

我已经执行了以下步骤来添加该包：

• 安装包：npm install --save@progress/kendo-scrollview
• 在package.json中添加：@progress/kendo-angular-scrollview": "2.0.0
• 在system.js中配置：'@progress/kendo-angular-scrollview': 'npm:@progress/kendo-angular-scrollview/dist/cdn/js/kendo-angular-scrollview.js'
• 在App.module中导入：import { ScrollViewModule } from '@progress/kendo-angular-scrollview';，并在@NGModule的imports数组中添加scrollviewModule

请问我是否遗漏了什么步骤？谢谢！

咱们一步步排查并修复问题：

1. 修正安装命令的语法错误
   你原来的安装命令缺少空格，正确的命令应该是：

   npm install --save @progress/kendo-angular-scrollview
   

   注意--save和包名之间必须有空格，且包名是@progress/kendo-angular-scrollview（不是kendo-scrollview），这是第一个容易踩的坑。

2. 检查SystemJS配置的文件路径
   404错误说明系统找不到指定路径的文件，你需要先确认node_modules/@progress/kendo-angular-scrollview/dist/cdn/js/目录下是否真的存在kendo-angular-scrollview.js。如果路径不对，比如实际文件在dist/npm目录下，要修改SystemJS配置：

   '@progress/kendo-angular-scrollview': 'npm:@progress/kendo-angular-scrollview/dist/npm/js/kendo-angular-scrollview.js'
   

   更通用的Kendo组件配置方式推荐这样写：

   map: {
     '@progress/kendo-angular-scrollview': 'npm:@progress/kendo-angular-scrollview',
   },
   packages: {
     '@progress/kendo-angular-scrollview': {
       main: './dist/npm/js/kendo-angular-scrollview.js',
       defaultExtension: 'js'
     }
   }
   

3. 修正模块导入的大小写错误
   JavaScript是大小写敏感的，你在AppModule中导入的是ScrollViewModule，但imports数组里写的是scrollviewModule，必须保持一致：

   import { ScrollViewModule } from '@progress/kendo-angular-scrollview';
   
   @NgModule({
     imports: [
       // 其他模块...
       ScrollViewModule // 首字母大写，与导入的模块名完全匹配
     ]
   })
   export class AppModule { }
   

4. 安装必要的依赖包
   Kendo Angular ScrollView依赖其他Kendo核心包，你需要确保这些依赖也已安装：

   npm install --save @progress/kendo-angular-common @progress/kendo-angular-intl @progress/kendo-angular-l10n @progress/kendo-drawing @progress/kendo-theme-default
   

   另外要注意，Angular 4和2.0.0版本的kendo-angular-scrollview是否兼容？可以查看package.json中的peerDependencies确认版本匹配，必要时降级到兼容版本。

5. 清理缓存并重启服务器
   执行以下命令清理缓存并重新安装依赖，然后重启开发服务器：

   npm cache clean --force
   rm -rf node_modules package-lock.json
   npm install
   ng serve --open
   

6. 修复package.json的语法错误
   你原来的package.json配置缺少开头的引号，正确格式应该是：

   "dependencies": {
     // 其他依赖...
     "@progress/kendo-angular-scrollview": "2.0.0",
     // 其他必要依赖
   }
   

按照以上步骤逐一检查修复，应该就能解决404加载错误了。

内容的提问来源于stack exchange，提问作者Angular