我需要以角度更改导入网址答案

【问题标题】：I need to change import url in angular我需要以角度更改导入网址
【发布时间】：2020-09-04 10:04:27
【问题描述】：

我需要更改导入网址
从此
import { IBrand } from '../../../../@core/data';
到这里
import { IBrand } from '@app/@core/data';

我的前辈说@app更好，但我不明白为什么更好以及如何做到这一点，请帮忙

  "compileOnSave": false,
  "compilerOptions": {
    "importHelpers": true,
    "module": "esnext",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "plugins": [
      { "name": "tslint-language-service"}
    ]
  }
}

【问题讨论】：

请发布您的 TS config.json 和文件夹结构
{ "compileOnSave": false, "compilerOptions": { "importHelpers": true, "module": "esnext", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es2015", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2017", "dom" ], "plugins": [ { "name": "tslint-language-service"} ] } }

标签： angular typescript visual-studio-code

【解决方案1】：

您可以在路径下的 tsconfig 文件中执行此操作：

{
  "compileOnSave": false,
  "compilerOptions": {
    ...,
    "module": "esnext",
    "moduleResolution": "node",
    "paths": {
      "@app/@core": ["src/app/@core"], // here
      "@app/@core/*": ["src/app/@core/*"],
      "@app/environments/*": ["src/environments/*"]
    },
    ...
  },
  "angularCompilerOptions": {
  "fullTemplateTypeCheck": true,
  "strictInjectionParameters": true
  }
}

为什么这样更好？如果更改文件的位置结构，则不必更新导入路径，这也会造成很多不必要的 git 更改。

此外，如果需要，您可以为同一个导入添加多个路径：

paths: {
    "@app/@core": ["src/app/@core", "src/app/@otherpath"]
}

不，假设你有这个导入：

import { AppService } from 'app/@core/services';

你的配置是：

paths: {
  "@app/@core": ["src/app/@core", "src/app/@otherpath"]
}

如果你把它移到src/app/@core/nested-folder，你唯一需要改变的是：

paths: {
  "@app/@core": ["src/app/@core/nested-folder", "src/app/@otherpath"]
}

或者也保留旧的：

paths: {
  "@app/@core": ["src/app/@core", "src/app/@core/nested-folder", "src/app/@otherpath"]
}

您的导入语句保持不变。

【讨论】：