Angular 5及angular/cli 1.6.8中Uncaught ReferenceError: require未定义问题

我之前在使用Angular 5和同版本CLI的时候也碰到过这个问题，结合你给出的配置来看，问题根源主要在TypeScript的模块系统设置上，咱们一步步来搞定：

问题分析 #

你的tsconfig.json里把module设置成了"system"，但Angular CLI 1.6.8默认是用Webpack来打包项目的。SystemJS和Webpack的模块处理逻辑不兼容，require是Node.js环境里的模块加载方法，浏览器本身并不支持，所以就出现了这个报错。

解决方案 #

1. 修改tsconfig.json的模块配置 #

打开你的tsconfig.json，把compilerOptions里的"module": "system"改成"module": "es2015"（推荐）或者"commonjs"：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "allowJs": true,
    "noImplicitAny": false,
    "baseUrl": "./src",
    "module": "es2015", // 这里修改
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "es2015",
      "dom",
      "es5",
      "es6"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

ES2015模块是Angular CLI默认期望的格式，Webpack能完美处理它，不会引入浏览器不认识的require方法。

2. 检查.angular-cli.json的app.scripts配置 #

如果你的项目依赖一些非ES模块的第三方库（比如某些老版本的JS插件），需要把它们的路径添加到app.scripts数组里，这样CLI会把它们打包成全局可用的脚本，比如：

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js"
]

要是没有这类依赖，保持scripts为空数组就好，别在这里引入需要用require加载的模块。

3. 清理缓存并重新构建 #

执行下面的命令清理旧的编译缓存，然后重新构建项目：

ng clean
ng build

有时候旧缓存会残留之前的配置信息，清理后重新构建能确保新的模块设置生效。

额外注意点 #

• 保持moduleResolution为"node"，这个设置是正确的，它让TypeScript按照Node.js的规则解析模块路径。
• 在Angular项目里尽量用ES6的import语法导入模块，别直接用require()，比如：

  import { MyService } from './services/my.service';
  

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