Angular 7项目配置Webpack后仅显示‘App ready’却不渲染组件，启动后出现空白页的解决方法

看起来你遇到的问题主要出在Webpack配置的几个细节上，尤其是devServer设置、文件路径处理和Webpack 5兼容性问题，我帮你梳理下具体的修复步骤：

1. 修正入口文件路径 #

你的Webpack配置中context已经设置为项目根目录，但entry里的路径用了绝对路径（/src/polyfills.ts），这会导致Webpack从磁盘根目录开始查找文件，而非项目根目录。修改为相对路径：

entry: {
    'polyfills': './src/polyfills.ts',
    'app': './src/main.ts'
},

2. 修复devServer配置问题 #

你当前的devServer配置存在两处问题：

• 多余的代理配置会导致请求循环，直接删除
• inline: false会触发iframe模式，导致地址栏出现/webpack-dev-server/

修改后的devServer配置：

devServer: {
    inline: true, // 启用inline模式，避免iframe路径
    historyApiFallback: true,
    port: 4200,
    open: true,
    openPage: '/' // 强制打开浏览器时指向根路径
},

3. 移除Webpack 5中废弃的插件 #

你的配置里用了几个Webpack 5已经淘汰的插件，会导致构建报错：

• 移除webpack.NoEmitOnErrorsPlugin：Webpack 5中optimization.noEmitOnErrors默认已开启
• 移除webpack.LoaderOptionsPlugin：将html-loader的配置移到对应的rule中

修改html-loader的rule：

{ 
    test: /\.html$/, 
    loader: 'html-loader',
    options: { minimize: false } // 原LoaderOptionsPlugin中的配置移到这里
},

4. 清理冗余的ContextReplacementPlugin配置 #

你的plugins里有重复且路径错误的上下文替换插件，只保留正确的一个即可：

plugins: [
    new HtmlWebpackPlugin({ template: 'src/index.html' }),
    new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)esm5/, path.join(__dirname, './src')),
    new webpack.DefinePlugin({ config: JSON.stringify({ apiUrl: 'http://localhost:4200' }) }),
    new MiniCssExtractPlugin({ filename: "[name].css" }),
]

5. 解决Webpack版本兼容性问题 #

你使用了Webpack 5搭配Webpack Dev Server 3.x，这两个版本存在兼容性冲突，Webpack 5需要Webpack Dev Server 4.x：

npm install webpack-dev-server@latest --save-dev

同时更新package.json中的dev脚本：

"dev": "webpack serve --mode development --open",

6. 可选：调整SystemJS模块配置 #

如果你的应用是独立运行的Angular项目（而非作为SystemJS模块被引入），建议移除output中的libraryTarget: "system"，避免不必要的模块加载逻辑：

output:{
    path: path.resolve(__dirname, 'dist'), 
    publicPath: '/',
    filename: '[name].js'
},

验证修复步骤 #

1. 清理旧构建产物：rm -rf dist（Windows系统用rmdir /s dist）
2. 运行npm run dev，此时浏览器应该直接打开http://localhost:4200/，并正常加载Angular应用

如果仍有问题，可以查看浏览器控制台的错误信息，通常会提示缺失模块或加载失败的文件，根据错误进一步排查即可。

内容的提问来源于stack exchange，提问作者Леонид Дубравский