开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

默认路由在angular 5中不起作用

在Angular 5中，默认路由是指在路由配置中设置的空路径（''）路由。默认路由在Angular应用中起到了重要的作用，它会在应用初始化时自动导航到指定的组件。

在Angular 5中，默认路由可能不起作用的原因有以下几点：

路由配置错误：首先需要确保在路由配置文件（通常是app-routing.module.ts）中正确地设置了默认路由。默认路由应该被定义为空路径（''）并指向相应的组件。
路由模块未导入：如果默认路由所在的模块没有被正确地导入到应用的根模块（通常是app.module.ts）中，那么默认路由将无法生效。需要确保在根模块中正确地导入了包含默认路由的模块。
路由出口未定义：默认路由需要在应用的HTML模板中定义一个路由出口（通常是<router-outlet></router-outlet>），用于显示默认路由导航到的组件。如果路由出口未定义或者定义错误，那么默认路由将无法正常显示。
其他路由规则匹配：如果在路由配置中存在其他路由规则，且这些规则与默认路由的路径匹配，那么默认路由可能会被其他规则拦截而无法生效。需要确保默认路由的路径是唯一的，或者将默认路由放在其他规则之前。

总结起来，要解决默认路由在Angular 5中不起作用的问题，需要检查路由配置是否正确、模块是否导入、路由出口是否定义正确，并确保默认路由的路径唯一且没有被其他规则拦截。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：提供弹性计算能力，支持多种操作系统，适用于各类应用场景。详情请参考：https://cloud.tencent.com/product/cvm
腾讯云云数据库MySQL版：提供高可用、可扩展的MySQL数据库服务，适用于各类应用场景。详情请参考：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务，适用于海量数据存储和静态网站托管等场景。详情请参考：https://cloud.tencent.com/product/cos

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

angular2中在使用路由懒加载时候出现的错误

ERROR in Cannot use 'in' operator to search for 'providers' in null 出现这个问题的原因是，在使用懒加载的时候，没有指定module，

5.1K4 0

Angular4记账webApp练手项目之三（在angular4项目中使用路由router）

]指令，绑定样式安装 npm i --save @angular/router 官方网址：https://angular.io/guide/router 引入和使用要使用路由，我们需要在 app.module.ts...具体如下： import { RouterModule } from '@angular/router'; imports: [ BrowserModule, FormsModule...} from '@angular/router'; export const ROUTES: Routes = [ { path: '#', component: AccountingComponent... 可以看出存在问题，进入时没有默认页面，必须点击后才会到对应页面，可以将路由中#改为空，可以实现默认进入记账页面...这里写图片描述二级路由（子路由使用）我们当初设计统计有两个页面，按年统计，和按月统计。现在来完成这个。

1.4K3 0

4 种在 Linux 中检查默认网关或者路由器 IP 地址的方法

你应该意识到你的默认网关是你的路由器的 IP 地址。一般这是在安装过程中由操作系统自动检测的，如果没有，你可能需要改变它。如果你的系统不能 ping 自身，那么很可能是一个网关问题，你必须修复它。...ip 命令：类似于 ifconfig，常用于设置静态 IP 地址、路由 & 默认网关，等等。...1）在 Linux 中如何使用 route 命令检查默认的网关或者路由 IP 地址？ route 命令被用来显示和操作 IP 路由表。...IP 命令类似于 ifconfig，常用于配置静态 IP 地址、路由 & 默认网关，等等。 ifconfig 命令因为多年没有维护而被遗弃了，即使它仍然在大多数 Linux 发行版上可获得。...在主要的 Linux 发行版中都默认预装了 iproute2 。如果没有，你可以在你的终端中在包管理器的帮助下通过指定 iproute2 来安装它。

5K3 0

使用Angular CLI生成 Angular 5项目

但是对已经生成的components/directives就不起作用了. 那么如何保证生成的项目的components/directives前缀是您想要的呢?...查看angular-cli.json, 可以在文件的下方看到采用的是scss样式文件: ? 这样, 以后生成的component的默认样式文件就是scss了....如果想手动为项目配置路由的话, 还是需要一些步骤的, 所以可以使用这个参数直接生成带路由配置的项目. 看一下项目路由文件: ? 再查看一下app.module: ?...综上, ng new 的这些参数可以在生成项目的时候作为命令的参数联合使用, 其中有一些参数也可以在项目生成以后通过修改angular-cli.json文件来做修改....就拿当前这个项目来说, 它的默认样式文件类型是scss: ? 如果我在该项目目录执行: ng set defaults.styleExt css 那么该项目的设置就会改变: ?

