Webpack+Express+Angular 4报错：找不到C:\public\index.html文件求助

Alright, let's break down this error—it's telling you your Express app is looking for index.html directly in your C: drive root (C:\public) instead of your project's actual public directory. This is almost always a path resolution mistake, especially since you're running a bundled Express app from the dist folder. Here's how to fix it step by step:

1. Update Your Express Static Resource Path #

The biggest culprit here is likely hardcoded or relative paths in app.js that don't account for where your bundled bundle.js runs (from the dist folder). Instead of relying on fragile relative paths or absolute C: drive paths, use Node.js's __dirname to dynamically resolve the correct path.

First, import the path module at the top of app.js:

const path = require('path');

Then replace your existing static resource setup (like app.use(express.static('public')) or a hardcoded C:\public) with this:

// Point Express to the public folder inside your dist directory
app.use(express.static(path.join(__dirname, 'public')));

__dirname always points to the directory of the currently executing script (which is dist for bundle.js). Using path.join ensures the path is formatted correctly across operating systems, resolving to [your-project-root]/dist/public—exactly where your Webpack-copied static assets live.

2. Ensure Webpack Copies the Public Folder to Dist #

If your dist/public folder isn't getting populated with Angular's built assets, Express will still throw an error even with the correct path. Use the copy-webpack-plugin to copy the root public folder into dist during bundling:

1. Install the plugin first:

npm install copy-webpack-plugin --save-dev

2. Add it to your webpack.config.js:

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // ... your existing Webpack config
  plugins: [
    // ... other plugins
    new CopyWebpackPlugin({
      patterns: [
        { from: './public', to: './public' } // Copy root/public to dist/public
      ]
    })
  ]
};

Now when you bundle your Express code with Webpack, it'll automatically copy Angular's built assets from the root public folder into dist/public.

3. Verify Angular's Build Output Path #

Double-check that your ng build command (I assume bg build was a typo) outputs assets to the root public folder. For Angular 4, check your .angular-cli.json file for the outDir setting:

{
  "apps": [
    {
      "outDir": "../public",
      // ... other Angular config
    }
  ]
}

Make sure outDir points to ../public relative to your client-side-angular-code folder, so the build outputs directly to your project's root public directory.

4. Confirm Your Execution Context #

When running your Express app, stick to either:

• Running node dist/bundle.js from your project root directory, or
• Navigating into the dist folder and running node bundle.js

Either way, the __dirname trick will ensure the path resolves correctly—no more searching in C:\public!

After making these changes, rebuild your Angular app with ng build, re-bundle your Express code with Webpack, and run the app—your ENOENT error should be resolved.

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