Ionic 3应用生产构建失败：共享组件路径解析问题

我之前也碰到过一模一样的情况——开发时共享组件的路径解析明明好好的，一跑生产构建就弹出Cannot find module错误，折腾了好一阵才搞定，给你几个排查和解决的方向：

• 确认生产构建是否读取了正确的tsconfig配置
  很多项目里会有专门的tsconfig.prod.json用于生产构建，这个文件如果没有继承根目录tsconfig里的路径映射，就会导致解析失败。检查你的tsconfig.prod.json，确保它包含共享组件的路径配置，比如：

  {
    "extends": "./tsconfig.json",
    "compilerOptions": {
      "paths": {
        "@shared/*": ["../SharedComponents/*"]
      }
    }
  }
  

  如果没有单独的prod配置文件，那就确认根目录tsconfig里的paths是写在compilerOptions下，且路径是相对于tsconfig文件的正确相对路径。

• 给生产构建命令显式指定tsconfig
  Ionic 3的生产构建会启用AOT编译，它的路径解析逻辑和开发模式略有不同。尝试在构建命令里明确指定要使用的tsconfig文件：

  ionic build --prod --tsconfig ./tsconfig.json
  

  另外还要注意：共享组件里的文件必须都是.ts后缀，且导入/导出语法不能有错误——开发模式可能会宽容一些，但生产AOT编译会严格校验。

• 自定义webpack配置补充路径别名
  如果上面的方法没用，可以直接修改webpack的解析配置。在项目根目录创建webpack.config.js（没有的话新建一个），添加如下内容：

  const path = require('path');
  
  module.exports = {
    resolve: {
      alias: {
        '@shared': path.resolve(__dirname, '../SharedComponents')
      }
    }
  };
  

  这样webpack在生产构建时就能直接识别到共享组件的路径。

• 统一导入路径的写法
  检查所有导入共享组件的代码，确保全用的是tsconfig里配置的别名（比如@shared/ButtonComponent），不要混合使用相对路径（比如../../SharedComponents/ButtonComponent）——生产构建时混合路径很容易导致解析混乱。

• 清理缓存后重新构建
  有时候缓存会引发奇怪的解析问题，先彻底清理缓存再试：

  ionic cache clean
  rm -rf node_modules/.cache
  rm -rf www
  

  之后重新安装依赖并执行生产构建：npm install && ionic build --prod

我当时就是因为tsconfig.prod.json没继承根配置的paths，补上之后就完全正常了，希望这些方法能帮到你。

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