Собрать @Angular_12 без @Angular/cli на WebPack_5

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  entry: {
    'polyfills': './src/polyfills.ts',
    'app': './src/main.ts'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name].[fullhash].js'
  },
  devtool: 'source-map',
  devServer: {
    historyApiFallback: true,
    port: 80,
    open: true
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [ 
      {
        test: /\.ts$/,
        use: [{
            loader: 'ts-loader',
            options: {
              configFile: path.resolve(__dirname, 'tsconfig.json')
            }
          },
          'angular2-template-loader'
        ]
      }, {
        test: /\.html$/,
        loader: 'html-loader'
      }, {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[fullhash].[ext]',
        }
      }, {
        test: /\.css$/,
        exclude: path.resolve(__dirname, 'src/app'),
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }, {
        test: /\.css$/,
        include: path.resolve(__dirname, 'src/app'),
        loader: 'raw-loader'
      }
    ]
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core/,
      path.resolve(__dirname, 'src'), 
      {} 
    ),
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css"
    }),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.LoaderOptionsPlugin({
      htmlLoader: {
        minimize: false
      }
    })
  ]
}

Файл app.component.ts

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


@Component({
    selector: 'my-app',
    template: `<h2>Hello Angular! Welcome Webpack!</h2>`,

})
export class AppComponent { }

Вот так все работает, проблемы и ошибки появляются после изменения файла app.component.ts

пытаюсь реализовать вот так

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


@Component({
    selector: 'my-app',
    template: `<h2>Hello Angular! Welcome Webpack!</h2>`,
    styleUrls: ['./app.component.css']
})
export class AppComponent { }

а потом была ошибка которую я не смог исправить

И вариант с templateUrl

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


@Component({
    selector: 'my-app',
    templateUrl: `./app.component.html`,

})
export class AppComponent { }

помогите исправить и понять суть работы и взаимодействия Angular && webpack