1.9K3 0

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

修改后的应用程序应该提供一个可选的视图（Dashboard和Heroes），然后默认为其中的一个。...由于路由器在自己的包中，首先将该包添加到应用的pubspec： ? 并非所有的应用程序都需要路由，这就是为什么Angular路由器处于独立的可选软件包中的原因。...'Dashboard']), 或者，您可以将dashboard 定义为默认路由。...在路由和导航页面阅读有关默认路由和重定向的更多信息。将导航添加到dashboard 在模板上添加dashboard 导航链接，在heroes链接上方。...在仪表板或英雄列表中选择英雄不起作用。你会接下来的处理。选择一个仪表板英雄当用户选择仪表板中的英雄时，应用程序应该导航到HeroDetailComponent以允许用户查看和编辑选择的英雄。

17.6K3 0

使用angular4和asp.net core 2 web api做个练习项目(四)

的路由router.navigate跳转的话会有问题. ?...做一些清理工作: 由于用户注册是在authorization server进行的, 所以把angular项目中的相关文件以及app.module里面的调用删除......在add-client.component.ts里面: import { SettingsService } from '../.....发现点击添加按钮不起作用!!!!, 点击明细也不起作用!!!!...同样在edit-client里面修改一下: import { SettingsService } from '../..

1.5K10 0

Angular CLI 简介

但是对已经生成的components/directives就不起作用了. 那么如何保证生成的项目的components/directives前缀是您想要的呢?...查看angular-cli.json, 可以在文件的下方看到采用的是scss样式文件: 这样, 以后生成的component的默认样式文件就是scss了....下面再生成两个components: ng g c dashboard ng g c order 然后在app-routing.module里面设置路由: 再修改一下html: 运行一下应用: ng...使用ng test -sr或者ng test -w false 执行单次测试测试代码覆盖率: ng test --cc 的报告默认是生成在/coverage文件夹下, 但是可以通过修改.angular-cli.json...s 在随机的端口编译和serve 默认true --specs -sp 默认是执行所有的spec文件, 如果想执行某个spec就使用这个参数, 默认是all --webdriver-update -wu

6.1K11 0

Angular JS + Express JS入门搭建网站

由此在项目不忙的时候，自己于是有时间和兴趣学习一下Angular JS与Express JS。　　同时自己实现了一个最简单的Angular JS + Express JS的网站示例。一....建议使用另外一种方式，就是用Angular JS的另一个Module ng-route，做路由控制，针对不同的路径，在同一个文件中定义好各自的控制器。...文件，否则不起作用。　　...Express JS 　　在示例的前端中，我们使用Angular JS框架开发了Html页面以及对应的JS文件。但网站的后台就要用其他技术了。...http.createServer(app).listen(3000); 　　这里，就是使用Express JS建立一个server，注意第8行代码的作用是指定页面的文件夹，第10句的作用是关于路径/的路由信息在

4.4K6 0

Angular 路由配置（预加载配置，懒加载配置）

forRoot()//在主模块中定义主要的路由信息 forChild()``//应用在特性模块（子模块）中（2）懒加载：loadChildren 此处并没有将对应的模块加入到AppModule中，而是通过...loadChildren的属性值由三部分组成：需要导入Module的相对路径 #分隔符导出模块类的名称（3）预加载在使用懒加载的情况下，路由第一次加载某个模块时，有时反应有延迟。...Angular提供了两种加载策略， PreloadAllModules-预加载 NoPreloading-没有预加载（默认）。...//使用默认预加载-预加载全部模块 import { NgModule } from '@angular/core'; import { AppComponent } from '....--此处依照下面的路由配置，默认显示AComponent组件的内容--> 复制代码 (1)在main-routing.module.ts里面配置文件夹main下的路由，需要引用各组件的component

3.2K3 0

Angular 从入坑到挖坑 - Router 路由使用入门指北

