如何在Angular 14中使用fork的ngx-material-file-input库

一、先本地构建你fork的库（核心步骤） #

直接通过GitHub地址安装的是未编译的源码，Angular无法直接识别引用，必须先完成库的构建：

• 克隆你fork的4.0.1版本仓库到本地，进入仓库根目录
• 安装库的依赖：npm install
• 执行Angular库构建命令：ng build ngx-material-file-input（注意：如果库的项目名称不同，以仓库中angular.json里projects下的名称为准）
• 构建完成后，进入生成的dist/ngx-material-file-input目录，执行npm pack，会生成一个类似ngx-material-file-input-4.0.1.tgz的本地包文件

二、在你的Angular项目中安装本地构建的包 #

放弃直接从GitHub安装的方式，改用本地包安装，确保依赖包含编译好的产物和类型定义：

• 打开你的Angular14项目根目录，执行：

  npm install /本地路径/到/你的/fork仓库/dist/ngx-material-file-input/ngx-material-file-input-4.0.1.tgz
  

  替换为实际的本地包路径即可。

三、正确导入并使用库 #

安装完成后，在app.module.ts中正常导入模块：

import { NgxMaterialFileInputModule } from 'ngx-material-file-input';

@NgModule({
  imports: [
    // ...其他模块
    NgxMaterialFileInputModule
  ]
})
export class AppModule { }

此时不会再出现“找不到引用”的提示，因为node_modules中已经有了编译好的库文件和对应的类型声明。

四、适配Angular15的后续调整 #

等在Angular14中验证库可以正常使用后，就可以升级项目到Angular15：

• 升级项目依赖：ng update @angular/core@15 @angular/cli@15 @angular/material@15
• 如果出现依赖版本不兼容的报错，回到你fork的库中，修改package.json里的peerDependencies，将@angular/core、@angular/material等依赖的版本范围调整为^14.0.0 || ^15.0.0，然后重新执行构建、打包、安装的流程即可。

内容的提问来源于stack exchange，提问作者Marco Nuñez