Skip to content

Commit

Permalink
docs: extract dict
Browse files Browse the repository at this point in the history
  • Loading branch information
asnowwolf committed Nov 8, 2023
1 parent 26e3779 commit cf158f3
Show file tree
Hide file tree
Showing 1,281 changed files with 138,068 additions and 0 deletions.
156 changes: 156 additions & 0 deletions aio/tools/translator/dict/angular/content/cli/index.dict.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
CLI Overview and Command Reference

CLI 概览与命令参考手册

The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell.

Angular CLI 是一个命令行界面工具,可用于初始化、开发、构建和维护 Angular 应用。你可以在命令行窗口中直接使用此工具

Installing Angular CLI

安装 Angular CLI

Major versions of Angular CLI follow the supported major version of Angular, but minor versions can be released separately.

Angular CLI 的主版本会跟随它所支持的 Angular 主版本,不过其小版本可能会独立发布。

Install the CLI using the `npm` package manager:

使用 `npm` 包管理器来安装 CLI:

For details about changes between versions, and information about updating from previous releases, see the Releases tab on GitHub: https://github.com/angular/angular-cli/releases

关于版本变更的详情,以及如何从以前版本升级的信息,参阅 GitHub 上的 Releases 页:https://github.com/angular/angular-cli/releases

Basic workflow

基本工作流

Invoke the tool on the command line through the `ng` executable.
Online help is available on the command line.
Enter the following to list commands or options for a given command \(such as [new](cli/new)\) with a short description.

通过 `ng` 可执行文件可以在命令行上调用此工具。命令行中还提供了联机帮助。输入下列命令列出命令或指定命令(如 [generate](cli/generate))选项的简短说明。

To create, build, and serve a new, basic Angular project on a development server, go to the parent directory of your new workspace use the following commands:

要想创建、构建或在开发服务器上运行一个新的、基本的 Angular 项目,请到这个新工作区的上级目录中运行下列命令:

In your browser, open http://localhost:4200/ to see the new application run.
When you use the [ng serve](cli/serve) command to build an application and serve it locally, the server automatically rebuilds the application and reloads the page when you change any of the source files.

在浏览器中,打开 http://localhost:4200/ 查看运行效果。当你使用 [ng serve](cli/serve) 命令来构建应用并在本地启动开发服务器时,服务器会自动重新构建此应用,并在修改源码时重新加载此页面。

Workspaces and project files

工作区与项目文件

The [ng new](cli/new) command creates an *Angular workspace* folder and generates a new application skeleton.
A workspace can contain multiple applications and libraries.
The initial application created by the [ng new](cli/new) command is at the top level of the workspace.
When you generate an additional application or library in a workspace, it goes into a `projects/` subfolder.

[ng new](cli/new) 命令会创建一个 *Angular 工作区*目录,并生成一个新的应用骨架。每个工作区中可以包含多个应用和库。由 [ng new](cli/new) 命令创建的初始应用位于工作区的顶层。你在工作区中生成的其它应用或库,会放在 `projects/` 子目录下。

A newly generated application contains the source files for a root module, with a root component and template.
Each application has a `src` folder that contains the logic, data, and assets.

新生成的应用中包含根模块的源码,还有根组件和模板。每个应用都有一个 `src` 目录,其中包含逻辑、数据和静态文件。

You can edit the generated files directly, or add to and modify them using CLI commands.
Use the [ng generate](cli/generate) command to add new files for additional components and services, and code for new pipes, directives, and so on.
Commands such as [add](cli/add) and [generate](cli/generate), which create or operate on applications and libraries, must be executed from within a workspace or project folder.

你可以直接编辑这些生成的文件,也可以使用 CLI 命令来添加或修改它们。使用 [ng generate](cli/generate) 命令也可以添加其它组件和服务,以及管道、指令的源码等。必须在工作区或项目目录下才能执行 [add](cli/add)[generate](cli/generate) 之类的命令,因为这些命令需要在应用或库上进行创建或其它操作。

See more about the [Workspace file structure](guide/file-structure).

欲知详情,参阅[工作区的文件结构](guide/file-structure)

Workspace and project configuration

工作区与项目的配置

A single workspace configuration file, `angular.json`, is created at the top level of the workspace.
This is where you can set per-project defaults for CLI command options, and specify configurations to use when the CLI builds a project for different targets.

