如何配置Angular 5支持模块别名，简化导入并测试私有库？

我明白你想通过设置路径别名来简化导入操作、测试私有库的需求，而且在Angular项目里用ng eject后尝试了tsconfig-paths-webpack-plugin和awesome-typescript-loader却没生效——我之前也踩过类似的坑，给你梳理一套能跑通的配置流程：

1. 先确认tsconfig.json的基础配置 #

首先得确保你的tsconfig.json里已经正确配置了paths和baseUrl，假设你的私有库src文件夹在项目根目录下的libs/my-library/src，那配置应该是这样：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@my-library/*": ["libs/my-library/src/*"],
      "@my-library": ["libs/my-library/src/index.ts"]
    },
    // 其他编译选项（比如target、module等）保持原有配置
  }
}

注意baseUrl要设为项目根目录，paths里的别名要精准对应到你库的src文件夹路径，别写错层级。

2. 配置Webpack（ng eject后的webpack.config.js） #

用ng eject生成的webpack配置不会自动识别tsconfig的路径别名，需要手动添加插件配置：

• 先安装依赖：

npm install tsconfig-paths-webpack-plugin --save-dev

• 打开webpack.config.js，在顶部引入插件：

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

• 找到resolve配置项，新增plugins数组并加入插件：

resolve: {
  extensions: ['.ts', '.js', '.html'],
  plugins: [
    new TsconfigPathsPlugin({
      configFile: './tsconfig.json' // 确保路径指向你的tsconfig文件
    })
  ]
}

这里要注意：插件是加在resolve的plugins下，不是module.rules里。

3. 检查awesome-typescript-loader的配置（如果使用了的话） #

如果你替换了默认的ts-loader用awesome-typescript-loader，要确保它的配置指定了正确的tsconfig文件，避免冲突：

module: {
  rules: [
    {
      test: /\.ts$/,
      loader: 'awesome-typescript-loader',
      options: {
        configFileName: './tsconfig.json'
      },
      exclude: [/\.(spec|e2e)\.ts$/]
    }
  ]
}

4. 验证配置是否生效 #

重启你的开发服务器（npm start），然后在项目里测试导入：

// 原来繁琐的导入
import { MyService } from '../../../../../libs/my-library/src/services/my.service';

// 简化后的导入
import { MyService } from '@my-library/services/my.service';
// 或者直接导入index.ts里导出的内容
import { MyService } from '@my-library';

如果还是报错，排查以下几点：

• 确认tsconfig.json里的paths路径和实际文件夹结构完全匹配
• 检查webpack.config.js里的插件是否正确引入，configFile路径是否正确
• 清理缓存：删除node_modules/.cache文件夹，或者重启IDE（比如VS Code有时候需要重启才能识别新的路径别名）

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