Angular Universal项目中can't resolve fs问题求助

Hey there! Let's break down your questions and tackle that annoying can't resolve fs issue in your Angular Universal project.

1. Is your judgment correct? #

Absolutely right! Your understanding is spot-on. The Angular CLI wraps up webpack's configuration by default—there's no exposed, standalone webpack config file that directly controls the browser-side build out of the box. The webpack.config.js in your project is specifically for bundling the server.ts file (your Universal server-side code), so any changes you make there won't affect the browser build pipeline. That's exactly why adding fs: 'empty' to that file didn't fix your error—it never applied to the browser bundle.

2. Can you define a webpack configuration file for Angular CLI's use? #

You bet! To customize the webpack config that the Angular CLI uses for browser builds, you'll need to use the @angular-builders/custom-webpack tool to extend the default CLI config. Here's how to do it step by step:

Step 1: Install the required dependency #

Run this command in your project root to add the custom webpack builder:

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

Step 2: Create your custom webpack config file #

Make a new file named webpack.custom.config.js in your project root, with this content:

module.exports = {
  resolve: {
    fallback: {
      fs: false, // Using 'empty' works here too—both tell webpack to skip resolving fs for the browser
      // Add other Node.js modules you might need to exclude here (like path, os, etc.)
    }
  }
};

Step 3: Update angular.json to use the custom builder #

Open your angular.json file, and update the builder fields for the build and serve targets to use the custom webpack builder. Also, add a customWebpackConfig entry to point to your new config file.

Here's what the modified sections might look like:

"build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "./webpack.custom.config.js"
    },
    // Keep all your existing build options (outputPath, index, main, styles, etc.) as they are
  }
},
"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
  // Keep your existing serve options intact
}

Bonus: Adjust server-side config (if needed) #

If you also need to tweak the webpack config for your Universal server bundle, you can update the server target in angular.json to use @angular-builders/custom-webpack:server and link the same or a separate custom config file.

One quick note about dom-storage: If you're using it to mimic browser storage on the server, make sure your code only imports/uses it in the server-side context (like in server.ts or server-only services) to avoid pulling it into the browser bundle accidentally.

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