工作区的配置文件 `angular.json` 位于此工作区的顶层。在这里,你可以设置全工作区范围的默认值,并指定当 CLI 为不同目标构建项目时要用到的配置。

The [ng config](cli/config) command lets you set and retrieve configuration values from the command line, or you can edit the `angular.json` file directly.

[ng config](cli/config) 让你可以从命令行中设置和获取配置项的值。你也可以直接编辑 `angular.json` 文件。

See more about [Workspace Configuration](guide/workspace-config).

参阅 [工作区配置](guide/workspace-config)

CLI command-language syntax

CLI 命令语法

Command syntax is shown as follows:

命令语法如下:

`ng` *<command-name>* *<required-arg>* [*optional-arg*] `[options]`

`ng` *&lt;命令名>* *&lt;必选参数>* [*可选参数*] `[选项]`

Most commands, and some options, have aliases.
Aliases are shown in the syntax statement for each command.

大多数命令以及少量选项,会有别名。别名会显示在每个命令的语法描述中。

Option names are prefixed with a double dash \(`--`\) characters.
Option aliases are prefixed with a single dash \(`-`\) character.
Arguments are not prefixed.
For example:

选项名带有双中线前缀(`--`)。
选项别名带有单中线前缀(`-`)。
参数没有前缀。
比如:

Typically, the name of a generated artifact can be given as an argument to the command or specified with the `--name` option.

通常,生成的工件(artifact)名称可以作为命令的参数进行指定,也可以使用 `--name` 选项。

