Webpack报错：选择器"my-app"未匹配元素——VS中Angular项目配置问题

这个报错本质是Angular启动时找不到用来挂载根组件的DOM元素，结合你的Webpack配置，我梳理了几个核心修复点：

1. 完善HtmlWebpackPlugin的配置 #

你的配置里只引入了HtmlWebpackPlugin但没指定模板文件，Webpack会自动生成一个空的HTML文件，里面根本没有<my-app>标签，Angular自然找不到挂载点。

修改你的webpack.config.js，给插件添加模板配置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 注意：Angular应用的入口通常是main.ts，不是index.ts，这里先修正路径
const source = path.resolve(__dirname, 'src', 'main.ts');
const destination = path.resolve(__dirname, 'dist');

module.exports = {
    entry: source,
    output: {
        filename: 'index.js',
        path: destination
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [
            { test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader'] }
        ]
    },
    // 添加HtmlWebpackPlugin的完整配置
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'src', 'index.html'), // 指定你的HTML模板路径
            inject: 'body' // 将打包后的JS注入到body末尾
        })
    ]
};

2. 确保HTML模板包含<my-app>标签 #

在src/index.html里添加根组件的挂载元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Angular App</title>
</head>
<body>
    <!-- 这是Angular根组件的挂载点 -->
    <my-app></my-app>
</body>
</html>

3. 确认入口文件正确引导Angular应用 #

你的入口文件应该是src/main.ts，里面要包含启动Angular应用的代码，确保它指向正确的根组件选择器：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

同时检查你的根组件（比如app.component.ts）的选择器是否是my-app：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app', // 必须和HTML里的标签一致
  template: '<h1>Hello Angular!</h1>'
})
export class AppComponent { }

4. 额外检查点 #

• 清理dist目录后重新执行构建命令（webpack或npm run build），避免旧文件干扰
• 确保tsconfig.json里的编译选项符合Angular要求，比如设置"module": "esnext"、"target": "ES2020"等

按照上面的步骤调整后，Angular就能找到<my-app>元素并正常挂载应用了。

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