Angular - 尝试导入 Angular 模板显示 404 错误答案

【问题标题】：Angular - trying import angular template shows 404 errorAngular - 尝试导入 Angular 模板显示 404 错误
【发布时间】：2018-11-10 19:34:07
【问题描述】：

我在整个 SO 中搜索了此问题的任何解决方案，每个答案都是相同的：检查模板的相对路径是否正确。我的问题是，我正在测试所有可能的路径，在不同的文件夹中，没关系，在所有文件夹中都没有找到我的模板，返回 404 错误。

控制台标签

网络标签

我的 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()
    ]
};

我的 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);
  }

【问题讨论】：

尝试将 test.html 复制到您的 dist 文件夹，如果工作正常，请检查 webpack 配置规则
已复制并工作...但是我的模板存储在 src/templates 下，该怎么办？
我对 webpack 不熟悉，你可以google一下。它应该是webpack copy src to dist 或类似的东西。或者在使用 google 之前尝试在 test.html 加载器配置之后放置 options: { publicPath: './dist' } :)
好的，我会检查并在这里发布我的答案

标签： angularjs webpack angular-ui-router

【解决方案1】：

我的解决方案是让 webpack 使用 Copy Webpack Plugin https://github.com/webpack-contrib/copy-webpack-plugin 将我的模板从 src/templates/ 文件夹复制到我的 ./dist 文件夹我的挣扎是，在运行开发服务器时，它应该（或不）在运行时将文件复制到 dist，但我使用build 命令（设置插件后）复制文件，现在工作正常。

【讨论】：