Angular 7 找不到使 tsconfig.json 路径映射工作的方法

typescript

Angular是一种流行的前端开发框架，它使用typescript作为主要的开发语言。在Angular 7中，我们经常会遇到一个问题，即无法找到使tsconfig.JSon路径映射工作的方法。在本文中，我们将探讨这个问题，并提供一些解决方案。

问题描述

在某些情况下，当我们在Angular 7项目中使用tsconfig.JSon的路径映射功能时，可能会遇到找不到路径映射的问题。这会导致我们在代码中使用路径别名时出现编译错误。

解决方案

有几种方法可以解决这个问题。下面我们将介绍其中的两种常见方法。

方法一：使用baseUrl和paths选项

在tsconfig.JSon文件中，我们可以使用baseUrl和paths选项来配置路径映射。baseUrl指定了源代码的根目录，而paths指定了路径别名和对应的实际路径。

下面是一个示例的tsconfig.JSon文件：

JSon
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@app/*": ["app/*"],
      "@shared/*": ["shared/*"]
    }
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

在上面的例子中，我们定义了两个路径别名：@app和@shared。这意味着当我们在代码中使用这些别名时，编译器会将它们解析为对应的实际路径。

例如，假设我们有一个文件app.component.ts，我们可以这样使用路径别名：

typescript
import { Component } from '@angular/core';
import { AuthService } from '@app/services/auth.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.CSS']
})
export class AppComponent {
  constructor(private authService: AuthService) { }
}

在上面的例子中，我们使用了@angular/core和@app/services/auth.service这两个路径别名。编译器会将它们解析为实际的路径，分别是'./node_modules/@angular/core'和'./src/app/services/auth.service'。

方法二：使用tsconfig-paths插件

另一种解决方法是使用tsconfig-paths插件。这个插件可以帮助我们在编译时解析路径别名。

首先，我们需要安装tsconfig-paths插件：

npm install tsconfig-paths --save-dev

然后，我们需要在项目的package.JSon文件中配置一个脚本，用于在编译之前运行tsconfig-paths插件。例如：

JSon
{
  "scripts": {
    "build": "tsc && tsconfig-paths register"
  }
}

在上面的例子中，我们将tsconfig-paths register命令添加到了build脚本中。这样，在每次编译之前，tsconfig-paths插件都会被执行，从而解析路径别名。

在本文中，我们讨论了在Angular 7中找不到使tsconfig.JSon路径映射工作的方法。我们提供了两种解决方案：使用baseUrl和paths选项，以及使用tsconfig-paths插件。这些方法都可以帮助我们解决路径映射的问题，使我们能够更方便地使用路径别名。希望本文对你有所帮助！