使用TypeScript路径与桶文件时Angular 5模块在JIT模式下未定义

我之前也碰到过一模一样的情况——AoT编译跑起来毫无问题，切到JIT模式直接炸锅，断点一看要导入的模块居然是undefined。结合你提到的用TypeScript路径别名@app/components导入桶文件的场景，大概率是JIT运行时没正确处理别名，或者桶文件的导出环节出了问题，给你几个具体的排查和解决方向：

• 先补全TypeScript路径配置的细节
  打开你的tsconfig.json，检查compilerOptions里的baseUrl和paths是不是同时覆盖了桶文件本身和子路径的映射，比如：

  {
    "compilerOptions": {
      "baseUrl": "./src",
      "paths": {
        "@app/components": ["app/components/index.ts"],
        "@app/components/*": ["app/components/*"]
      }
    }
  }
  

  很多人只配置了子路径的映射，漏了直接指向桶文件的那条，JIT运行时就找不到根路径下的模块导出了。

• 检查桶文件的导出是否完整正确
  打开@app/components对应的index.ts桶文件，确认你要导入的模块已经被正确导出，比如：

  // app/components/index.ts
  export * from './sidebar/sidebar.module';
  export * from './top-nav/top-nav.module';
  // 别漏了你实际要用的那个模块！
  

  有时候不小心删了导出语句，或者拼写错了模块名，AoT编译时会提前检查报错，但JIT是运行时才加载模块，只会返回undefined。

• 让JIT构建工具识别TypeScript路径别名
  如果你用Angular CLI，默认ng serve（JIT模式）应该能识别tsconfig里的路径配置，但如果是自定义Webpack配置，Webpack本身不认识TypeScript的paths，得加个插件来处理：

  // webpack.config.js
  const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
  
  module.exports = {
    resolve: {
      plugins: [new TsconfigPathsPlugin({ configFile: './tsconfig.json' })]
    }
    // ...其他配置项
  };
  

  先跑npm install tsconfig-paths-webpack-plugin --save-dev安装插件，再配置到Webpack里就行。

• 清理缓存后重新构建
  JIT模式下的缓存有时候会搞鬼，先执行ng clean，或者手动删除node_modules/.cache、dist目录，然后重新启动JIT服务，说不定旧缓存导致模块没被正确加载。

• 检查导入语句的大小写和拼写
  浏览器环境是严格大小写敏感的，比如你桶文件里导出的是SidebarModule，但导入时写成了sidebarModule，或者路径里的文件夹名大小写和实际不符，JIT运行时就找不到模块了——AoT编译时可能因为系统文件大小写不敏感没报错，但JIT在浏览器里就会直接出问题。

按这个顺序排查下来，应该能快速定位到问题所在。

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