スキップしてメイン コンテンツに移動

Install Node.js and Angular on Ubuntu

What I did

  1. Install Node.js
  2. Install Angular
  3. Try default app

Install Node.js

Few years ago, when I had used Ubuntu, I used nodebrew to install Node.js.
But now, what shall I use?

Use n

My search result was I should use n.
But the easiest way to install n had needed npm.
npm install -g n
So I installed Node.js by NodeSource first.
Installing Node.js via package manager | Node.js
distributions/README.md at master · nodesource/distributions · GitHub
curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -
sudo apt-get install -y nodejs
I installed Node.js version 13.9.0.

Failed npm -g install

After installing Node.js, I had tried install n and failed with permission error.
example@example-Macmini:~$ npm install -g n
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN checkPermissions Missing write access to /usr/lib/node_modules
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/lib/node_modules
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/lib/node_modules'
npm ERR!  [Error: EACCES: permission denied, access '/usr/lib/node_modules'] {
npm ERR!   stack: "Error: EACCES: permission denied, access '/usr/lib/node_modules'",
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/lib/node_modules'
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.
npm ERR! A complete log of this run can be found in:
npm ERR!     /home/example/.npm/_logs/2020-02-23T12_38_49_814Z-debug.log
Although someone installed with super user, according to the documents of npm, I changed the npm global install directory.
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
Resolving EACCES permissions errors when installing packages globally | npm Documentation

Install Angular

Now I had been able to install globally, I just installed Angular CLI.
And I tried create the sample project.
npm install -g @angular/cli

Command 'ng' not found

When I had created an Angular project, I got error.
Command 'ng' not found, but can be installed with:
sudo apt install ng-common
So I added an alias of ng.
echo "alias ng=~/.npm-global/bin/ng" >> ~/.bashrc
source ~/.bashrc
After all, I could create the Angular project.
And the hot reload also worked.
ラベル:

コメント

コメントを投稿

このブログの人気の投稿

[PostgreSQL] Play with TypeORM 1

Intro This time, I tried accessing Database by TypeORM. Because I wanted to manage Database tables by ORM, I created a table first.  GitHub - typeorm/typeorm   TypeORM - Amazing ORM for TypeScript and JavaScript (ES7, ES6, ES5). Installation and creating a project Installation TypeORM needed "reflect-metadata" and database driver. npm install --save typeorm reflect-metadata pg typescript tsc npm install --save-dev @types/node And I also installed "ts-node" to skip compiling. npm install --save ts-node Preparing References I could generate a TypeORM project by TypeORM command. npx typeorm init --name gen-typeorm-sample --database postgres I refered Most of all settings from it. Adding files and folders First, I added tsconfig.json. npx tsc --init And I edited like below. tsconfig.json { "compilerOptions": { /* Basic Options */ "incremental": true, "target": "es5", "module": "comm...
コメントを投稿
続きを読む

[TypeScript] Try React 1

Intro This time I tried React. First, I referred Documents and Tutorial. React – A JavaScript library for building user interfaces GitHub - facebook/react: A declarative, efficient, and flexible JavaScript library for building user interfaces. Getting started with React - Learn web development | MDN Create a project To create a new React project, I used "Create React App". GitHub - facebook/create-react-app: Set up a modern web app by running one command. It created these files. .git node_modules public L favicon.ico L index.html L logo192.png L logo512.png L manifest.json L robots.txt src L App.css L App.test.tsx L App.tsx L index.css L index.test.tsx L index.tsx L logo.svg L react-app-env.d.ts L serviceWorker.ts L setupTests.ts .gitignore package.json package-lock.json README.md tsconfig.json Make the page work with IE11 I could view the page by "npm start" or "npm run start".   ...
コメントを投稿
続きを読む

[Angular 10 + NgRx + Nest.js] Create project

Intro This time, I added server-side. I choosed Nest.js because I love TypeScript and I had been interested in using TypeScript in server-side programming. Environments Angular ver.10.0.2 @ngrx/store ver.9.2.0 @ngrx/effects ver.9.2.0 @nestjs/ng-universal ver.2.0.1 Couldn't add @ngrx/store into the Angular 10 project First, I created an Angular project and tried adding @ngrx/store into it. And I got an error. Installing packages for tooling via npm. Installed packages for tooling via npm. The package that you are trying to add does not support schematics. You can try using a different version of the package or contact the package author to add ng-add support. According to the issue below, I should add "@latest". npx ng add @ngrx/store@latest Because if I didn't add it, the @ngrx/store version was too low.    cannot use ng add to install ngrx store · Issue #2604 · ngrx/platform · GitHub Though I didn't know I should add "@latest" into ...
コメントを投稿
続きを読む