Angular - trying import angular template shows 404 error

Question

i searched the whole SO for any solution for this problem, every answer is the same: check if relative path to your template is correct. my problem is, i'm testing all possible paths, in different folders and that's no matter, in all folders my template is not being located, returning a 404 error.

Console Tab

Network tab

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

my solution was make webpack copy my templates from src/templates/ folder to my ./dist folder using the Copy Webpack Plugin https://github.com/webpack-contrib/copy-webpack-plugin my strugle was, when running the development server it should (or not) copy the files at run time to dist, but i used the build command (after set the plugin) to copy the files and now is working fine.