Question

我在整个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);
  }

Answer 1

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

Angular-尝试导入角度模板显示404错误

1 个答案: