Question

我正在尝试缩短Angular项目中的import语句，即

import { AuthenticationService } from '../_services/authentication.service';

到

import { AuthenticationService } from '@app/_service';

我正在关注一篇文章，作者使用了该技术，并且按照他的描述进行了操作，但是当我尝试为该应用程序提供服务时，我收到以下错误消息：在终端即

  src/app/_helpers/jwt-interceptor.ts(6,41): error TS2307: Cannot find module '@app/_services'.

作者描述要在tsconfig.json中进行以下更改

我的 tsconfig.json 如下。

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "paths": {
    "@app/*": ["src/app/*"],
    "@environments/*": ["src/environments/*"]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

我也尝试了此视频中描述的解决方案，但是没有运气。我还使用index.ts文件将所有模块导出到目录中，如article中所述。

Short Imports with TypeScript Path Mapping

任何解决此问题的方法，或者我在这里做错了什么？

Answer 1

将index.ts文件添加到您的_services文件夹中，然后输入以下内容。

export * from './authentication.service';

然后确保您的导入与_services文件夹名称匹配（您可能忘记了结尾的's'）。

Answer 2

我认为您必须至少在导入中添加服务名称。

看看this article

Answer 3

通过将"baseUrl": "./"更改为"baseUrl": "src"，并从路径对象中省略@，我可以无错误导入。

{
      "compileOnSave": false,
      "compilerOptions": {
        "baseUrl": "src",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "experimentalDecorators": true,
        "module": "esnext",
        "moduleResolution": "node",
        "importHelpers": true,
        "target": "es2015",
        "typeRoots": [
          "node_modules/@types"
        ],
        "lib": [
          "es2018",
          "dom"
        ]
      },
      "paths": {
        "app/*": ["app/*"],
        "environments/*": ["environments/*"]
      },
      "angularCompilerOptions": {
        "fullTemplateTypeCheck": true,
        "strictInjectionParameters": true
      }
    }

Answer 4

如果缩短的路径不起作用，请尝试构建项目或重新启动代码编辑器，例如VS代码。

有关用法示例，请参见How to short path to file in Angular?。

简短的TypeScript导入语句语法在Angular中不起作用

4 个答案: