首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在浏览器刷新时在IIS中部署时,router.navigate(['/'])在angular 4中不起作用

在浏览器刷新时,在IIS中部署时,router.navigate(['/'])在Angular 4中可能不起作用的原因是因为IIS默认情况下会将所有的路由请求都发送到服务器端,而不是交给Angular的路由器处理。这会导致在刷新页面时,服务器会尝试寻找与路由路径相匹配的文件或目录,而不是返回Angular应用的根页面。

为了解决这个问题,可以进行以下步骤:

  1. 在IIS中配置URL重写规则:打开IIS管理器,找到你的网站,右键点击"URL重写",选择"添加规则"。在规则编辑器中,选择"空白规则",设置规则名称,并在"模式"字段中输入{R:1}。在"操作"字段中选择"重定向",并在"重定向URL"字段中输入/index.html。保存并应用规则。
  2. 在Angular应用的根目录下创建一个web.config文件:在Angular应用的根目录下创建一个名为web.config的文件,并将以下内容复制到文件中:
代码语言:txt
复制
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>
  1. 配置IIS以使用web.config文件:在IIS管理器中,找到你的网站,右键点击"高级设置",将"默认文档"设置为index.html。然后,在"错误页面"中,选择"添加",将状态代码设置为404,将响应类型设置为"文件",并在"路径"字段中输入/index.html。保存更改。

通过以上步骤,当浏览器刷新时,IIS会将路由请求重定向到Angular应用的根页面,从而使router.navigate(['/'])能够正常工作。

关于Angular 4的更多信息,你可以参考腾讯云的产品文档:Angular 4产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart4.0 英雄之旅-教程-07路由 顶

当用户通过应用程序导航,路由器会在正下方显示每个组件。 刷新浏览器,然后访问localhost:8080 /#/ heroes。 你应该看到英雄列表。...了解路由章节的链接参数列表。 刷新浏览器浏览器显示应用标题和英雄链接,但不是英雄列表。点击英雄导航链接。地址栏更新为 /#/heroes(或同等/#heroes),英雄列表显示。...在这个仪表板你指定了四个英雄(第二,第三,第四和第五)。 刷新浏览器以查看新仪表板的四个英雄名称。...仪表板或英雄列表中选择英雄不起作用。 你会接下来的处理。 选择一个仪表板英雄 当用户选择仪表板的英雄,应用程序应该导航到HeroDetailComponent以允许用户查看和编辑选择的英雄。...刷新浏览器。 从英雄列表中选择英雄将激活迷你细节视图。 查看详细信息按钮不起作用

