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

Коллеги, пытаюсь собрать сбоку Angular_12 без Angular/cli на основе Webpack_5.

Хорошо знаком с AngularJs и знаю как импортировать Css, HTML, .... и остальное

Но в данной сборке не могу понять, как импортировать и подключать css && html

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'), // путь к каталогу выходных файлов - папка public
    publicPath: '/',
    filename: '[name].[fullhash].js'
  },
  devtool: 'source-map',
  devServer: {
    historyApiFallback: true,
    port: 80,
    open: true
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [ //загрузчик для ts
      {
        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