另一篇 Angular 文章，部分配置和环境

在我之前的文章中，我们学习了如何生成组件。在继续之前，我认为我们应该了解一下有关配置和环境的各种概念。

有不同的配置之王：Angular 行为和 Typescript 编译器。今天我们来看看 Angular 部分，它都在 angular.json 项目中。

此文件描述了您的所有项目，并遵循 Angular CLI 中的架构：/@angular/cli/lib/config/schema.json

“项目”是主要部分。在这个中，您会看到“原理图”和“架构师”。

架构师描述 CLI 的行为：构建、服务、测试……

示意图描述了如何生成代码。这就是我们今天要做的。

这是我在第一篇文章之后的内容：

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
},

我们可以看到它包含“scss”作为样式键。这是因为，当我创建项目时，我对 cli 提示符回答了“scss”。

但我想做更多。通常我更喜欢使用单文件组件模式构建组件。这就像 VueJS 所做的那样。您的样式、html 和打字稿代码位于一个文件中。这是因为它迫使您构建小组件。
为此，请添加以下行： inlineStyle 和 inlineTemplate

"schematics": {
  "@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": true,
    "inlineTemplate": true
  }
},

现在，当您运行 nggenerate component my-new-component 时，它将仅创建打字稿文件。

我们将继续进行一些优化。最佳实践解释说，您应该始终将更改检测设置为“OnPush”。因此，应该在组件生成期间完成。
为此，请添加以下行：changeDetection

"@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": true,
    "inlineTemplate": true,
    "changeDetection": "OnPush"
  }
},

就是这样，您现在已经设置了默认的项目代码生成。

在之前的 Angular 版本中，您可以定义“standalone: true”。但现在这是默认行为。

我将以环境概念结束。当您构建应用程序时，通常会依赖 API。这些 API 可能在本地提供（当您编写代码时在您的计算机上），但也可以由测试服务器、预生产服务器或生产服务器提供。
所以你必须在变量中设置主机名。

Angular 为此提供了一种解决方案：环境。

ng 生成环境

此命令将在您的项目中添加 2 个新文件：environment.ts 和environment.development.ts
它还会通过在节点“projects.my-new-project.architect.configurations.development”中添加“fileReplacements”数组来修改您的 angular.json

在构建过程中，它会用所需的环境文件（例如environment.development.ts）替换所需的environment.ts。

您可以在其中存储所有特定的环境变量，并在需要的任何地方导入environment.ts。但请注意不要导入其他环境.*.ts，因为它们在运行时不可用！

这是环境示例：

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
},

所以你只需要创建一个新的“environment.development.ts”，其中包含所需的变量。然后，更改 angular.json 以在“project.architect.configurations.Production”下添加 fileReplacements 部分，如下所示：

"schematics": {
  "@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": true,
    "inlineTemplate": true
  }
},

在我看来，Angular 应该同时创建开发和生产文件。有点奇怪。

Ho，我忘了说，在 Angular v19 中，你可以在启动时定义全局变量。这可能是环境概念的替代方案，但它需要在构建过程中进行更多设置。

祝你有美好的一天☁️

[注意] 所有文章均使用 Angular v19*

中的命令

以上是另一篇 Angular 文章，部分配置和环境的详细内容。更多信息请关注PHP中文网其他相关文章！