[英]Angular 2 routes not working after aot compilation build
I am using RouterModule, I have this in my app.module.ts 我正在使用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 }
];
It works really fine when I'm testing locally. 当我在本地测试时它工作得很好。 /mainMenu/products takes me to the MainComponent and it includes the ProductsComponent.
/ mainMenu / products将我带到MainComponent,它包含ProductsComponent。 and /targeting takes me to the TargetingComponent as well.
和/ target也将我带到TargetingComponent。
I built the project using 我使用了这个项目
ng build --aot
The generated files in dist were placed on the server. dist中生成的文件放在服务器上。 The page automatically redirects to /mainMenu/products.
该页面会自动重定向到/ mainMenu / products。 But if I enter in the URL /mainMenu/products or /targeting it does not work.
但是,如果我输入URL / mainMenu / products或/ target它不起作用。 I get
GET /mainMenu/products" Error (404): "Not found"
or GET /targeting" Error (404): "Not found"
. 我得到
GET /mainMenu/products" Error (404): "Not found"
或GET /targeting" Error (404): "Not found"
。 So I assume this is happening because of the ahead of time compilation, is this true? 所以我认为这是因为提前编译而发生的,这是真的吗? Is there anything I should do in the configuration for this to work?
在配置中我应该做些什么来工作?
I'm using npm http-server. 我正在使用npm http-server。
When you build Angular 2 app runs on index.html and tells to the browser which route to show. 当您在index.html上构建Angular 2 app时,告诉浏览器要显示哪条路线。 So you must add a htaccess file to redirect incoming traffic to index.html
因此,您必须添加htaccess文件以将传入流量重定向到index.html
This is the .htaccess I'm using: 这是我正在使用的.htaccess:
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
http-server
does not work well with angular paths when it is build using ng build --aot
. 当使用
ng build --aot
构建时, http-server
对角度路径不能很好地工作。 Instead you can use simple node js express server. 相反,您可以使用简单的节点js express server。
Install express using following command. 使用以下命令安装express。
npm install --save express
Create a file named server.js
in your root directory with following contents. 在根目录中创建名为
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'));
});
In your package.json
change start
like this. 在你的
package.json
改变这样start
。
"scripts": {
"start": "node server.js",
//**
"postinstall": "ng build --aot -prod"
},
Now build using ng build --aot
and run with npm start
. 现在使用
ng build --aot
并使用npm start
运行。
Configure your server to return "index.html" for all 404 errors and your problem will be solved. 配置您的服务器以返回所有404错误的“index.html”,您的问题将得到解决。
In ASP.NET this can be like this: 在ASP.NET中,这可以是这样的:
<customErrors>
<error statusCode="404" redirect="~/app/index.html" />
</customErrors>
I think this article can help you: http://blog.angular-university.io/angular2-router/ In that article there is a section "What could go wrong so soon?" 我认为这篇文章可以帮到你: http : //blog.angular-university.io/angular2-router/在那篇文章中有一节“这么快就会出错?” that I think it is what is happening to you
我认为这是你发生的事情
you can use this 你可以用它
<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>
it works for me 这个对我有用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.