Question

我正在使用RouterModule，我在app.module.ts

中有这个

const appRoutes: Routes = [
{ path: '', redirectTo: 'mainMenu', pathMatch: 'full' },
{ path: 'mainMenu', component: MainComponent,
  children: [
    {
        path: '',
        redirectTo: 'products',
        pathMatch: 'full'  
    },
    {
        path: 'products',
        component: ProductsComponent
    }
  ] 
},
{ path: 'targeting', component: TargetingComponent }
];

当我在本地测试时，它确实很好用。 / mainMenu / products将我带到MainComponent，它包含ProductsComponent。和/ target也将我带到了TargetingComponent。

我使用

构建了项目

ng build --aot

dist中生成的文件放在服务器上。该页面会自动重定向到/ mainMenu / products。但是，如果我输入URL / mainMenu / products或/ target它不起作用。我得到GET /mainMenu/products" Error (404): "Not found"或GET /targeting" Error (404): "Not found"。所以我认为这是因为提前编译而发生的，这是真的吗？我在配置中应该做些什么来实现这个目的？

我使用的是npm http-server。

Answer 1

当你在index.html上运行Angular 2应用程序时，告诉浏览器要显示哪条路线。因此，您必须添加htaccess文件以将传入流量重定向到index.html

这是我正在使用的.htaccess：

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]

Answer 2

http-server在使用ng build --aot构建时不适用于角度路径。相反，您可以使用简单的节点js express server。

使用以下命令安装express。

npm install --save express

在根目录中创建一个名为server.js的文件，其中包含以下内容。

const express = require('express');
const app = express();
const path = require('path');

app.use(express.static(__dirname + '/dist'));
app.listen(process.env.PORT || 8080);

app.get('/*', function(req, res) {
    res.sendFile(path.join(__dirname + '/dist/index.html'));
});

在package.json更改start之后。

"scripts": {
    "start": "node server.js",
    //**
    "postinstall": "ng build --aot -prod"
 },

现在使用ng build --aot构建并使用npm start运行。

Answer 3

将您的服务器配置为针对所有404错误返回“index.html”，您的问题将得到解决。

在ASP.NET中，这可以是这样的：

<customErrors>
     <error statusCode="404" redirect="~/app/index.html" />
</customErrors>

Answer 4

我认为这篇文章可以帮助您：http://blog.angular-university.io/angular2-router/ 在那篇文章中有一节“这么快就会出错？”我认为这是你发生的事情

Answer 5

你可以用这个

<IfModule mod_rewrite.c>
RewriteEngine On  

# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteCond %{HTTPS} off
RewriteRule (.*) http://%{HTTP_HOST}/sgt/index.html
</IfModule>

它对我有用

在编译构建之后，Angular 2路由无法正常工作

5 个答案: