升级至Angular v6报错：无法解析'fs'模块问题求助

这个问题我之前帮不少开发者解决过——本质是Angular v6升级后，webpack 4的打包策略变了：它不再默认将Node.js核心模块（比如fs）纳入浏览器端的打包范围，毕竟浏览器环境根本没有fs这个API。而你的translate-universal-loader.service.ts里直接引入了fs，在ng serve（浏览器端开发服务）运行时，webpack会尝试解析这个模块，自然就报找不到的错误了。

给你几个层层递进的解决方案，按顺序试就行：

1. 优先：用环境判断隔离服务器端代码 #

最规范的做法是，在服务里通过Angular的平台判断工具，只在服务器端加载fs，浏览器端完全不碰它：

import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
import { isPlatformServer } from '@angular/common';

@Injectable()
export class TranslateUniversalLoaderService {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    if (isPlatformServer(this.platformId)) {
      // 只在服务器端环境下才加载fs
      const fs = require('fs');
      // 这里写你的fs读取翻译文件的逻辑
    }
  }
}

这样浏览器端打包时，require('fs')这行代码不会被执行，webpack也就不会去解析fs模块了。

2. 确保服务只在服务器端模块提供 #

再检查一下你的模块配置：这个加载器服务应该只在app.server.module.ts里声明提供，而客户端的app.module.ts用另一个适配浏览器的加载器（比如官方的TranslateHttpLoader）。这样浏览器端打包时，根本不会包含这个服务的代码，从根源避免问题。

3. 兜底：自定义webpack配置忽略浏览器端的fs #

如果上面的方法都没解决，就直接告诉webpack在浏览器环境下把fs模块设为空：

1. 先安装自定义webpack构建工具：

   npm install @angular-builders/custom-webpack --save-dev
   

2. 在项目根目录创建webpack.config.js，内容如下：

   module.exports = {
     node: {
       fs: 'empty'
     }
   };
   

3. 修改angular.json的构建配置，替换默认builder并引入自定义配置：

   "build": {
     "builder": "@angular-builders/custom-webpack:browser",
     "options": {
       "customWebpackConfig": {
         "path": "./webpack.config.js"
       },
       // 保留你原来的其他build配置...
     }
   }
   

   注意：服务器端的构建（architect -> server）不用改，因为服务器端确实需要fs。

内容的提问来源于stack exchange，提问作者David Dal Busco