Arguments and option names must be given in [ dash-case](guide/glossary#case-types).
For example: `--my-option-name`

参数和选项的名称可以用[小驼峰或中线分隔的格式](guide/glossary#case-types)给出。`--myOptionName` 等价于 `--my-option-name`

Boolean options

逻辑型选项

Boolean options have two forms: `--this-option` sets the flag to `true`, `--no-this-option` sets it to `false`.
If neither option is supplied, the flag remains in its default state, as listed in the reference documentation.

逻辑型选项有两种形式:`--this-option` 可以把标志设置为 `true`,而 `--no-this-option` 可以把它设置为 `false`。如果没有提供选项,该标志就会留在文档中所列出的默认状态。

Array options

数组选项

Array options can be provided in two forms: `--option value1 value2` or `--option value1 --option value2`.

数组选项可以用两种形式提供:`--option value1 value2``--option value1 --option value2`

Relative paths

相对路径

Options that specify files can be given as absolute paths, or as paths relative to the current working directory, which is generally either the workspace or project root.

用来指定文件的选项可以用绝对路径,也可以用相对于当前目录的相对路径,当前目录通常是工作区或项目的根目录。

Schematics

原理图(schematics)

The [ng generate](cli/generate) and [ng add](cli/add) commands take, as an argument, the artifact or library to be generated or added to the current project.
In addition to any general options, each artifact or library defines its own options in a *schematic*.
Schematic options are supplied to the command in the same format as immediate command options.

[ng generate](cli/generate)[ng add](cli/add) 命令会把要生成或要添加到当前项目中的工件或库作为参数。除了通用选项之外,每个工件或库还可以用*原理图*定义自己的选项。原理图的选项和内置命令的选项使用同样的格式。
27 changes: 27 additions & 0 deletions aio/tools/translator/dict/angular/content/errors/NG0100.dict.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
Angular throws an `ExpressionChangedAfterItHasBeenCheckedError` when an expression value has been changed after change detection has completed. Angular only throws this error in development mode.

当变更检测完成后又更改了表达式值时,Angular 就会抛出 `ExpressionChangedAfterItHasBeenCheckedError` 错误。Angular 只会在开发模式下抛出此错误。

In development mode, Angular performs an additional check after each change detection run, to ensure the bindings haven't changed. This catches errors where the view is left in an inconsistent state. This can occur, for example, if a method or getter returns a different value each time it is called, or if a child component changes values on its parent. If either of these occurs, this is a sign that change detection is not stabilized. Angular throws the error to ensure data is always reflected correctly in the view, which prevents erratic UI behavior or a possible infinite loop.

在开发模式下,Angular 在每次变更检测运行后都会执行一次附加检查,以确保绑定没有更改。这会在视图处于不一致状态时捕获错误。比如,如果某个方法或 getter 每次被调用时都会返回一个不同的值,或者某个子组件更改了其父组件上的值,就可能会发生这种情况。如果发生这两种情况,则表明变更检测是不稳定的。Angular 会抛出错误以确保数据始终正确地反映在视图中,从而防止 UI 行为不稳定或可能的无限循环。

This error commonly occurs when you've added template expressions or have begun to implement lifecycle hooks like `ngAfterViewInit` or `ngOnChanges`. It is also common when dealing with loading status and asynchronous operations, or when a child component changes its parent bindings.

当你添加了模板表达式或开始实现生命周期钩子(比如 `ngAfterViewInit``ngOnChanges`)时,容易发生此错误。在处理加载状态和异步操作,或者子组件更改其父组件中的绑定时,这也很常见。

The [source maps](https://developer.mozilla.org/docs/Tools/Debugger/How_to/Use_a_source_map) generated by the CLI are very useful when debugging. Navigate up the call stack until you find a template expression where the value displayed in the error has changed.

[CLI 生成的源码映射](https://developer.mozilla.org/docs/Tools/Debugger/How_to/Use_a_source_map)在调试时非常有用。请向上浏览调用栈,直到找到错误中所显示的、值已更改的模板表达式。

Ensure that there are no changes to the bindings in the template after change detection is run. This often means refactoring to use the correct [component lifecycle hook](guide/lifecycle-hooks) for your use case. If the issue exists within `ngAfterViewInit`, the recommended solution is to use a constructor or `ngOnInit` to set initial values, or use `ngAfterContentInit` for other value bindings.

运行变更检测后,请确保模板中的绑定没有更改。这通常意味着需要针对你的用例进行重构以使用正确的[组件生命周期钩子](guide/lifecycle-hooks)。如果此问题存在于 `ngAfterViewInit` 中,建议的解决方案是使用构造函数或 `ngOnInit` 来设置初始值,或者使用 `ngAfterContentInit` 做其他值的绑定。

If you are binding to methods in the view, ensure that the invocation does not update any of the other bindings in the template.

如果要绑定到视图中的方法,请确保调用不会更新模板中的任何其他绑定。

Read more about which solution is right for you in ['Everything you need to know about the "ExpressionChangedAfterItHasBeenCheckedError" error'](https://indepth.dev/posts/1001/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error) and why this is useful at ['Angular Debugging "Expression has changed after it was checked": Simple Explanation \(and Fix\)'](https://blog.angular-university.io/angular-debugging).

[“你需要了解的关于 “ExpressionChangedAfterItHasBeenCheckedError” 错误的一切”](https://indepth.dev/posts/1001/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error)中学习为什么该解决方案更合适,以及在 [“Angular 调试:检查后表达式已更改”的简单说明(和修复)](https://blog.angular-university.io/angular-debugging)中了解为什么这样做会有用。
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
Async validators must return a promise or an observable, and emit/resolve them whether the validation fails or succeeds. In particular, they must implement the [AsyncValidatorFn API](api/forms/AsyncValidator)

异步验证器必须返回 promise 或 observable,并且无论验证失败还是成功都会发出/解析它们。特别是,它们必须实现[AsyncValidatorFn API](api/forms/AsyncValidator)

Did you mistakenly use a synchronous validator instead of an async validator?

你是否错误地使用了同步验证器而不是异步验证器?
35 changes: 35 additions & 0 deletions aio/tools/translator/dict/angular/content/errors/NG01203.dict.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
For all custom form controls, you must register a value accessor.

对于所有自定义表单控件,你必须注册一个值访问器。

Here's an example of how to provide one:

这是一个如何提供它的示例:

As described above, your control was expected to have a value accessor, but was missing one. However, there are many different reasons this can happen in practice. Here's a listing of some known problems leading to this error.

如前所述,你的控件应该有一个值访问器,但它却没有。不过,在实践中发生这种情况的原因有很多。下面是会导致此错误的一些已知问题的列表。

If you **defined** a custom form control, did you remember to provide a value accessor?

如果你**定义**了一个自定义表单控件,你是否忘了提供一个值访问器?

Did you put `ngModel` on an element with no value, or an **invalid element** \(e.g. `<div [(ngModel)]="foo">`\)?

你是否正在将 `ngModel` 放在没有值的元素或**无效元素**(例如 `<div [(ngModel)]="foo">` )上?

Are you using a custom form control declared inside an `NgModule`? if so, make sure you are **importing** the `NgModule`.

你是否正在使用某个 `NgModule` 内部声明的自定义表单控件?如果是这样,请确保你要**导入**那个 `NgModule`

Are you using `ngModel` with a third-party custom form control? Check whether that control provides a value accessor. If not, use **`ngDefaultControl`** on the control's element.

你是否正在将 `ngModel` 与第三方自定义表单控件一起使用?检查该控件是否提供了值访问器。如果不是,请在该控件的元素上使用 **`ngDefaultControl`**

Are you **testing** a custom form control? Be sure to configure your testbed to know about the control. You can do so with `Testbed.configureTestingModule`.

你在**测试**自定义表单控件吗?确保配置你的测试台以便让它知道此控件。你可以用 `Testbed.configureTestingModule` 来实现。

Are you using **Nx and Module Federation** with Webpack? Your `webpack.config.js` may require [extra configuration](https://github.com/angular/angular/issues/43821#issuecomment-1054845431) to ensure the forms package is shared.

你是否正在将 **Nx 和模块联邦**与 Webpack 一起使用?你的 `webpack.config.js` 可能需要[额外的配置](https://github.com/angular/angular/issues/43821#issuecomment-1054845431)以确保 forms 包是共享的。
12 changes: 12 additions & 0 deletions aio/tools/translator/dict/angular/content/errors/NG0200.dict.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
A cyclic dependency exists when a [dependency of a service](guide/hierarchical-dependency-injection) directly or indirectly depends on the service itself. For example, if `UserService` depends on `EmployeeService`, which also depends on `UserService`. Angular will have to instantiate `EmployeeService` to create `UserService`, which depends on `UserService`, itself.

当某个[服务的依赖项](guide/hierarchical-dependency-injection)直接或间接依赖于此服务本身时,便存在循环依赖项。比如,如果 `UserService` 依赖于 `EmployeeService`,而 `EmployeeService` 也依赖于 `UserService`。Angular 将不得不先实例化 `EmployeeService` 再创建 `UserService`,而 `EmployeeService` 又依赖于 `UserService` 本身。

Use the call stack to determine where the cyclical dependency exists.
You will be able to see if any child dependencies rely on the original file by [mapping out](guide/dependency-injection-in-action) the component, module, or service's dependencies, and identifying the loop causing the problem.

使用调用栈来确定循环依赖项存在的位置。通过[源码映射](guide/dependency-injection-in-action)找出组件、模块或服务的依赖项,并找出导致此问题的循环,就能查看是否有任何子依赖项依赖于原始文件。

Break this loop \(or circle\) of dependency to resolve this error. This most commonly means removing or refactoring the dependencies to not be reliant on one another.

打破依赖关系的这种循环以解决此错误。这通常意味着删除或重构依赖项以使其彼此不互相依赖。
19 changes: 19 additions & 0 deletions aio/tools/translator/dict/angular/content/errors/NG0201.dict.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
You see this error when you try to inject a service but have not declared a corresponding provider. A provider is a mapping that supplies a value that you can inject into the constructor of a class in your application.

尝试注入某个服务但未声明相应的提供者时,就会看到此错误。提供者是一种映射,它提供了一个值,你可以将该值注入到应用程序中类的构造函数中。

Read more on providers in our [Dependency Injection guide](guide/dependency-injection).

在我们的[“依赖注入”指南](guide/dependency-injection)中阅读有关提供者的更多信息。

Work backwards from the object where the error states that a [provider](guide/architecture-services) is missing: `No provider for ${this}!`. This is commonly thrown in [services](tutorial/tour-of-heroes/toh-pt4), which require non-existing providers.

从本错误所指出的缺少[提供者](guide/architecture-services)`No provider for ${this}!`)的对象开始进行工作。这通常会在[服务](tutorial/tour-of-heroes/toh-pt4)中抛出,因为它请求了一个不存在的提供者。

To fix the error ensure that your service is registered in the list of providers of an `NgModule` or has the `@Injectable` decorator with a `providedIn` property at top.

要修正此错误,以确保你的服务已注册在 `NgModule` 的提供者列表中或顶部带有 `providedIn` 属性的 `@Injectable` 装饰器中。

The most common solution is to add a provider in `@Injectable` using `providedIn`:

最常见的解决方案是在 `@Injectable` 中使用 `providedIn` 来添加提供者:
Loading

0 comments on commit cf158f3

Please sign in to comment.