使用Angular路由配置的Webpack - 浏览器拥有有效配置，但无法解析文件。

Question

我在添加AngularJS(1)路由后，webpack配置出现了大问题。

我的错误信息如下：

如果屏幕不够清晰，我可以重写一遍。

我的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/*"
  },

app.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配置。

我不知道该怎么改...看起来好像我添加了错误的路径，但是感到困惑，我尝试了我读到的每一种组合。

请帮忙。

- Kondziowsky

---

我将主要的app.js文件移动到了主文件夹，并更改了代码。现在，它没有错误，但只有主模板（index.html）在视图中显示。当我点击另一个#program链接时，仍然是相同的情况。现在我在控制台上遇到了问题：app.bundle.js?b0aac39dfd34621fd365:18626 [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/。 - Kondziowsky

当我删除了routeProvider代码后，它没有任何错误。 - Kondziowsky

Answer 1

哇，终于成功了。

首先，我将app.js移动到主文件夹中以避免错误的路径。其次，我的url路径不正确，因为自动添加了#号，例如：(/#!#program)。为了避免这种情况，我必须更改我的配置代码：

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

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

我仍然有这个问题，但路由功能可以正常工作，所以我想没关系了。[弃用]在主线程上同步使用XMLHttpRequest已被弃用，因为它对最终用户的体验有害。如需更多帮助，请查看https://xhr.spec.whatwg.org/。希望能帮到某些人 :)

- Kondziowsky