一、Overview Angular 入坑记录的笔记第五篇，因为一直在加班的缘故拖了有一个多月，主要是介绍在 Angular 中如何配置路由，完成重定向以及参数传递。...默认的情况下 app 文件夹是整个应用的根目录，所以我们直接使用 index.html 中使用默认的即可 <!...在 Angular 项目中，系统的路由需要我们将一个 url 地址映射到一个展示的组件，因此需要手动的去设置 url 与组件之间的映射关系因为我们在使用 Angular CLI 创建项目时，选择了添加路由模组...当定义好路由信息后，我们需要在页面上使用标签来告诉 Angular 在何处渲染出页面。...，对于进入系统后的默认路径，我们会选择重定向到一个具体的地址上，这里我们在定义路由信息时，定义了一个空路径用来表示系统的默认地址，当用户请求时，重定向到 /home 路径上，因为只有完整的 url 地址匹配空字符串时才应该进行重定向操作

4.2K5 0

Angular性能优化实践——巧用第三方组件和懒加载技术

应该有很多人都抱怨过 Angular 应用的性能问题。其实，在搭建Angular项目时，通过使用打包、懒加载、变化检测策略和缓存技术，再辅助第三方组件，便可有效提升项目性能。...但是发布后，用户打开页面在加载时间上要比开发环境有所延长，带来的用户体验较差。经过调研，发现在Angular的默认中，NgModule都是急性加载的，也就是会在应用加载时尽快加载。...在懒加载模块的路由模块中，添加一个指向该组件的路由。本次的demo存在两个懒加载的模块。 ? ? 2. 建立导航UI 虽然可以直接在地址栏直接输入URL，但是有导航UI会更好用。...导入与路由配置 CLI会将每个特性模块自动添加到应用级的路由映射表中，最后通过添加默认路由来最终完成。 ? 4. 特性模块内部 ?...这种方式下 Angular 就会知道这个路由列表只负责提供额外的路由并且其设计意图是作为特性模块使用。你可以在多个模块中使用 forChild()。

4.1K2 0

Angular CLI 使用教程指南参考

npm install -g angular-cli 在 Mac 或 Linux 平台上，你可能需要添加sudo前缀提权进行全局安装： sudo npm install -g angular-cli...ng serve 将会自动在浏览器中打开默认地址 http://localhost:4200/....参数描述 --flat 不在自用目录内创建代码 --route= 指定父路由.仅用于生成组件和路由.默认为指定的路径....--skip-router-generation 跳过生成父路由配置。只能用于路由命令。 --default 指定路由应为默认路由。 --lazy 指定路由是延迟的。默认为true。...此选项还可以使命令在项目目录外工作 ng set 命令描述 ng get [options] 在Angular

3K5 0

Angular2 ：从 beta 到 release4.0 版本升级总结

升级angular-cli版本失败原因：angular-cli版本升级后，对应webpack版本修改了默认的disableHostCheck属性，导致ng serve --port会出现Invalid...进行静态引导.静态方案可以生成更小，启动更快的应用，默认优先使用。但此处因为有些动态计算环境的代码，故编译失败，此处手动关闭。 5....解决办法：目前在路由事件结束(NavigationEnd)时，手动更新组件状态。的内嵌样式失效。"...在webstorm里，更改文件不能在浏览器中更新输出。原因：webstorm里面默认启用”safe write”，将保存先存到临时文件。...原因：angular(v4.1.1)中，使用ActivatedRoute的API获取路由信息。

8.2K0 0

🔥【Angular教程】路由入门

本篇我们就一起来看一看在Angular中如何使用路由。...设置有效的默认路由由于我们项目默认启动后无具体路由匹配这样并不友好，我们需要设置一个有效的默认路由来展示给用户。配置的默认路由应该在通配路由之上。...在路由定义时配置需要携带的参数令牌格式: 在路由配置的path后补充格式为/:key的令牌占位 { path: 'detail/:id', component: UserDetailComponent...通过routerLink携带参数复制代码在Angular获取路由参数需要用到ActivatedRoute: 使用ActivatedRoute...angular中的Router模块提供来两种预加载的策略：完全不预加载，这是默认值。惰性加载的特性区仍然会按需加载。预加载所有惰性加载的特性区。

4.4K5 0

Angular学习(01)-架构概览

另一种方式是，在上层模块的路由表中使用 loadChildren 加载各个功能模块，然后各个功能模块默认路由都显示成空视图，各自内部再通过配置 children 的路由表方式来管理各个模块内部自己的路由表...在利用 Angular Cli 工具生成脚手架时，默认就已经生成了很多配置项，而且此时，项目已经是可以运行的，因为也自动生成了一个根模块和根视图，默认页面是 Angular 的欢迎界面。.../node_modules/@angular/cli/lib/config/schema.json", // 默认的配置项，比如默认配置了 ng g component 生成组件时应该生成哪些文件等等...比如，我们新创建个 Home 模块，然后在根模块中创建个 app-routing 路由配置文件： //app-routing.module.ts import { NgModule } from '@angular...；去根模块的配置中找到根模块的路由配置表，来查看第一个层级的路由分别对应哪些模块；去这些相应的模块中，查看它们各自内部的路由配置表，来确定各自模块的默认视图组件是哪个，下一个层级的各个路由所对应的视图组件

3.6K5 0

angular 路由使用

from '@angular/core'; import { CommonModule } from '@angular/common'; // 引入路由模块 import { Routes, RouterModule...} from '@angular/router'; // 引入被路由的组件 import {HomePageComponent} from '..../scence-station/home-page/home-page.component'; // 定义路由 const routes: Routes = [ // 无路由时默认跳转路由 {...redirectTo: '/homePage', pathMatch: 'full' }, { path: 'homePage', component: HomePageComponent }, // 无匹配路由时默认路由...从路由中获取参数 // 引入Router import { ActivatedRoute } from '@angular/router'; // 注入ActivatedRoute constructor

1K1 0

angular4实战（4）ngrx

主要有四个模块，分别是 ngrx/store， ngrx/effects， ngrx/router-store， ngrx/store-devtools 本次实例用的是ngrx 4.x版本，因为没有跟路由关联...但自己本地没有把这段代码跑成功，未报错，但不起作用，就用做简单的方法来实现reducer的汇总。.../app.component.less'], }) 在loading写入根组件，这里有两点注意。...在本例中，如果把async这个过滤器取消的话，会造成一直loading，因为组件无法在监听到控制loading值的改变，也就无法更新视图了。...项目地址：https://github.com/jiwenjiang/angular4-material2

1.1K3 0

Angular4中路由Router类中navigate跳转用法

官方地址：https://angular.cn/ 路由文档：https://angular.cn/api/router/Router#instance-methods 在学习的过程中首先要学习掌握框架的基础知识...路由配置（Route） import { NgModule } from '@angular/core'; import { RouterModule, Routes } from...默认值为false，设为true，如（/login?...(['home'],{ fragment: 'top' }); 保留之前路由中的锚点，将 preserveFragment 默认为false，设为true，如（/home#top to /role#top...默认为false，设为true this.router.navigate(['/home'], { skipLocationChange: true }); 路由不进行跳转，将 replaceUrl

6770 0

Angular实战之使用NG-ZORRO创建一个企业级中后台框架（进阶篇）

ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。在第一轮 ngOnChanges() 完成之后调用，只调用一次。...ngOnDestroy() 每当 Angular 每次销毁指令/组件之前调用并清扫。在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。在 Angular 销毁指令/组件之前调用。.../pages目录下创建我们的博客项目模块（带路由配置模块）：　　我们在开发一个项目可能会存在多个模块，比如说一个商城。...修改项目默认调转页面，Angular应用多模块路由配置：找到app-routing.module.ts文件，在【routes】对象中声明新模块路由，以及项目默认调转页面地址修改。 ?...在my-blog项目中创建博客后台页面首页组件，配置路由（多模块路由配置），声明运行组件： 1、创建首页组件： ng generate component /pages/my-blog/index ?

4K2 0

Ionic4与Ionic3部分比较

/core模块，创建完成后到目录结构如下图所示，它不再像ionic3那样封装了angular项目，而是直接就是一个angular项目，而且默认懒加载： ?...image.png 二、路由差异也许Ionic 4中最显着的变化，以及需要对现有应用程序进行最大改变的变化，是转向Angular风格的路由。...常见的有如下几个： modal-controller popover-controller action-sheet-controller loading-controller …… 前面2个一般是有自定义UI的，在ionic3...中是可通过自定义组件注入ViewController来关闭窗口，在ionic4中已经没有这个方法，改为通过监听事件或回调给外面的xxx-controller来关闭。...默认动不动几十到上百个js文件给人有点凌乱的感觉。

7K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