浅谈Angular10配置@路径别名的方法


本文摘自PHP中文网,作者青灯夜游,侵删。

本篇文章给大家介绍一下Angular10配置@路径别名的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

相关推荐:《angular教程》

Angular10中配置@路径别名

Angular10中的项目文件结构 中文网站

Angular10中的tsconfig配置被分成了四个文件

  • tsconfig.json工作空间中各项目的默认TSP配置

  • tsconfig.base.json工作空间的所有项目使用的基础TS配置,所有其它的配置文件都是继承自这个基础文件

  • tsconfig.app.json应用专属的TS配置包括TSAngular模板编译器的选项

  • tsconfig.spec.json应用测试的TS配置

在这里插入图片描述

主要配置是在tsconfig.base.json

1、因为在TS的配置中有介绍,在compilerOptions中添加字段paths来进行声明映射

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

{

    "compileOnSave": false,

    "compilerOptions": {

        "baseUrl": "./",

        "outDir": "./dist/out-tsc",

        "sourceMap": true,

        "declaration": false,

        "downlevelIteration": true,

        "experimentalDecorators": true,

        "moduleResolution": "node",

        "importHelpers": true,

        "target": "es2015",

        "module": "es2020",

        "lib": ["es2018", "dom"],

        "paths": {

            "@/*": ["src/*"]

        }

    }

}

2、之后使用@/就相当于使用src/

3、使用了@/

在这里插入图片描述

4、没有使用@/

在这里插入图片描述

可能会出现配置了之后在使用了的时候,编辑器抛出下划线警告,如果确定配置没问题,可以尝试重启编辑器试试

更多编程相关知识,请访问:编程视频!!

以上就是浅谈Angular10配置@路径别名的方法的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

浅谈一下Angular模板引擎ng-template

浅谈Angular8兼容ie10+版本的方法

深入了解Angular中的模块和懒加载

浅谈Angular如何借助第三方组件和懒加载技术进行性能优化

深入了解Angular中的pipe(管道)

5种Angular中组件通信的方法介绍

Angular中什么是ivy编译?如何开启ivy编译?

浅谈Angular中父子组件间相互传参的方法

Angular脏值检测与vue数据劫持的区别是什么

详解Angular中jsencrypt插件的使用方法

更多相关阅读请进入《Angular》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...