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

当我们使用绝对路径的相对路径时,Angular 8中的问题(从angular 4升级后)

当我们使用绝对路径的相对路径时,Angular 8中可能会出现以下问题(从Angular 4升级后):

  1. 编译错误:在升级到Angular 8之后,由于路径解析的变化,之前使用的绝对路径可能无法正确解析,导致编译错误。

解决方案:在Angular 8中,可以使用新的路径解析规则来解决这个问题。可以通过在tsconfig.json文件中的"compilerOptions"下添加"paths"配置来映射绝对路径到相对路径。例如:

代码语言:txt
复制
"compilerOptions": {
  "baseUrl": "./src",
  "paths": {
    "@app/*": ["app/*"]
  }
}

上述配置将把以"@app/"开头的路径映射到"app/"目录下。

  1. 运行时错误:在升级到Angular 8之后,由于路径解析的变化,之前使用的绝对路径可能无法正确加载所需的模块或资源,导致运行时错误。

解决方案:在Angular 8中,可以使用相对路径来替代绝对路径,以确保正确加载所需的模块或资源。相对路径是相对于当前文件的路径,可以使用"./"表示当前目录,或者"../"表示上级目录。例如:

代码语言:txt
复制
import { MyComponent } from './my-component';
import { MyService } from '../my-service';

上述代码中,使用相对路径来引入了当前目录下的"my-component"组件和上级目录中的"my-service"服务。

总结:

在使用绝对路径的相对路径时,需要注意Angular版本升级可能带来的路径解析变化。为了避免编译错误和运行时错误,可以通过配置tsconfig.json文件中的"paths"来映射绝对路径到相对路径,并使用相对路径来引入所需的模块或资源。

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

相关·内容

【转载】【ionic+angularjs】angularjs ui-router路由简介

