Angular10 中配置@路径别名

Angular10中配置@路径别名

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

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

  1. tsconfig.json工作空间中各项目的默认TSP配置
  2. tsconfig.base.json工作空间的所有项目使用的基础TS配置,所有其它的配置文件都是继承自这个基础文件
  3. tsconfig.app.json应用专属的TS配置包括TSAngular模板编译器的选项
  4. tsconfig.spec.json应用测试的TS配置
    在这里插入图片描述
主要配置是在tsconfig.base.json
  1. 因为在TS的配置中有介绍,在compilerOptions中添加字段paths来进行声明映射

    {
        "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. 没有使用@/
    在这里插入图片描述

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值