手动粘贴时无法加载文件URL Angular 2 路由？

Question

我做了这个路由配置

@RouteConfig([
  {
    path:'/profile/:id',name:'Profile',component:ProfileComponent
  },
  // else
  {
    path: '/**',
    redirectTo: ['Home']
  }
])

并使用它来导航带有参数 {id:5}

的配置文件

<a [routerLink]="['Profile', {id:5}]" >Go </a>

我加入了index.html这个基地

<base href="/">

成功导航到

http://localhost:3000/profile/1

并且工作正常

但是当我在浏览器中粘贴相同的 URL 手册并点击回车时，它给我这个错误

错误发生是因为文件没有从根目录加载

http://localhost:3000

但浏览器试图从相对 URL 目录加载它们

http://localhost:3000/profile/1

更新：我现在用的是angular 7，这种问题不用加任何东西就解决了

Answer 1

我通过在我的路由中添加 # 解决了这个问题，例如 http://localhost:3000/#/profile/1，您可以尝试这样做。不过，有人可能会更好地解决这个问题。无论如何，我的解决方案是将 HashLocationStrategy 添加到 AppModule providers:

{ provide: LocationStrategy, useClass: HashLocationStrategy }

当然，在此之前，你需要导入LocationStrategy和HashLocationStrategy:

import { LocationStrategy, HashLocationStrategy } from '@angular/common';

如果您使用的是 RC4 或更低版本，请将其添加到您的 bootstrap 方法中，例如：

bootstrap(
AppComponent,
    [
        { provide: LocationStrategy, useClass: HashLocationStrategy }
    ]);

Answer 2

这很简单。

当您在地址栏刷新或手动复制粘贴URL时，您需要服务器端配置（可能是服务器端路由） 识别并重定向（使用 PathLocationStrategy）到目标页面。

Angular 路由在客户端，如果你想对工作条件做同样的事情，你需要使用 HashLocationStrategy

Answer 3

如果您使用的是 Express Server。您可以使用另一个名为 express-history-api-fallback 的中间件包。在您的 server.js

中使用以下代码

import fallback from 'express-history-api-fallback'
import express from 'express'
const app = express()
const root = `${__dirname}/public`
app.use(express.static(root))
app.use(fallback('index.html', { root }))

如果您使用的是 Webpack 服务器。 webpack 服务器配置选项中有一个选项 "historyApiFallback"。根据您的情况将此值设置为 true。

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, './client/main.ts'),
    target: "web",
    output: {
       path: path.resolve(__dirname, './comp'),
       publicPath: 'http://localhost:8080/',
       filename: 'app.bundle.js',
       chunkFilename: 'app.bundle.js'
    },
    devServer: {
        port: 8080,
        hot: true,
        historyApiFallback: true
    },
...
}

通过使用这种方法，您要求浏览器将 url（在浏览器中）存储到缓存中，有效地要求服务器回退到 index.html

手动粘贴时无法加载文件URL Angular 2 路由？

Cannot load files when paste URL manually Angular 2 routing?

routing

paste

manual

angularjs

angular