如何通过npm管理在Angular2-CLI项目间导出导入模块（非硬拷贝）

嘿，这个需求我之前帮好几个开发者搞定过——不用硬拷贝模块，靠npm本地关联+TypeScript的导出导入就能完美实现，咱们一步步来：

首先得把你要迁移的模块从源项目里抽出来，做成一个可复用的npm包：

• 在源项目根目录外（或者源项目内单独目录，看你习惯）新建一个文件夹，比如叫my-shared-module，把目标模块的组件、服务、模板、样式文件都移进去。
• 进入这个文件夹，运行npm init，一路回车生成package.json——记得把main字段指向你的模块入口（比如"main": "./dist/index.js"），再加个types字段指定TypeScript类型入口："types": "./src/index.ts"。
• 写一个入口文件src/index.ts，把要对外暴露的内容全部export出来，比如：

// 导出整个模块，方便直接导入使用
export { SharedModule } from './shared.module';
// 也可以单独导出组件、服务，按需使用
export { UserService } from './services/user.service';
export { SearchComponent } from './components/search.component';

• 确保这个包的依赖和两个项目匹配，比如Angular、TypeScript的版本要和源/目标项目一致，避免版本冲突。

npm的link命令能帮我们把本地包当成npm依赖引入，不用发布到远程仓库：

• 先在my-shared-module目录里运行：npm link，这会把这个包注册到你的本地npm仓库。
• 切换到目标项目的根目录，运行：npm link my-shared-module（这里的名字要和你刚才npm init时填的name字段完全一致）。执行完后，目标项目的node_modules里就会出现这个本地包的软链接。

现在就可以像用普通npm包一样导入这个模块了：

• 打开目标项目的AppModule（或者你要引入的其他业务模块），直接import刚才导出的模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 直接用包名导入，和用第三方包一样
import { SharedModule } from 'my-shared-module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, SharedModule], // 把SharedModule加入imports数组
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 之后你就能在目标项目里直接用模块里的内容了：比如在组件模板里写<app-search></app-search>，或者在服务里注入UserService。

因为是本地软链接，修改源模块的代码后，只要重新编译这个模块（如果是Angular CLI生成的库，直接运行ng build my-shared-module --watch就能实时编译），目标项目会自动感知到变化，不需要手动拷贝文件，开发体验和在同一个项目里开发一样。

• 两个项目的Angular、TypeScript版本尽量保持一致，不然容易出现编译错误或者类型不兼容的问题。
• 如果遇到“找不到类型定义”的报错，检查my-shared-module的package.json里是否正确设置了types字段，或者是否把.d.ts文件包含在了包的files字段里。
• 后续如果要部署到生产环境，可以把这个共享模块发布到私有npm仓库（比如Verdaccio），然后目标项目直接通过npm install my-shared-module安装，就不用依赖本地链接了。

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