页面刷新后Angular4 cli路由无法正常工作?

时间:2017-04-17 09:32:50

标签: angular webpack angular2-routing angular-cli

如果我在弹出webpack之前尝试路由,它会按预期工作。一旦你执行弹出,应用程序就会编译并运行,但路由器不起作用。第一个呼叫正确路由,但如果您尝试刷新或导航到其他路由,则应用程序将返回CAN NOT / GET路由。

我正在使用最新的角度cli 4.0.0

webpack.config.ts

 const path = require('path');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const postcssUrl = require('postcss-url');

const { NoEmitOnErrorsPlugin, LoaderOptionsPlugin } = require('webpack');
const { GlobCopyWebpackPlugin, BaseHrefWebpackPlugin } = require('@angular/cli/plugins/webpack');
const { CommonsChunkPlugin } = require('webpack').optimize;
const { AotPlugin } = require('@ngtools/webpack');

const nodeModules = path.join(process.cwd(), 'node_modules');
const entryPoints = ["inline","polyfills","sw-register","scripts","styles","vendor","main"];
const baseHref = "";
const deployUrl = "";




module.exports = {
  "devtool": "source-map",
  "resolve": {
    "extensions": [
      ".ts",
      ".js"
    ],
    "modules": [
      "./node_modules"
    ]
  },
  "resolveLoader": {
    "modules": [
      "./node_modules"
    ]
  },
  "entry": {
    "main": [
      "./src\\main.ts"
    ],
    "polyfills": [
      "./src\\polyfills.ts"
    ],
    "scripts": [
      "script-loader!./node_modules\\jquery\\dist\\jquery.min.js",
      "script-loader!./node_modules\\bootstrap\\dist\\js\\bootstrap.min.js"
    ],
    "styles": [
      "./src\\assets\\public\\css\\synaptech.min.css",
      "./src\\assets\\public\\css\\synaptech-layout.css",
      "./node_modules\\bootstrap\\dist\\css\\bootstrap.min.css",
      "./node_modules\\font-awesome\\css\\font-awesome.min.css"
    ]
  },
  "output": {
    "path": path.join(process.cwd(), "dist"),
    "filename": "[name].bundle.js",
    "chunkFilename": "[id].chunk.js"
  },
  "module": {
    "rules": [
      {
        "enforce": "pre",
        "test": /\.js$/,
        "loader": "source-map-loader",
        "exclude": [
          /\/node_modules\//
        ]
      },
      {
        "test": /\.json$/,
        "loader": "json-loader"
      },
      {
        "test": /\.html$/,
        "loader": "raw-loader"
      },
      {
        "test": /\.(eot|svg)$/,
        "loader": "file-loader?name=[name].[hash:20].[ext]"
      },
      {
        "test": /\.(jpg|png|gif|otf|ttf|woff|woff2|cur|ani)$/,
        "loader": "url-loader?name=[name].[hash:20].[ext]&limit=10000"
      },
      {
        "exclude": [
          path.join(process.cwd(), "src\\assets\\public\\css\\synaptech.min.css"),
          path.join(process.cwd(), "src\\assets\\public\\css\\synaptech-layout.css"),
          path.join(process.cwd(), "node_modules\\bootstrap\\dist\\css\\bootstrap.min.css"),
          path.join(process.cwd(), "node_modules\\font-awesome\\css\\font-awesome.min.css")
        ],
        "test": /\.css$/,
        "loaders": [
          "exports-loader?module.exports.toString()",
          "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
          "postcss-loader"
        ]
      },
      {
        "exclude": [
          path.join(process.cwd(), "src\\assets\\public\\css\\synaptech.min.css"),
          path.join(process.cwd(), "src\\assets\\public\\css\\synaptech-layout.css"),
          path.join(process.cwd(), "node_modules\\bootstrap\\dist\\css\\bootstrap.min.css"),
          path.join(process.cwd(), "node_modules\\font-awesome\\css\\font-awesome.min.css")
        ],
        "test": /\.scss$|\.sass$/,
        "loaders": [
          "exports-loader?module.exports.toString()",
          "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
          "postcss-loader",
          "sass-loader"
        ]
      },
      {
        "exclude": [
          path.join(process.cwd(), "src\\assets\\public\\css\\synaptech.min.css"),
          path.join(process.cwd(), "src\\assets\\public\\css\\synaptech-layout.css"),
          path.join(process.cwd(), "node_modules\\bootstrap\\dist\\css\\bootstrap.min.css"),
          path.join(process.cwd(), "node_modules\\font-awesome\\css\\font-awesome.min.css")
        ],
        "test": /\.less$/,
        "loaders": [
          "exports-loader?module.exports.toString()",
          "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
          "postcss-loader",
          "less-loader"
        ]
      },
      {
        "exclude": [
          path.join(process.cwd(), "src\\assets\\public\\css\\synaptech.min.css"),
          path.join(process.cwd(), "src\\assets\\public\\css\\synaptech-layout.css"),
          path.join(process.cwd(), "node_modules\\bootstrap\\dist\\css\\bootstrap.min.css"),
          path.join(process.cwd(), "node_modules\\font-awesome\\css\\font-awesome.min.css")
        ],
        "test": /\.styl$/,
        "loaders": [
          "exports-loader?module.exports.toString()",
          "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
          "postcss-loader",
          "stylus-loader?{\"sourceMap\":false,\"paths\":[]}"
        ]
      },
      {
        "include": [
          path.join(process.cwd(), "src\\assets\\public\\css\\synaptech.min.css"),
          path.join(process.cwd(), "src\\assets\\public\\css\\synaptech-layout.css"),
          path.join(process.cwd(), "node_modules\\bootstrap\\dist\\css\\bootstrap.min.css"),
          path.join(process.cwd(), "node_modules\\font-awesome\\css\\font-awesome.min.css")
        ],
        "test": /\.css$/,
        "loaders": ExtractTextPlugin.extract({
  "use": [
    "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
    "postcss-loader"
  ],
  "fallback": "style-loader",
  "publicPath": ""
})
      },
      {
        "include": [
          path.join(process.cwd(), "src\\assets\\public\\css\\synaptech.min.css"),
          path.join(process.cwd(), "src\\assets\\public\\css\\synaptech-layout.css"),
          path.join(process.cwd(), "node_modules\\bootstrap\\dist\\css\\bootstrap.min.css"),
          path.join(process.cwd(), "node_modules\\font-awesome\\css\\font-awesome.min.css")
        ],
        "test": /\.scss$|\.sass$/,
        "loaders": ExtractTextPlugin.extract({
  "use": [
    "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
    "postcss-loader",
    "sass-loader"
  ],
  "fallback": "style-loader",
  "publicPath": ""
})
      },
      {
        "include": [
          path.join(process.cwd(), "src\\assets\\public\\css\\synaptech.min.css"),
          path.join(process.cwd(), "src\\assets\\public\\css\\synaptech-layout.css"),
          path.join(process.cwd(), "node_modules\\bootstrap\\dist\\css\\bootstrap.min.css"),
          path.join(process.cwd(), "node_modules\\font-awesome\\css\\font-awesome.min.css")
        ],
        "test": /\.less$/,
        "loaders": ExtractTextPlugin.extract({
  "use": [
    "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
    "postcss-loader",
    "less-loader"
  ],
  "fallback": "style-loader",
  "publicPath": ""
})
      },
      {
        "include": [
          path.join(process.cwd(), "src\\assets\\public\\css\\synaptech.min.css"),
          path.join(process.cwd(), "src\\assets\\public\\css\\synaptech-layout.css"),
          path.join(process.cwd(), "node_modules\\bootstrap\\dist\\css\\bootstrap.min.css"),
          path.join(process.cwd(), "node_modules\\font-awesome\\css\\font-awesome.min.css")
        ],
        "test": /\.styl$/,
        "loaders": ExtractTextPlugin.extract({
  "use": [
    "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
    "postcss-loader",
    "stylus-loader?{\"sourceMap\":false,\"paths\":[]}"
  ],
  "fallback": "style-loader",
  "publicPath": ""
})
      },
      {
        "test": /\.ts$/,
        "loader": "@ngtools/webpack"
      }
    ]
  },
  "plugins": [
    new NoEmitOnErrorsPlugin(),
    new GlobCopyWebpackPlugin({
      "patterns": [
        "assets",
        "favicon.ico"
      ],
      "globOptions": {
        "cwd": "D:\\angular-cli-example\\cli-test4 - Copy\\cli-test4\\src",
        "dot": true,
        "ignore": "**/.gitkeep"
      }
    }),
    new ProgressPlugin(),
    new HtmlWebpackPlugin({
      "template": "./src\\index.html",
      "filename": "./index.html",
      "hash": false,
      "inject": true,
      "compile": true,
      "favicon": false,
      "minify": false,
      "cache": true,
      "showErrors": true,
      "chunks": "all",
      "excludeChunks": [],
      "title": "Webpack App",
      "xhtml": true,
      "chunksSortMode": function sort(left, right) {
        let leftIndex = entryPoints.indexOf(left.names[0]);
        let rightindex = entryPoints.indexOf(right.names[0]);
        if (leftIndex > rightindex) {
            return 1;
        }
        else if (leftIndex < rightindex) {
            return -1;
        }
        else {
            return 0;
        }
    }
    }),
    new BaseHrefWebpackPlugin({}),
    new CommonsChunkPlugin({
      "name": "inline",
      "minChunks": null
    }),
    new CommonsChunkPlugin({
      "name": "vendor",
      "minChunks": (module) => module.resource && module.resource.startsWith(nodeModules),
      "chunks": [
        "main"
      ]
    }),
    new ExtractTextPlugin({
      "filename": "[name].bundle.css",
      "disable": true
    }),
    new LoaderOptionsPlugin({
      "sourceMap": false,
      "options": {
        "postcss": [
          autoprefixer(),
          postcssUrl({"url": (URL) => {
            // Only convert root relative URLs, which CSS-Loader won't process into require().
            if (!URL.startsWith('/') || URL.startsWith('//')) {
                return URL;
            }
            if (deployUrl.match(/:\/\//)) {
                // If deployUrl contains a scheme, ignore baseHref use deployUrl as is.
                return `${deployUrl.replace(/\/$/, '')}${URL}`;
            }
            else if (baseHref.match(/:\/\//)) {
                // If baseHref contains a scheme, include it as is.
                return baseHref.replace(/\/$/, '') +
                    `/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
            }
            else {
                // Join together base-href, deploy-url and the original URL.
                // Also dedupe multiple slashes into single ones.
                return `/${baseHref}/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
            }
        }})
        ],
        "sassLoader": {
          "sourceMap": false,
          "includePaths": []
        },
        "lessLoader": {
          "sourceMap": false
        },
        "context": ""
      }
    }),
    new AotPlugin({
      "mainPath": "main.ts",
      "hostReplacementPaths": {
        "environments\\environment.ts": "environments\\environment.ts"
      },
      "exclude": [],
      "tsConfigPath": "src\\tsconfig.app.json",
      "skipCodeGeneration": true
    })
  ],
  "node": {
    "fs": "empty",
    "global": true,
    "crypto": "empty",
    "tls": "empty",
    "net": "empty",
    "process": true,
    "module": false,
    "clearImmediate": false,
    "setImmediate": false
  }
};

请任何人让我知道该怎么做

1 个答案:

答案 0 :(得分:2)

尝试添加devServer选项:

module.exports = {
    "devtool": "source-map",
    ...
    devServer: {
        historyApiFallback: true
    }
};

来自文档

  

如果您使用的是HTML5历史记录API,则可能需要提供服务   index.html代替404响应,可以通过设置来完成   historyApiFallback:true

https://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option

您还可以查看angular-cli如何配置devServer选项

https://github.com/angular/angular-cli/blob/v1.0.0/packages/%40angular/cli/tasks/serve.ts#L136-L152