angularjs - 具有 Angular 路由配置的 Webpack - 浏览器具有有效配置，无法解析文件

Question

添加 Angular 路由后，我在 webpack 配置方面遇到了大问题。 AngularJS(1).

我的错误:

Ofc 如果屏幕不清晰我会重写。

我的 package.json 配置:

{
  "name": "webpack1",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "dev": "webpack-dev-server",
    "prod": "npm run clean && set NODE_ENV=production && webpack -p",
    "clean": "rimraf ./dist/*"
  },

应用程序.js:

const css = require('./app.scss');
var angular = require('angular');
var ngRoute = require('angular-route');

var ngModule = angular.module('app', ['ngRoute']);

ngModule.config(function($routeProvider){
    $routeProvider

    .when('/', {
        template: require('./html/index.html')
    })

    .when('/program', {
        templateUrl: './html/program.html'
    })
 });

webpack.config.js:

const ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
var path = require("path");
var bootstrapEntryPoints = require('./webpack.bootstrap.config');

var isProd = process.env.NODE_ENV === 'production';
var cssDev = ['style-loader', 'css-loader', 'sass-loader'];
var cssProd = ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'sass-loader'],
    allChunks: true
})
var cssConfig = isProd ? cssProd : cssDev;

    var bootstrapConfig = isProd ? bootstrapEntryPoints.prod : bootstrapEntryPoints.dev;


module.exports = {
    stats:{
        colors: true,
        modules: true,
        reasons: true,
        errorDetails: true
    },
    entry: {
        app: './src/js/app.js',
        contact: './src/js/contact.js',
        register: './src/js/register.js',
        login: './src/js/login.js',
        program: './src/js/program.js',
        adminNetworks: './src/js/adminNetworks.js',
        automatic: './src/js/automatic.js',
        bootstrap: bootstrapConfig
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: '[name].bundle.js'
    },

之后，添加了 HtmlWebpackPlugin、ExtractTextPlugin、模块规则和 devServer 配置。

我不知道要更改什么.. 看起来我添加了错误的路径，但很困惑，我尝试了我读到的每一种组合。

请帮忙

Answer 1

哇，终于成功了。

首先，我将 app.js 移动到主文件夹中以避免错误的路径。其次，由于自动添加的哈希值，我在 url 中的路径很糟糕，例如:(/#!#program)。为了避免这种情况，我不得不更改我的配置代码:

ngModule.config(function($routeProvider, $locationProvider){
    $locationProvider.hashPrefix('');
    $routeProvider

    .when('/', {
        templateUrl: 'index.html'
    })
    .when('/program', {
        templateUrl: 'program.html'
    })
});

我还在

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

问题，但路由有效，所以我想没问题..

希望对某人有所帮助:)