识别并修复 Angular 应用中构建和部署错误
介绍
Angular 是一个功能强大的框架，可让您非常轻松地构建和部署应用程序。在使用Angular CLI 中的ng build和ng deploy命令时，不可避免地会遇到构建和部署错误。因此，熟悉一些最常见的错误对您非常有帮助，这样您就不会陷入困境。
在本指南中，您将了解如何发现一些最常见的构建和部署错误以及如何在错误发生时立即解决它们。
让我们开始吧！
常见构建错误
在使用ng serve或直接运行ng build或ng build --prod重建应用程序时，可能会出现许多常见的构建错误。
未找到模块
最常见的 Angular 错误之一是臭名昭著的“模块未找到”错误。此错误经常出现，因为它可能由于多种因素而发生。此错误最常发生在您的开发环境中（运行ng serve时），当您在文件系统上创建了一个新模块，但 Angular 开发环境尚未获取新模块文件时。通常，可以通过停止ng serve进程并重新运行它来轻松修复此问题，因为这允许在后台运行的 Webpack 开发服务器在内存中捕获新文件。
房产不存在
另一个非常常见的 Angular 错误直接与 TypeScript 类型系统有关。幸运的是，此错误消息非常简单：属性“<property>”在类型“<Type>”上不存在。此消息通知您，您正在尝试访问您创建的类型或内置类型的属性。
例如，假设您创建了以下类型接口：
interface Person {
name: string;
age: number;
}
如果您现在尝试访问Person实例上不存在的属性favoriteAnimal，您的构建将失败并出现以下错误：Person 类型上不存在属性“favoriteAnimal”。只需将此新字段添加到您的界面或更改您尝试在代码中访问的值的类型，即可轻松解决此错误。
无法解析参数
此错误比前两个错误少见，但仍然相当常见。此错误很棘手，当 Angular 无法注入您尝试注入模块或组件的所有服务时发生。例如，假设您有一个组件DogComponent，如下所示：
export class DogComponent {
constructor(private dogService: DogService, private breedService: BreedService) {
}
}
此组件告知 Angular 依赖注入机制注入DogService和BreedService服务的实例。如果此代码给出错误Can't resolve all parameters for DogComponent... ，则说明 Angular 找不到DogService或BreedService。
为了修复此错误，您必须查看您尝试注入的服务并确保您已正确创建它们，以便 Angular 的依赖注入机制可以找到它们。
以下是发现和修复此错误的一些最常见方法：
- 您的服务缺少@Injectable()装饰器，您只需要添加这个装饰器。
- 您的服务指定了Injectable()而不是@Injectable()
- 您的服务指定了@Injectable而不是@Injectable()
- 您的服务是一个接口，而不是一个类。接口无法实例化。
您需要确保您的服务像这样声明，以便 Angular 能够正确找到它：
import { Injectable } from '@angular/core';
@Injectable()
export class BreedService {
}
常见部署错误
我们已经介绍了一些最常见的构建错误。在本节中，您将了解部署过程中可能发生的错误。所有这些错误都是通过 Angular CLI 运行某种形式的ng deploy的结果。由于 Angular 支持将应用程序部署到各种平台，因此此命令中可能会发生许多特定错误。
让我们开始吧！
未找到项目
运行ng deploy时可能遇到的最常见错误之一是Project not found...错误。当 Angular CLI 找不到要执行的项目时，就会发生此错误。幸运的是，这个错误通常很容易解决。修复此错误分为两个步骤：
- 确保已通过npm install -g @angular/cli在计算机上全局安装了 Angular CLI
- 确保您位于 Angular 应用本身的根目录中。这通常意味着您需要根据项目的设置向上或向下移动目录。
一旦您验证已在您的机器上全局安装了 Angular CLI 并且您位于正确的目录中，这个错误就会得到解决，因为 Angular 可以找到您的项目。
Firebase 目标错误
由于 Angular 支持多种部署平台，因此深入研究所有平台超出了本指南的范围。相反，我们将重点介绍其中一个部署平台（Firebase）的错误。特定部署平台上的大多数错误几乎总是某种配置错误。因此，您可以将您了解到的有关此错误的信息推断到其他部署平台上。
您可能会看到类似这样的 Firebase 错误：无法理解要部署哪些目标...。此错误表示运行ng deploy后执行的firebase init子命令出现了问题。您可以通过查看firebase.json文件来确认这是问题所在。此文件配置您的 firebase 部署，并通过firebase init命令自动生成。为了修复此错误，您必须验证firebase.json文件是否合适。如果该文件包含空对象，您可以手动创建它并重新运行ng deploy 。这是一个正常工作的firebase.json的示例：
{
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
结论
在本指南中，您了解了构建 Angular 应用时发生的三种最常见的构建错误。首先，您了解了如何解决在创建新模块后很容易在开发环境中发生的“模块未找到”错误。接下来，您了解了如何解决和发现最常见的 TypeScript 错误之一 — “类型上不存在属性”，以及如何解决可能在 Angular 的依赖项注入机制中发生的更棘手的“无法解析所有参数”错误。
除此之外，您还学习了如何轻松修复使用 Angular CLI 部署 Angular 应用时的一些常见错误。具体来说，您了解了如何修复“找不到项目定义”错误以及通过 Firebase 部署时可能发生的错误。
我希望本指南能让您在解决构建和部署 Angular 应用时可能发现的错误时更有信心。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~