Angular - при попытке импорта угловой шаблон показывает ошибку 404

Question

Я искал во всей SO любое решение этой проблемы, каждый ответ один и тот же: проверьте правильность относительного пути к вашему шаблону. Моя проблема в том, что я тестирую все возможные пути в разных папках, и это неважно, во всех папках мой шаблон не находится, возвращая ошибку 404.

Вкладка консоли

вкладка "Сеть"

my webpack.config.js

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  watch: true,
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  module: {
      rules: [
          {
            test: /\.css$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: './dist'
                    }
                },
                "css-loader"
            ]
        },
        {
            test: /\.scss$/,
            use: [
                {loader: "style-loader"},
                {loader: "css-loader"},
                {loader: "sass-loader"}
            ]
        },
        {
            test: /\.(html)$/,
            use: [{ 
                loader:'raw-loader'
            }]          
        }
    ]
    },
    stats: {
        errorDetails: true,
        errors: true
    },
    devServer: {
        contentBase: './dist',
        compress: true,
        port: 9000,
        publicPath: '/',
        watchContentBase: true,
        hot: true,
        inline: true
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "app.css",
            chunkFilename: "[id].css"
        }),
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
        new webpack.HotModuleReplacementPlugin()
    ]
};

my index.js

import angular from 'angular'
import uirouter from '@uirouter/angularjs'
//import uirouterStateHelper from 'angular-ui-router.statehelper'
import 'bootstrap/dist/css/bootstrap.min.css'

angular.module('petApp', [uirouter])
.config(function($stateProvider, $urlRouterProvider) {      
    // For any unmatched url, send to /
    $urlRouterProvider.otherwise('/home')

    var homeState = {
      name: 'home',
      url: '/home',
      templateUrl: './test.html',
      controller: 'HomeController'
    }

    $stateProvider.state(homeState);
  }).controller('HomeController', HomeController)


  function HomeController ($scope, $http) {
    console.log($scope);
  }

Answer 1

Мое решение заключалось в том, чтобы сделать веб-пакет скопировать мои шаблоны из папки src/templates/ в мою папку ./dist с помощью плагина копирования веб-пакета https://github.com/webpack-contrib/copy-webpack-plugin Моя проблема заключалась в том, что при запуске сервера разработки он должен (или нет) копировать файлы во время выполнения в dist, но я использовал команду build (после установки плагина) для копирования файлов и теперь работает нормально.