Rocky Linux 9にAngularJSをインストールする方法

環境
OSバージョンの確認

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
# cat /etc/redhat-release
Rocky Linux release 9.0 (Blue Onyx)
# cat /etc/redhat-release Rocky Linux release 9.0 (Blue Onyx)
# cat /etc/redhat-release
Rocky Linux release 9.0 (Blue Onyx)

AngularJS のインストール手順
1.システムパッケージを更新します

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
# sudo dnf upgrade --refresh
# sudo dnf upgrade --refresh
# sudo dnf upgrade --refresh

2.必要な依存関係をインストールします

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
# sudo dnf install curl gnupg2 gnupg git wget gcc-c++ make -y
# sudo dnf install curl gnupg2 gnupg git wget gcc-c++ make -y
# sudo dnf install curl gnupg2 gnupg git wget gcc-c++ make -y

3.Node.jsをインストールします
リポジトリをインポートします

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
# curl -fsSL https://rpm.nodesource.com/setup_lts.x | sudo bash -
# curl -fsSL https://rpm.nodesource.com/setup_lts.x | sudo bash -
# curl -fsSL https://rpm.nodesource.com/setup_lts.x | sudo bash -

nodejsのインストールを行います

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
# sudo dnf install nodejs -y
# sudo dnf install nodejs -y
# sudo dnf install nodejs -y

Node.jsバージョンを確認します

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
# node --version
v16.16.0
# node --version v16.16.0
# node --version
v16.16.0

4.npmをインストールします

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
# sudo npm install npm@latest -g
# sudo npm install npm@latest -g
# sudo npm install npm@latest -g

5.AngularJSをインストールします

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
# sudo npm install -g @angular/cli
# sudo npm install -g @angular/cli
# sudo npm install -g @angular/cli

AngularJSバージョンを確認します

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
# ng version
? Would you like to enable autocompletion? This will set up your terminal so pressing TAB while typing
Angular CLI commands will show possible options and autocomplete arguments. (Enabling autocompletion will
modify configuration files in your home directory.) Yes
Appended `source <(ng completion script)` to `/root/.bashrc`. Restart your terminal or run the following to autocomplete `ng` commands:
source <(ng completion script)
? Would you like to share anonymous usage data about this project with the Angular Team at
Google under Google’s Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. Yes
Thank you for sharing anonymous usage data. Should you change your mind, the following
command will disable this feature entirely:
ng analytics disable --global
Global setting: enabled
Local setting: No local workspace configuration file.
Effective status: enabled
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 14.1.0
Node: 16.16.0
Package Manager: npm 8.15.0
OS: linux x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.1401.0 (cli-only)
@angular-devkit/core 14.1.0 (cli-only)
@angular-devkit/schematics 14.1.0 (cli-only)
@schematics/angular 14.1.0 (cli-only)
# ng version ? Would you like to enable autocompletion? This will set up your terminal so pressing TAB while typing Angular CLI commands will show possible options and autocomplete arguments. (Enabling autocompletion will modify configuration files in your home directory.) Yes Appended `source <(ng completion script)` to `/root/.bashrc`. Restart your terminal or run the following to autocomplete `ng` commands: source <(ng completion script) ? Would you like to share anonymous usage data about this project with the Angular Team at Google under Google’s Privacy Policy at https://policies.google.com/privacy. For more details and how to change this setting, see https://angular.io/analytics. Yes Thank you for sharing anonymous usage data. Should you change your mind, the following command will disable this feature entirely: ng analytics disable --global Global setting: enabled Local setting: No local workspace configuration file. Effective status: enabled _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 14.1.0 Node: 16.16.0 Package Manager: npm 8.15.0 OS: linux x64 Angular: ... Package Version ------------------------------------------------------ @angular-devkit/architect 0.1401.0 (cli-only) @angular-devkit/core 14.1.0 (cli-only) @angular-devkit/schematics 14.1.0 (cli-only) @schematics/angular 14.1.0 (cli-only)
# ng version
? Would you like to enable autocompletion? This will set up your terminal so pressing TAB while typing
Angular CLI commands will show possible options and autocomplete arguments. (Enabling autocompletion will
modify configuration files in your home directory.) Yes
Appended `source <(ng completion script)` to `/root/.bashrc`. Restart your terminal or run the following to autocomplete `ng` commands:

    source <(ng completion script)
? Would you like to share anonymous usage data about this project with the Angular Team at
Google under Google’s Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. Yes

Thank you for sharing anonymous usage data. Should you change your mind, the following
command will disable this feature entirely:

    ng analytics disable --global

Global setting: enabled
Local setting: No local workspace configuration file.
Effective status: enabled

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 14.1.0
Node: 16.16.0
Package Manager: npm 8.15.0
OS: linux x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1401.0 (cli-only)
@angular-devkit/core         14.1.0 (cli-only)
@angular-devkit/schematics   14.1.0 (cli-only)
@schematics/angular          14.1.0 (cli-only)

7.AngularJSプロジェクトを作成します
「angprj」というプロジェクトを作成します。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
# ng new angprj
# ng new angprj
# ng new angprj

プロジェクトを作成、起動します

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
# cd angprj/
# ng serve
Build at: 2022-07-24T07:04:44.652Z - Hash: e74ba77ae492fc98 - Time: 9565ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
? Compiled successfully.
# cd angprj/ # ng serve 略 Build at: 2022-07-24T07:04:44.652Z - Hash: e74ba77ae492fc98 - Time: 9565ms ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** ? Compiled successfully.
# cd angprj/
# ng serve
略
Build at: 2022-07-24T07:04:44.652Z - Hash: e74ba77ae492fc98 - Time: 9565ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


? Compiled successfully.

 

Rocky Linux 9

Posted by arkgame