Конфигурация Webpack4 с проблемой angularJS с загрузчиком HTML

Question

Я хотел бы запустить приложение с angularjs в комплекте с веб-пакетом 4. У меня вывод из консоли:

Вам может понадобиться соответствующий загрузчик для обработки этого типа файла

Моя конфигурация выглядит так:

package.json

 "devDependencies": {
    "@babel/core": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "@types/node": "^11.11.3",
    "@webpack-cli/init": "^0.1.5",
    "babel-loader": "^8.0.4",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "css-loader": "^1.0.1"**,
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "ts-loader": "^5.3.3",
    "uglifyjs-webpack-plugin": "^2.1.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"

webpack.dev.conf.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {
  prodPath,
  srcPath
} = require('./path');

const sassPreprocessor = {  
  fileRegexp: /\.(sass|scss|css)$/,
  loaderName: 'sass-loader'
}

module.exports = {
  entry: {
      main: `./${srcPath}/index.ts`
  },
  resolve: {
      extensions: [".ts", ".js"]
  },
  output: {
      path: path.join(__dirname, prodPath),
      filename: '[name].[chunkhash].js'
  },
  devtool: 'source-map',
  devServer: {
      open: true
  },
  module: {
    rules: [
      {
        test: /\.ts?$/,
        loader: 'ts-loader',
        exclude: [/node_modules/]
      },
      {
        test: sassPreprocessor.fileRegexp,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          }, 
          {
          loader: 'css-loader',
            options: {
              modules: false,
              sourceMap: true
            }
          },
          {
            loader: sassPreprocessor.loaderName,
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.css'
    }),
    new HtmlWebpackPlugin({
      inject: false,
      hash: false,
      template: `./${srcPath}/index.html`,
      filename: 'index.html'
    })
  ]
};

path.js

const prodPath = '../dist';
const srcPath = 'app';

module.exports = {
  prodPath,
  srcPath
}

webpack.config.js

const env = process.env.NODE_ENV;

module.exports = env => {
    console.log(`?️  running ${env} Mode using ./webpack/webpack.${env}.js ?️`);
    return require(`./webpack/webpack.${env}.js`);
}

index.ts

import { TodoAppModule } from './src/todo-app.module';
import './styles/main.scss';

export {
    TodoAppModule
}

TODO-app.module.ts

import * as angular from 'angular';
import { TodoListComponent } from './todo/todo-list.component';


export const TodoAppModule = angular.module('todoApp', [])
    .component('todoList', TodoListComponent);

in index.html я внедряю пакетный код с помощью команды:
<script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
и стили с помощью команды:
<link rel="stylesheet" href="<%=htmlWebpackPlugin.files.chunks.main.css %>"

Может кто-нибудь помочь мне с этим вопросом? Я попытался прочитать некоторую документацию по конфигурации на официальной странице веб-пакета, но это не работает для меня. Я видел несколько примеров конфигурации с angularjs и webpack, но эти решения здесь не работают. Буду рад, если появятся интересные статьи с настройкой веб-пакета

Сообщение об ошибке:

ERROR in ./app/src/todo/todo-list.component.html 1:0  
Module parse failed: Unexpected token (1:0)  
You may need an appropriate loader to handle this file type.  
<div>  
    123  
</div>
@ ./app/src/todo/todo-list.component.ts 3:28-65  
@ ./app/src/todo-app.module.ts  
@ ./app/index.ts  
@ multi (webpack)-dev-server/client?http://localhost:8080 ./app/index.ts  

TODO-list.component.html

<div>
    123
</div>