Skip to content

Commit 75a5f85

Browse files
lacolacolacolaco
committed
feat(docs): translate CLI setup local documentation to Japanese
1 parent dbb39f8 commit 75a5f85

File tree

2 files changed

+226
-55
lines changed

2 files changed

+226
-55
lines changed

‎adev-ja/src/content/tools/cli/setup-local.en.md

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
# Setting up the local environment and workspace
2+
3+
This guide explains how to set up your environment for Angular development using the [Angular CLI](cli "CLI command reference").
4+
It includes information about installing the CLI, creating an initial workspace and starter app, and running that app locally to verify your setup.
5+
6+
<docs-callout title="Try Angular without local setup">
7+
8+
If you are new to Angular, you might want to start with [Try it now!](tutorials/learn-angular), which introduces the essentials of Angular in your browser.
9+
This standalone tutorial takes advantage of the interactive [StackBlitz](https://stackblitz.com) environment for online development.
10+
You don't need to set up your local environment until you're ready.
11+
12+
</docs-callout>
13+
14+
## Before you start
15+
16+
To use Angular CLI, you should be familiar with the following:
17+
18+
<docs-pill-row>
19+
<docs-pill href="https://developer.mozilla.org/docs/Web/JavaScript/A_re-introduction_to_JavaScript" title="JavaScript"/>
20+
<docs-pill href="https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML" title="HTML"/>
21+
<docs-pill href="https://developer.mozilla.org/docs/Learn/CSS/First_steps" title="CSS"/>
22+
</docs-pill-row>
23+
24+
You should also be familiar with usage of command line interface (CLI) tools and have a general understanding of command shells.
25+
Knowledge of [TypeScript](https://www.typescriptlang.org) is helpful, but not required.
26+
27+
## Dependencies
28+
29+
To install Angular CLI on your local system, you need to install [Node.js](https://nodejs.org/).
30+
Angular CLI uses Node and its associated package manager, npm, to install and run JavaScript tools outside the browser.
31+
32+
[Download and install Node.js](https://nodejs.org/en/download), which will include the `npm` CLI as well.
33+
Angular requires an [active LTS or maintenance LTS](https://nodejs.org/en/about/previous-releases) version of Node.js.
34+
See [Angular's version compatibility](reference/versions) guide for more information.
35+
36+
## Install the Angular CLI
37+
38+
To install the Angular CLI, open a terminal window and run the following command:
39+
40+
<docs-code-multifile>
41+
<docs-code
42+
header="npm"
43+
>
44+
npm install -g @angular/cli
45+
</docs-code>
46+
<docs-code
47+
header="pnpm"
48+
>
49+
pnpm install -g @angular/cli
50+
</docs-code>
51+
<docs-code
52+
header="yarn"
53+
>
54+
yarn global add @angular/cli
55+
</docs-code>
56+
<docs-code
57+
header="bun"
58+
>
59+
bun install -g @angular/cli
60+
</docs-code>
61+
62+
</docs-code-multifile>
63+
64+
### Powershell execution policy
65+
66+
On Windows client computers, the execution of PowerShell scripts is disabled by default, so the above command may fail with an error.
67+
To allow the execution of PowerShell scripts, which is needed for npm global binaries, you must set the following <a href="https://docs.microsoft.com/powershell/module/microsoft.powershell.core/about/about_execution_policies">execution policy</a>:
68+
69+
<docs-code language="sh">
70+
71+
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
72+
73+
</docs-code>
74+
75+
Carefully read the message displayed after executing the command and follow the instructions. Make sure you understand the implications of setting an execution policy.
76+
77+
### Unix permissions
78+
79+
On some Unix-like setups, global scripts may be owned by the root user, so to the above command may fail with a permission error.
80+
Run with `sudo` to execute the command as the root user and enter your password when prompted:
81+
82+
<docs-code-multifile>
83+
<docs-code
84+
header="npm"
85+
>
86+
sudo npm install -g @angular/cli
87+
</docs-code>
88+
<docs-code
89+
header="pnpm"
90+
>
91+
sudo pnpm install -g @angular/cli
92+
</docs-code>
93+
<docs-code
94+
header="yarn"
95+
>
96+
sudo yarn global add @angular/cli
97+
</docs-code>
98+
<docs-code
99+
header="bun"
100+
>
101+
sudo bun install -g @angular/cli
102+
</docs-code>
103+
104+
</docs-code-multifile>
105+
106+
Make sure you understand the implications of running commands as root.
107+
108+
## Create a workspace and initial application
109+
110+
You develop apps in the context of an Angular **workspace**.
111+
112+
To create a new workspace and initial starter app, run the CLI command `ng new` and provide the name `my-app`, as shown here, then answer prompts about features to include:
113+
114+
<docs-code language="shell">
115+
116+
ng new my-app
117+
118+
</docs-code>
119+
120+
The Angular CLI installs the necessary Angular npm packages and other dependencies.
121+
This can take a few minutes.
122+
123+
The CLI creates a new workspace and a small welcome app in a new directory with the same name as the workspace, ready to run.
124+
Navigate to the new directory so subsequent commands use this workspace.
125+
126+
<docs-code language="shell">
127+
128+
cd my-app
129+
130+
</docs-code>
131+
132+
## Run the application
133+
134+
The Angular CLI includes a development server, for you to build and serve your app locally. Run the following command:
135+
136+
<docs-code language="shell">
137+
138+
ng serve --open
139+
140+
</docs-code>
141+
142+
The `ng serve` command launches the server, watches your files, as well as rebuilds the app and reloads the browser as you make changes to those files.
143+
144+
The `--open` (or just `-o`) option automatically opens your browser to `http://localhost:4200/` to view the generated application.
145+
146+
## Workspaces and project files
147+
148+
The [`ng new`](cli/new) command creates an [Angular workspace](reference/configs/workspace-config) folder and generates a new application inside it.
149+
A workspace can contain multiple applications and libraries.
150+
The initial application created by the [`ng new`](cli/new) command is at the root directory of the workspace.
151+
When you generate an additional application or library in an existing workspace, it goes into a `projects/` subfolder by default.
152+
153+
A newly generated application contains the source files for a root component and template.
154+
Each application has a `src` folder that contains its components, data, and assets.
155+
156+
You can edit the generated files directly, or add to and modify them using CLI commands.
157+
Use the [`ng generate`](cli/generate) command to add new files for additional components, directives, pipes, services, and more.
158+
Commands such as [`ng add`](cli/add) and [`ng generate`](cli/generate), which create or operate on applications and libraries, must be executed
159+
from within a workspace. By contrast, commands such as `ng new` must be executed *outside* a workspace because they will create a new one.
160+
161+
## Next steps
162+
163+
* Learn more about the [file structure](reference/configs/file-structure) and [configuration](reference/configs/workspace-config) of the generated workspace.
164+
165+
* Test your new application with [`ng test`](cli/test).
166+
167+
* Generate boilerplate like components, directives, and pipes with [`ng generate`](cli/generate).
168+
169+
* Deploy your new application and make it available to real users with [`ng deploy`](cli/deploy).
170+
171+
* Set up and run end-to-end tests of your application with [`ng e2e`](cli/e2e).

0 commit comments

Comments
 (0)