如何在 nginx 或 apache httpd 中构建 angular 4 个应用程序?
How to build angular 4 apps in nginx or apache httpd?
您好,我正在尝试构建 Angular 4 应用程序,接下来的步骤如下 -
建造ng build
在我的 amazon ec2 实例中,我 运行ning apache。遵循的步骤 -
#!/bin/bash
yum install httpd -y
yum update -y
cp dist/* /var/www/html/
service httpd start
chkconfig httpd on
一切正常,但我的应用程序使用 auth0
进行身份验证,我看到他们回调 http://ip/callback
我的应用程序显示 - 404 未找到。
我尝试像 ng build --base-href .
那样构建,但没有用 !
Please help me how to build this one, please note that when I use
ng serve` 在我的本地一切都很棒。但是当我试图部署到生产环境时,它给出了这个错误。我很确定我在构建应用程序时做错了什么。
我试过nginx
docker容器,它给出了同样的错误。我的 docker 文件如下所示。
FROM nginx
COPY dist /usr/share/nginx/html
- docker build -t ng-auth0-web-dev .
- docker 运行 -d -p 8080:80 ng-auth0-web-dev
上面的 docker 文件有什么问题吗?
https://github.com/auth0-samples/auth0-angular-samples/tree/master/01-Login - 示例应用程序代码
https://manage.auth0.com/#/logs - No error in logs, that means auth0 is working fine but I am getting build error with angular.
确切错误:
更新 -
我也试过这样建造 -
ng build --base-href http://34.213.164.54/
和 ng build --base-href http://34.213.164.54:80/
,但同样的错误。
所以问题缩小到我如何构建 Angular 应用程序
public handleAuthentication(): void {
this.auth0.parseHash((err, authResult) => {
if (authResult && authResult.accessToken && authResult.idToken) {
window.location.hash = '';
this.setSession(authResult);
localStorage.setItem('email', profile.email);
this.verticofactoryService.registerUser(u);
this.router.navigate(['/home']);
});
} else if (err) {
this.router.navigate(['/home']);
console.log(err);
alert(`Error: ${err.error}. Check the console for further details.`);
}
});
}
Angular 应用程序非常适合使用简单的静态 HTML 服务器进行服务。您不需要服务器端引擎来动态组合应用程序页面,因为 Angular 在客户端执行此操作。
如果应用程序使用 Angular 路由器,您必须将服务器配置为 return 应用程序的主机页面 (index.html) 当被要求提供它没有的文件时。
假设在你的 nginx 服务器 conf 中添加这样的东西。 try_files $uri $uri/ /index.html;
参考 - https://github.com/auth0-samples/auth0-angular-samples/tree/master/02-User-Profile
谢谢JB Nizet,终于成功了。
您好,我正在尝试构建 Angular 4 应用程序,接下来的步骤如下 -
建造ng build
在我的 amazon ec2 实例中,我 运行ning apache。遵循的步骤 -
#!/bin/bash
yum install httpd -y
yum update -y
cp dist/* /var/www/html/
service httpd start
chkconfig httpd on
一切正常,但我的应用程序使用 auth0
进行身份验证,我看到他们回调 http://ip/callback
我的应用程序显示 - 404 未找到。
我尝试像 ng build --base-href .
那样构建,但没有用 !
Please help me how to build this one, please note that when I use
ng serve` 在我的本地一切都很棒。但是当我试图部署到生产环境时,它给出了这个错误。我很确定我在构建应用程序时做错了什么。
我试过nginx
docker容器,它给出了同样的错误。我的 docker 文件如下所示。
FROM nginx
COPY dist /usr/share/nginx/html
- docker build -t ng-auth0-web-dev .
- docker 运行 -d -p 8080:80 ng-auth0-web-dev
上面的 docker 文件有什么问题吗?
https://github.com/auth0-samples/auth0-angular-samples/tree/master/01-Login - 示例应用程序代码
https://manage.auth0.com/#/logs - No error in logs, that means auth0 is working fine but I am getting build error with angular.
确切错误:
更新 -
我也试过这样建造 -
ng build --base-href http://34.213.164.54/
和 ng build --base-href http://34.213.164.54:80/
,但同样的错误。
所以问题缩小到我如何构建 Angular 应用程序
public handleAuthentication(): void {
this.auth0.parseHash((err, authResult) => {
if (authResult && authResult.accessToken && authResult.idToken) {
window.location.hash = '';
this.setSession(authResult);
localStorage.setItem('email', profile.email);
this.verticofactoryService.registerUser(u);
this.router.navigate(['/home']);
});
} else if (err) {
this.router.navigate(['/home']);
console.log(err);
alert(`Error: ${err.error}. Check the console for further details.`);
}
});
}
Angular 应用程序非常适合使用简单的静态 HTML 服务器进行服务。您不需要服务器端引擎来动态组合应用程序页面,因为 Angular 在客户端执行此操作。
如果应用程序使用 Angular 路由器,您必须将服务器配置为 return 应用程序的主机页面 (index.html) 当被要求提供它没有的文件时。
假设在你的 nginx 服务器 conf 中添加这样的东西。 try_files $uri $uri/ /index.html;
参考 - https://github.com/auth0-samples/auth0-angular-samples/tree/master/02-User-Profile
谢谢JB Nizet,终于成功了。