那么有人就会问:为什么Angular有了自带路由,我们还需要用ui-router呢?...有lossy(第一个参数url未被提供是否继承导航url进行构建href),inherit(是否继承当前url参数),relative(变化相对路径:如"^,定义状态是相对),absolute...onExit:function,退出一个状态回调函数。...4. 通过views实现多视图 多个示图使用views属性。该属性里包含了哪些ui-view,则对应template或templateUrl里内容就会填充该ui-view。...在使用这个选项使用angular-route有更大自由度。 预载入选项需要一个对象,这个对象key即要注入到控制器依赖,这个对象value为需要被载入factory服务。

7.4K70
  • 【ionic+angularjs】angularjs ui-router路由简介($urlRouter、$state、$stateProvider、ui-sref....)

    那么有人就会问:为什么Angular有了自带路由,我们还需要用ui-router呢?...有lossy(第一个参数url未被提供是否继承导航url进行构建href),inherit(是否继承当前url参数),relative(变化相对路径:如"^,定义状态是相对),absolute...onExit:function,退出一个状态回调函数。...4. 通过views实现多视图 多个示图使用views属性。该属性里包含了哪些ui-view,则对应template或templateUrl里内容就会填充该ui-view。...在使用这个选项使用angular-route有更大自由度。 预载入选项需要一个对象,这个对象key即要注入到控制器依赖,这个对象value为需要被载入factory服务。

    7.3K40

    AngularJS7那些不得不说事故

    这个模块简便安装方法是依赖npm, 而@angular/cli本身也依赖网络,因此AngularJS有了新版本,所有使用客户端ng建立项目,也就自动使用了AngularJS新版本。...更不要说npm升级中,也会直接升级了@angular/cli本身。   ...这时候可以首先卸载当前新版本@angular/cli, 然后使用npm 安装制定老版本,比如1.4版本客户端对应AngularJS4: npm install @angular/cli@1.4   ...此外就是通常我们使用import都是标准typescript形式,比如: import { Component, OnInit } from '@angular/core';   而我们对于JQuery.js...当然既然开发模式编译通过,这时候报错往往也是兼容性问题或者更严格语法限制。 编译结果,在老版本ios设备无法使用问题   为了支持更多设备,兼容早期ios浏览器是很有必要

    1.5K10

    Angular12个经典问题,看看你能答对几个?(文末附带Angular测试)

    在文中,我们将会接触到很多Angular 2重要概念,并附扩展阅读资料和自查小测试,供大家评估自己对Angular了解程度。 Angular 经典问题及扩展阅读 1. ...在Angular2中,组件中发生任何改变总是当前组件传播到其所有子组件中。如果一个子组件更改需要反映到其父组件层次结构中,我们可以通过使用事件发射器api来发出事件。...这通常用在setter中,类中值被更改完成。 可以通过模块任何一个组件,使用订阅方法来实现事件发射订阅。...loadChildren会根文件夹中获取绝对路径。RouterModule.forRoot()会获取routes数组并配置路由器。 在子模块中导入模块特定路由。...Observables和Promises核心区别是什么? 堆栈溢出就是一个区别:  异步操作完成或失败,Promise会处理一个单个事件。

    17.3K80

    angular5面试题_大数据面试题

    Angular提供了一种平滑机制,通过它我们可以将这些依赖项注入我们组件和指令中。因此,我们只是在构建依赖关系,这些依赖关系可以在应用程序所有组件之间注入。...,就认为程序有问题,不再进行检查。 可以采用如下方式避免 对于只用于展示数据,使用单向绑定,而不是双向绑定; Angular数据流是自顶而下,从父组件到子组件单向流动。...Module 延迟加载(Lazy-loading) 一个项目做得很大,为了提高首屏加载速度,可以通过Lazy-loading,访问到某些具体url,才加载那些不常用feature module...如果有遗留,那么打包也会打进来。 确保应用中已经移除了不使用第三方库。同上。 项目较大,考虑延迟载入(Lazy Loading), 保证首页加载速度。...选择哪个版本升级到哪个版本,会给出一步一步升级命令,直接执行就好。

    4.3K20

    忘记 Angular 3:Google 将发布 Angular 4

    英文:Prateek Tiwari 译文:codeceo www.codeceo.com/article/google-release-angular-4.html 2016年11月,Google...详细说明将在Angular 2到来短短6个月后发布Angular 3计划,每个人都大吃一惊。...GoogleIgor Minar最近在比利NG-BE 2016 Angular会议上说,Google将从版本2跳到版本4,以便升级数量与计划在发布中使用Angular 4路由器相关。...Angular团队致力于发生在三个周期内基于时间发布: 每周发布补丁。 每个主版本发布三个月次要版本。 主版本每六个月更换一次,易于迁移。 ?...这意味着有突破性变化,Minar保证,说: “这不会是一个大问题我们在整个Google做了这些迁移,所以这相当微不足道,但需要[一些干预]。

    99620

    【Hybrid开发高级系列】WebPack模块化专题

    /build/',也可以是一个绝对路径如http://www.xxxxx.com/。一般来说,我还是更推荐相对路径写法,这样的话整体迁移起来非常方便。那什么时候用绝对路径呢?...不一样是,它不仅仅是把公用代码提取出来放到一个独立文件供不同页面来使用,它更重要一点是:把公用代码和它使用者(业务代码)编译这一步就分离出来,换句话说,我们可以分别来编译公用代码和业务代码了...output.publicPath表示资源发布地址,配置过该属性,打包文件中所有通过相对路径引用资源都会被配置路径所替换。...)     1、notExtractLoader (可选)css没有被抽离,加载器不应该使用(例如:allChunks:false,在一个additional chunk中)     2、loader...没有html-loader,我们就需要采用一个构建步骤来搜索所有 HTML 文件,并将它们注入到 Angular $templateCache 中,以便在指令使用templateUrl属性,可以找到相应

    37050

    更小更快更易用Angular5管中窥豹

    /cli 如果你使用Angular CLI 1.0.0-beta.28或以下版本, 你需要先卸载angular-cli包,angular-cli向 @angular/cli转化: npm uninstall...注:如果要升级旧项目,本地包也需要升级,就先cd 项目,然后执行下述命令: rm -rf node_modules dist npm install --save-dev @angular/cli@...我们执行下打包命令: ng build --prod 查看命令输出窗口,对比下常规运行和打包内容,可以看到文件得到了非常大压缩: ?...Angular5项目运行与打包 接着我们又打包一个Angular4项目来比较一下: ?...Angular4项目打包 发现在Angular5中没有vendor,而总体大小也小了50多K,看上去貌似不多,但是按比例来看就很可观了,或许项目越大会越明显,时间有限,简单测试就到此先告一段落,后续再添加翻译和做进一步测试

    94630

    ionic3升级适配angular5

    先看下ionic3更新版本,同一天发布了三个版本,两个版本都是修复一两个小bug。 ? ionic3最新版本 ?...首次支持angular5ionic3版本 然后再看下angular5版本,同样发布了两个版本,一个是普通稳定版,一个是beta版,其中前者如图所示修复了几个bug,那若升级,当然选择普通稳定版比较好...于是我们升级步骤如下: 一、更新包依赖 删除package-lock.json和node_modules,然后修改package.json如下: "dependencies" : { ......自v4版本被弃用,现从@angular/platform-browser移除,换 @angular/core导入; platform-webworker: PRIMITIVE 自v4版本被弃用,现在移除.../common/http中,更新Http模块,需要使用HttpClientModule替换原有HttpModule,并在使用http服务,可以去掉map(res=>res.json())调用,因为新模块中已经不再需要了

    2.5K40

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

    name="start_time" [(ngModel)]="start_time" ngDefaultControl /> 六、其他问题 1. http请求内容带url后台解析错误 原因:angular...升级angular-cli版本失败 原因:angular-cli版本升级,对应webpack版本修改了默认disableHostCheck属性,导致ng serve --port会出现Invalid...升级angular(v2.4.0)到(v4.1.1)版本,左侧导航状态定位失效 原因:升级,router和componenthook顺序调整(仅根据个人观察,未经验证),导致组件状态未能在路由事件结束...无法router里获取RouteParamsAPI。 原因:angular(v4.1.1)中,使用ActivatedRouteAPI获取路由信息。...)版本,组件迁移状态更新失效 原因:升级,componenthook顺序调整,导致组件状态未能在component状态更新完成更新。

    8.2K00

    Angular 11 正式发布,放弃对IE 9、10支持!

    首先,比较受大家关注两点就是: 1、Angular 11.0.0 将放弃对TypeScript 3.9支持,转而升级到 TypeScript 4.0。...,并保证对那些新提出问题在两周之内进行处理,在这个过程中解决了一些有关 router 和 forms 热门问题。...后续计划改善社区支持以便更好解决问题,也同时改进接收社区捐款流程。...(5) 更新语言服务预览(Updated Language Service Preview) 语言服务当前基于视图引擎逐渐转变 , 更新语言服务为开发人员提供了更强大、更准确体验。...(7) 更快构建速度(Faster Builds) 使用 TypeScript v4.0之后让编译变得更快速。安装依赖项,ngcc 更新过程也将提高 2-4速度。

    2K20

    Angular v18 现已推出!

    在处理了开发人员反馈并完善了我们 Material 3 组件我们很高兴将它们升级为稳定版!... v18 开始,事件调度在使用混合渲染为事件回放提供支持。大多数开发人员不会直接与事件调度进行交互,因此让我们研究一下为什么事件回放很有用。您可以在下面找到一个简单电子商务网站模拟。...我们引入了人为加载延迟来模拟非常慢网络连接。想象一下,页面正在加载并且尚未补水,用户想要将多个耳机添加到他们购物车中。如果页面尚未冻结,因此不是交互式,则所有用户事件都将丢失。... v18 开始使用事件调度,Angular 将开始记录用户事件。一旦应用程序被水化,事件调度就会重播它们,我们最终在购物车中有六件商品。... v18 开始,所有组件和基元都完全兼容水合。我们部分补水计划我们在 ng-conf 和 Google I/O 上宣布了部分水合作用。这是一种技术,允许您在服务器端呈现逐步为应用补水。

    23310

    Angular vs React 最全面深入对比

    选择方法 在选择之前,我们尝试带着一些问题去审视你将要选择框架(或者是任何工具),尝试用这些问题答案来帮助我们更加了解框架,也更加让选择变得更容易 框架本身问题: 是否成熟?谁在背后支持呢?...该类库已被Angular采用其HTTP模块以及一些内部使用您执行HTTP请求,它返回一个Observable,而不是通常Promise。 虽然这个类库非常强大,但也很复杂。...无论如何,当你使用Angular,您至少应该了解RxJS基本知识。...又是碰到一些问题还不得不Google才能找到答案,但是,就像之前说,是否合适,还是取决于更多因素。...React 反观React升级倒是非常谨慎,这最新v15.5.0发布新闻博客中就能看出 不过,博客中能看到React即将迎来v16,不知道整个重写React会给我们带来什么惊喜。

    3.8K70

    Angular 6正式版发布,都有哪些新功能

    Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular运行速度问题。...官方升级手册链接如下: https://update.angular.io/ ng update可以帮助你使用正确版本依赖包,让你依赖包与你应用程序同步,使用 schematics ,第三方还能提供脚本更新...Shakable Providers 为了让你应用更小,我们将服务引用模块改为模块引用服务,这让我们只需要构建在模块里注入服务。...之前只有 v4 和 v6 是 LTS 版本,但为了使开发者从一个主版本更新到另一个主版本更容易,并给予项目充足时间来规划更新,Angular 团队表示 v4 开始,将扩大对所有主版本长期支持。...如何更新到 Angular 6.0.0 读者可以访问 update.angular.io 来得到升级应用信息和指导。

    4.2K20

    Angular 11正式发布:加入webpack 5,升级至TS 4.0,不再支持IE 9 和10

    现在我们可以报告原始目标已经完成了!我们已对所有三个仓库中所有问题完成了分类,并会持续对新报告问题做类似工作。 我们承诺是:未来,所有新报告问题都将在 2 周内完成分类。.../issues/18469 此外,我们已经关闭了热门度排第三问题: https://github.com/angular/angular/issues/11405 现在,我们正在为接下来对 Angular...在编译Angular CLI 将下载和内联在应用程序中使用和链接字体。我们会在使用版本 11 构建应用中默认启用此功能。要利用这一优化,你需要做就是更新自己应用!...安装依赖项,ngcc 更新流程现在加快到了 2-4 倍。 TypeScript v4.0 编译速度加快了。 实验性 Webpack 5 支持 现在,团队可以选择加入 Webpack v5 了。...我们一直都建议大家一次只升级一个主要版本,以获得最佳更新体验。 我们希望大家喜欢这次功能更新。

    3.3K30
    领券