通过url输入输入时，Angular应用程序未正确引导_Angular_Webpack_Angular Ui Router_Angular4 Router

通过url输入输入时，Angular应用程序未正确引导

angular webpack

通过url输入输入时，Angular应用程序未正确引导,angular,webpack,angular-ui-router,angular4-router,Angular,Webpack,Angular Ui Router,Angular4 Router,我有angular4/webpack2应用程序。我需要通过新的途径来扩展它。假设我有localhost:8080/app没有路由，并且知道我需要添加localhost:8080/app/test。这两个页面都需要单独加载不幸的是，此时此刻，当我通过routingLink访问新页面时，一切正常，但当试图通过浏览器url输入访问它时，我的页面没有加载。我没有收到任何错误（404），index.html服务正确，但与angular加载无关，我添加了console.log以再次检查我确实在我的路由中

我有angular4/webpack2应用程序。我需要通过新的途径来扩展它。假设我有

localhost:8080/app

没有路由，并且知道我需要添加

localhost:8080/app/test

。这两个页面都需要单独加载

不幸的是，此时此刻，当我通过

routingLink

访问新页面时，一切正常，但当试图通过浏览器url输入访问它时，我的页面没有加载。我没有收到任何错误（404），

index.html

服务正确，但与angular加载无关，我添加了console.log以再次检查

我确实在我的路由中添加了

useHash:true

，但是我得到的不是很好，我知道我的页面看起来是这样的：

localhost:8080/app#/

访问测试路径时，我需要编写

localhost:8080/app/index.html#test

，然后我的url立即更改为

localhost:8080/app/test#/

。此外，输入一次后，我在控制台中遇到错误：

拒绝应用样式“”，因为不支持MIME类型（'text/html'）样式表MIME类型，并且启用了严格的MIME检查。

我能用典型的url地址获得工作结果吗？为什么会这样

我的代码看起来：

const routes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'test', loadChildren: () => new Promise(resolve => {
          (require as any).ensure([], require => {
              resolve(require('./author/test.module').TestModule);
          })
      })
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: PreloadAllModules,
    //enableTracing: true
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

网页包配置

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');
const HtmlWebpackPlugin = require('html-webpack-plugin');

var appName = "app";
module.exports = webpackMerge(commonConfig, {
  devtool: 'eval-source-map',
 
  output: {
    path: helpers.root('dist'),
    publicPath: 'http://localhost:8080/'+appName, 
    filename: '[name].js',
    chunkFilename: '[id].chunk.js'
  },
 
  plugins: [
    new ExtractTextPlugin('[name].css'),
    new webpack.LoaderOptionsPlugin({debug: true}),
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      base_path: appName,
      title: 'MyApp' 
    })
  ],

  module: {
    rules: [
        {
            enforce: 'pre',
            test: /\.js$/,
            loader: "source-map-loader",
            exclude: [
                helpers.root('node_modules/ng2-translate'),
            ]
        }
    ]
  },
 
  devServer: {
    historyApiFallback: true,
    stats: 'minimal'
  }
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="/app" />
  </head>
  <body>
    <app-root>Loading...</app-root>
  </body>
</html>


加载。。。