17.5K30
  • Angular路由实现原理

    浏览器将 # 后面的部分视作虚拟片段。早期的前端路由实现是基于 location.hash来实现的。他有如下特性:URL hash值的改变不会被触发页面的重载。...页面发送请求, hash 部分不会被发送。hash 值的改变,会记录在浏览器的历史记录,可使用浏览器的“后退”,“前进”触发页面跳转。可以利用 hashchange 事件来监听 hash 的变化。...监听hashchange事件,当hash改变触发。并且页面打开也同样触发一次。<!...总结基于Hash优势:浏览器不会将 URL.path # hash 后面的部分视作一个分页,因此默认的就不会触发页面的重载。在前端定义带有 hash 的链接总是安全的,因为它不会触发页面的重载。...劣势:客户端刷新,会把 SPA 的路由误当作 资源请求链接,所以需要配置 web 服务器以处理这些 “路由形式的URL” 以统一放回入口 index.html 文件。

    78310

    angular面试题及答案_angular面试

    Just-In-Time (JIT) 生成的JS代码,浏览器中进行。...— 大概的开发流程: – 使用Typescript开发 – 使用tsc编译 – 打包、压缩、部署 部署好之后,用户浏览器端...: – 浏览器下载js代码 – angular启动,浏览器开始JIT的编译过程 – 渲染页面 Ahead-of-Time(AOT...angular路由器使用base href 作为组件、模板的基地址,开发期间,通常会在index.html所在目录启动服务器,所以这个目录就是根目录,所以可以index.html 的顶部添加<base...6)如果应用程序较大,我会考虑延迟加载而不是完全捆绑的应用程序。 27. 使用Angular的好处 可以添加自定义的directive. 优秀的社区支持。 客户端和服务器的通讯非常便利。

    11K120

    asp.net core前后端分离项目使用gitlab-ci持续集成到IIS

    现在好多使用gitlab-ci的持续集成的教程,大部分都是发布到linux系统上的,但是目前还是有很大一部分企业使用的都是windows系统使用IIS部署.NET应用程序。...before_script和after_script的指令是管道执行前后所运行的指令。...IIS配置angular前端环境。 由于angular是单页面前端项目,所以需要配置URL重写,否则页面刷新会出现404。...IIS安装URL重写功能,若没有,可以通过Web平台安装程序安装功能。 angular项目的src目录下添加web.config文件,添加如下内容。...然后在前端项目根路径的angular.json文件添加如下配置,将web.config配置成发布复制过去。 IIS添加网站配置好后,将发布后的静态文件复制到网站目录即可。

    43710

    AngularDart4.0 英雄之旅-教程-08HTTP 顶

    进行更改时,请通过重新加载浏览器窗口来保持运行。 提供HTTP服务 您将使用Dart http软件包的客户端类与服务器进行通信。...这与@Component注解的提供者列表具有相同的效果。 注意:除非您有适当配置的后端服务器(或模拟服务器),否则此应用程序不起作用。 下一节将展示如何模拟与后端服务器的交互。.../angular.dart'; import 'package:http/http.dart'; import 'hero.dart'; 刷新浏览器。...刷新浏览器,更改英雄名称,保存更改,然后单击浏览器“后退”按钮。 现在应该继续进行更改。 添加加入英雄的能力 要添加英雄,应用程序需要英雄的名字。 您可以使用与添加按钮配对的输入元素。...当用户搜索框输入一个名字,你会对这个名字过滤的英雄进行重复的HTTP请求。 首先创建HeroSearchService,将搜索查询发送到服务器的Web API。

    11K30

    asp.net web api 使用自签名SSL证书

    3 IIS安装证书 注意同一个证书不要安装多次,若要重装,那么先删除已安装的证书。...: 有的导入似乎成功,但刷新页面,导入的证书消失。...选择 依提示操作,到输入密码,这里指的就是创建证书的密码 输入正确的密码,依提示操作即可。 但是有些计算机即使正常安装了证书,也无法导出,如下图,导出私钥为不可选。...解决办法是,安装证书的时候,要勾选对应选项,如下图所示: 2)双击证书(针对.cer格式或.p12格式),按提示安装,选择自动存储模式 这种方法不起作用,安装完依然不可用,截图如下。...选择 ,这种方式指定存储区也不起作用。 要导出 格式,然后双击安装才可以。 4 访问自签名Https网站 一般添加安全例外就可以,但是有些会显示不全,解决办法是: 例如火狐浏览器,点击暂时解除保护。

    2.5K70

    AngularDart 4.0 高级-路由概述 顶

    概观 浏览器是一种熟悉的应用程序导航模型: 地址栏输入一个URL,然后浏览器导航到相应的页面。 点击页面上的链接,浏览器导航到新页面。...并且路由器浏览器的历史记录记录活动,所以后退和前进按钮也起作用。 设置概述 添加angular_router 路由器功能位于angular_router库,该库自带软件包。...路由器插座 当此应用的浏览器URL成为/#/heroes,路由器将该URL与名为Heroes的RouteDefinition匹配,并在放置宿主视图HTML的RouterOutlet后显示HeroesComponent...您可以将该列表绑定到RouterLink或将该列表作为参数传递给Router.navigate方法。...危机详情显示列表下方的同一页面上的子视图中。 改变危机的名称。 请注意危机列表的相应名称不会更改。 ?

    6.1K20

    IIS发布PHP网站字体404解决办法

    这个问题的根本原因是 IIS 未能正确识别字体文件类型,导致浏览器加载页面无法正确获取所需字体资源,进而触发了404错误。这样的问题会导致网站页面的显示不正常,影响用户体验。...通过项目文件夹下的 web.config 文件添加特定的映射配置,我成功地告诉了 IIS 如何正确处理各种字体文件类型,从而消除了字体库文件 404 错误。...这些配置告诉了 IIS 接收到特定类型的字体文件请求应该如何处理,确保了浏览器能够正确加载这些字体资源。以下是详细的解决步骤:问题描述IIS发布PHP网站,前端出现了字体库文件 404 错误。...刷新您的网站页面,检查浏览器控制台,确认之前的字体文件 404 错误是否已解决。通过以上步骤,您可以成功解决 IIS 发布 PHP 网站字体文件 404 错误的问题。...总的来说,通过仔细分析问题、尝试不同方法并最终找到可行的解决方案,我成功地优化了网站的字体文件加载机制,提高了用户体验,同时积累了更多在 IIS 部署遇到问题的解决经验。

    12810

    我的 .NET Core 博客性能优化经验总结

    .NET Core 的实践过程,我也学习和收获了很多,因此写下此文,分享我自己的性能优化经验。 没有银弹 首先,每个系统都是不同的。...我们网站通常要加载许多不同的库和资源,有图片,CSS,JS等。而浏览器大量的时间开销在于对这些资源发起请求,等待响应。即使你的文件很小,但是太多的请求数量会明显降低网页加载速度。...使用 ASP.NET Core 开发的网站,部署Azure上默认就会开启gzip,不需要自己996去研究。...然而,如果你不幸没有使用 Azure,那么自己稍微996一下,IIS上开启压缩也不难,可以点点鼠标就搞定,也可以通过Web.config开启(.NET Core部署IIS下也认web.config)...实际上我公司的主要工作目前也是写angular,博客曾经的.NET Framework版的后台也用过angularjs以及angular2,经过一系列的实践表明,我博客这样的内容站用angular收益并不大

    3.4K10

    Visual Studio 调试系列12 远程调试部署远程计算机IIS上的ASP.NET应用程序

    03 应用程序已在IIS运行? 本文包括Windows服务器上设置IIS的基本配置以及从Visual Studio部署应用程序的步骤。...“角色服务”步骤,选择所需 IIS 角色服务,或接受提供的默认角色服务 。 如果你想要启用部署使用的发布设置和 Web 部署,请确保IIS 管理脚本和工具处于选中状态。...07 选择部署选项 如果您需要帮助将应用部署IIS,请考虑这些选项: 通过 IIS 创建的发布设置文件和导入 Visual Studio 的设置部署。...某些情况下,这是一种将应用部署的快速方法。 创建发布设置文件,权限自动将会在 IIS 设置。 部署发布到本地文件夹并将输出的首选方法复制到 IIS 上的已准备好应用程序文件夹。...浏览器,转到 http:// 。 将显示 ASP.NET 网页。 在运行的 ASP.NET 应用程序,单击链接到有关页。

    3.9K10

    IIS的 Asp.Net Core 和 dotnet watch

    基于传统的.NET Framework的Asp.Net Mvc的时候,本地开发环境可以IIS建立一个站点,可以直接把站点的目录指向asp.net mvc的项目的根目录。...然后build一下就可以浏览器里面刷新到最新的修改了,也可以附加到w3wp的进程进行调试。...IIS的 dotnet watch 如何把Asp.Net Core部署IIS这里就不解释了,只贴一下我写的Cake部署脚本: 1 #addin "Cake.IIS" 2 #addin "Cake.Hosts...这样IIS访问的时候,AspNetCoreModule就会使用 dotnet watch run来运行我们的项目。就可以实现编辑代码->保存->浏览器刷新就可以直接看到结果了!。...使用附加到进程调试IIS的Asp.Net Core 由于Asp.Net Core是单独运行的Console应用,所以调试部署IIS的Asp.Net Core的时候就不是像之前那样附加到w3wp进程了

    1.7K90

    Typecho上传附件失败最佳解决方法

    false) // GAE ; } 修改为: public static function isAppEngine(){ return false; } 修改之后重启服务器,发现不起作用...3.但是又遇到了问题,上传一个图片之后,加入文章里面发现根本打不开这个图片,单独浏览器输入这个图片的URL,显示: 401 - Unauthorized: Access is denied due to...继续工作,打开IIS服务器,找到网站下面的uploads目录,点击选择权限,继续进行上面修改777的操作,修改之后重启服务器,完美解决!...博主的发现 我发现还是有个问题,就是每个图片上传之后,还是不能直接打开,需要到IIS上单独对文件修改权限,才能访问,有解决的还请指导一下!...试了一下,文件可以继承文件夹的权限了,但是每次还需要刷新everyone才可以,有解决办法欢迎指教!

    1.1K30

    使用Angular CLI生成 Angular 5项目

    最下面是devDependencies, 里面都是开发用的工具库, 可以看到angular cli就在里面....但是对已经生成的components/directives就不起作用了. 那么如何保证生成的项目的components/directives前缀是您想要的呢?...查看angular-cli.json, 可以文件的下方看到采用的是scss样式文件: ? 这样, 以后生成的component的默认样式文件就是scss了....综上, ng new 的这些参数可以在生成项目的时候作为命令的参数联合使用, 其中有一些参数也可以项目生成以后通过修改angular-cli.json文件来做修改....查看浏览器http://localhost:4200: ? ng serve的优点是, 当代码文件有变化的时候会自动重新构建并且刷新浏览器, 您可以试一下. 另外一种配置CLI的方法 ng set.

    1.9K30

    Angular CLI 创建你的第一个 Angular 示例程序

    cd my-app ng serve --open ng serve 命令会自动启动服务器,并监视你的文件变化,当你修改这些文件,它就会重新构建应用。...,启动完成后将会自动浏览器上打开链接,你应用服务器部署的端口为 4100。...看,你的应用正在使用一条消息欢迎你: 第四步:编辑你的第一个 Angular 组件 组件 是 Angular 应用的基本构造块。 它们屏幕上显示数据、监听用户输入,并根据这些输入采取行动。...; } 浏览器将会用修改过的标题自动刷新。 很不错,但还可以更好看。 打开 ./src/app/app.component.css 文件,并给这个组件提供一些样式。 ...比如说整理示例的代码,你需要修改的文件名字为 app.component.css,但是在你的文件系统,你可能只能知道 app.component.styl 这个文件。

    1.1K40

    (翻译)开始使用ABP.CORE模板 (ASP.NET Core with Angular)

    注意,npm安装包可能会出现一些警告信息,这不是我们的解决方案相关的一般没问题。该解决方案还可以配置yarn上运行,如果你的电脑可以使用yarn,我们建议使用。...When you open the application, you will see the login page: 项目一旦编译完成,你可以浏览器输入http://localhost:4200...部署Angular项目 我们用 angular-cli 工具来生成Angular解决方案,你可以用ng build 指令来发布你的工程项目,发布内容默认放在dist文件夹下,然后你可以将这个文件夹部署到...iis或者其他你喜欢的web服务器下面。...这个应用程序从主机的appsettings.json文件获取连接字符串。开始它和Web.Host的appsettings.json文件一样。确保配置文件的连接字符串是要数据库。

    2.9K20

    2020vue面试题及答案_人际关系面试题及答案

    Vue生命周期中有多个事件钩子,让我们控制整个Vue实例过程更容易形成好的逻辑。 12、第一次页面加载会触发哪几个钩子?...14、简单描述每个周期具体适合哪些场景 beforecreate : 可以在这加个loading事件,加载实例触发 created : 初始化完成的事件写在这⾥,如在这结束loading事件,异步请求也适宜在这...标签和Router.navigate⽅法47、请说下封装 vue 组件的过程?...url地址显⽰:query更加类似于我们ajaxget传参,params则类似于post,说的再简单⼀点,前者浏览器地址栏显⽰参数,后者则不显⽰ 注意点:query刷新不会丢失query...⾥⾯的数据params刷新会丢失params⾥⾯的数据49、vue mock数据 项⽬尝试了mockjs,mock数据,实现前后端分离开发。

    8.7K20
    领券