3

我正在使用 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。/targeting 也将我带到 TargetingComponent。

我使用

ng build --aot

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

我正在使用 npm http-server。

4

4 回答 4

3

当您构建 Angular 2 应用程序时，在 index.html 上运行并告诉浏览器要显示哪个路由。所以你必须添加一个 htaccess 文件来将传入的流量重定向到 index.html

这是我正在使用的 .htaccess：

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
于 2017-03-01T10:40:41.370 回答
1

http-server使用ng build --aot. 相反，您可以使用简单的 node js express 服务器。

使用以下命令安装 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.

于 2017-03-27T16:51:38.090 回答
0

你可以用这个

<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>

这个对我有用

于 2017-08-02T16:00:51.563 回答
0

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

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

<customErrors>
     <error statusCode="404" redirect="~/app/index.html" />
</customErrors>
于 2017-03-01T11:02:01.543 回答