主要是router问题,两个解决方案

一个是修改angular项目的router选项,一个是修改Nginx的route 选项

一般情况下项目部署了,不愿意修改angular项目的router选项,所以

修改nginx 的选项:

第一步

查看nginx的配置文件位置

docker exec -it yourContainerId  /bin/sh

# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

第二步

文件cp

docker cp yourContainerId:/etc/nginx/nginx.conf nginx.conf

打开复制到当前路径下的文件:nginx.conf,其他建议就是添加:

location /myangular {
alias /html/myangular;#angular项目所在目录
index index.html index.htm;
try_files $uri $uri/ /index.html =404;#主要是这一行
}

但不一定起作用,主要是这句配置:

include /etc/nginx/conf.d/*.conf;

这就需要重复上述步骤进入exec cp /etc/nginx/conf.d/下的conf文件修改:

还是加上这一行:

try_files $uri $uri/ /index.html;

最后

执行cp命令,复制回去,重新启动container就ok了。

docker cp default.conf yourContainerId:/etc/nginx/conf.d/default.conf

angular项目中的解决办法

在root.module.ts加入:

import {HashLocationStrategy, LocationStrategy} from '@angular/common';
添加provide:
{ provide: LocationStrategy, useClass: HashLocationStrategy, }
这时候在刷新时候会加上#,就不会出现刷新出错的问题了。
建议使用nginx配置方法,有时候项目中可能其他地方配置的url不是这种形式,就出错了。
 

docker nginx angular 刷新错误,404错误的更多相关文章

  1. 解决angular2页面刷新后报404错误

    如果你的angular项目部署到一个tomcat容器里面,localhost:8080是JavaWeb的主页,localhost:8080/driver/login是你angular2项目的登陆地址. ...

  2. Vue实现远程获取路由与页面刷新导致404错误的解决

    一.背景 先简单介绍一下现在项目情况:前后端分离,后端服务是Java写的,前端是Vue+ElementUI. 最近的一个需求是:通过后端Api去获取前端路由表,原因是每个登录角色对应的前端路由表可能是 ...

  3. 前端lvs访问多台nginx代理服务时出现404错误的处理

    前端lvs访问多台nginx代理服务时出现404错误的处理 环境描述:app --> lvs --> nginx --> server app访问页面购买流量页面(nginx服务器) ...

  4. 解决使用angular2路由后,页面刷新后报404错误。

    点击路由链接跳转页面是正常的,但是当刷新页面时就出现了404错误. 解决方法如下: 在app.module.ts中添加import: import {HashLocationStrategy,Loca ...

  5. Vue项目build打包部署到Tomcat后,刷新报404错误解决方案

    问题描述: 一.更新依赖,并打包项目 cd /root/.jenkins/workspace/v-test;npm installcd /root/.jenkins/workspace/v-test; ...

  6. Web环境从Apache转Nginx后页面报404错误

    问题原因: Apache支持伪静态规则在项目的入口目录有个.htaccess文件,Apache默认识别此文件内容, 但是Nginx不识别.htaccess文件,导致伪静态规则失效,从而无法解析url地 ...

  7. vue下history模式刷新后404错误解决

    官方说明文档: https://router.vuejs.org/zh/g... 一. 实测 Linux 系统 Apache 配置: 更改站点配置文件即可,我这里在 Directory 标签后面添加了 ...

  8. Angular刷新浏览器 404 问题

    最近在用angular写一个后台的项目,遇到一个小问题. 进入某个路由页面之后,手动触发浏览器的刷新,然后就404了... 翻看Angular的文档,发现Google早已经给我们想到了这个问题的处理方 ...

  9. 远程服务器返回错误: 404错误、远程服务器返回错误:500错误、 HttpWebResponse远程服务器返回错误:(404、500) 错误。

    现象 我们编码实现请求一个页面时,请求的代码类似如下代码: HttpWebRequest req = (HttpWebRequest)WebRequest.Create(strUrl);req.Use ...

随机推荐

  1. 浅析JavaScript异步

    一直以来都知道JavaScript是一门单线程语言,在笔试过程中不断的遇到一些输出结果的问题,考量的是对异步编程掌握情况.一般被问到异步的时候脑子里第一反应就是Ajax,setTimseout...这 ...

  2. JavaScript 继承 封装 多态实现及原理详解

    面向对象的三大特性 封装 所谓封装,也就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏.封装是面向对象的特征之一,是对象和类概念的主要特性. ...

  3. c# 常见文件操作

  4. Linux之nginx负载均衡

    Nginx负载均衡概述 Web服务器,直接面向用户,往往要承载大量并发请求,单台服务器难以负荷,我使用多台WEB服务器组成集群,前端使用Nginx负载均衡,将请求分散的打到我们的后端服务器集群中,实现 ...

  5. angularcli 第二篇(数据绑定、属性申明、绑定属性)

    1.数据绑定 插值绑定: <li>{{ hero.name }} </li>       或       <div  class = "{{ demo }}&q ...

  6. Kubernetes-Istio之Sidecar自动注入

    前提: (官方提供) 1):确认使用的是Kubernetes服务器的受支持版本( 1.13.1.14.1.15):kubectl (官方提供,应该是1.13版本以上,我的是1.16版本) kubect ...

  7. yum源仓库的三种搭建方式

    yum源的三种搭建方式 一.  本地yum仓库的搭建 1.1.获取软件包资源 将iso镜像挂载在本地目录中,此次挂载目录为/var/www/html/repo/,此目录本身不存在,需要创建.软件宝资源 ...

  8. SpringCloud2.0 Turbine 断路器集群监控 基础教程(九)

    1.启动基础工程 1.1.启动[服务中心]集群,工程名称:springcloud-eureka-server 参考 SpringCloud2.0 Eureka Server 服务中心 基础教程(二) ...

  9. 使用 create-react-app 快速构建 React 开发环境

    在终端执行以下命令创建项目: 1.指定创建的项目位置(这里以桌面为例) cd Desktop 2.创建 React 项目 npx create-react-app my-app 3.进入项目并启动 c ...

  10. dt6.0之mip改造-img正则替换mip-img

    最近没事,打算把自己的小项目改造为mip,进行测试学习,想把资讯栏目:http://zhimo.yuanzhumuban.cc/news/.全部改造为mip.但是MIP改造一项是:图片标签的改造.而且 ...