通过 url input

如何解决通过 url input

我有 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#/。此外，在一次输入后，我遇到了控制台错误：

Refused to apply style '<URL>' because MIME type ('text/html') is not supported stylesheet MIME type,and strict MIME checking is enabled.

我可以使用典型的 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 { }

webpack 配置

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>

如何解决通过 url input

相关推荐