AngularJS升级Angular4：ngx-restangular安装后导入报404问题

我之前帮不少开发者排查过类似的ngx-restangular导入报错问题，结合你从AngularJS升级到Angular4的场景，大概率是以下几个环节出了问题，咱们一步步来排查解决：

• 确认AppModule的导入配置是否正确
  ngx-restangular作为Angular模块，必须在根模块（AppModule）中正确导入并初始化，不能像AngularJS那样直接注入。示例配置如下：

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { RestangularModule, Restangular } from 'ngx-restangular';
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [AppComponent],
    imports: [
      BrowserModule,
      // 初始化Restangular并配置基础URL等参数
      RestangularModule.forRoot((RestangularProvider) => {
        RestangularProvider.setBaseUrl('你的API基础地址');
        // 可添加其他全局配置，比如请求拦截器、响应拦截器
      })
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• 检查服务中的导入路径是否正确
  很多人会犯的错误是用相对路径去引用node_modules里的包，这会导致路径解析失败。正确的导入方式应该直接引用包名，而非相对路径：

  // 正确的导入
  import { Restangular } from 'ngx-restangular';
  
  // 错误的导入（别这么写！）
  // import { Restangular } from '../../../node_modules/ngx-restangular';
  

• 验证依赖版本是否与Angular4兼容
  ngx-restangular的版本和Angular版本是严格对应的，如果你安装时没有指定适配Angular4的版本，可能不小心装了高版本（比如适配Angular5+的版本），导致兼容性问题。你可以执行以下命令安装适配Angular4的特定版本：

  npm install ngx-restangular@5.0.0 --save
  

  （注：ngx-restangular v5.x系列是专门适配Angular4的版本）

• 清理缓存并重新构建项目
  有时候node_modules缓存或Angular构建缓存会导致奇怪的路径解析问题，执行以下步骤清理后重新构建：

  # 清理npm缓存
  npm cache clean --force
  # 删除现有node_modules和锁文件
  rm -rf node_modules
  rm package-lock.json
  # 重新安装依赖
  npm install
  # 重新启动开发服务器（启用AOT构建验证）
  ng serve --aot
  

• 检查tsconfig.json的模块解析配置
  确保tsconfig.json中的moduleResolution设置为node，这样TypeScript才能正确解析node_modules中的模块：

  {
    "compilerOptions": {
      "moduleResolution": "node",
      // 其他配置项...
    }
  }
  

按照以上步骤逐一排查，应该就能解决导入404的问题了。

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