Skip to content

Instantly share code, notes, and snippets.

@developer1011
Last active October 5, 2019 17:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save developer1011/d6fc9d908c6b3d3100ba1335061cc718 to your computer and use it in GitHub Desktop.
Save developer1011/d6fc9d908c6b3d3100ba1335061cc718 to your computer and use it in GitHub Desktop.
Angular6-MacBookPro-Install

Cleaner install of node, npm & angular-cli for MacBookPro

npm ERR! Error: EACCES: permission denied

If you have gotten this error or similar file permission issue on mac you can follow the steps listed in this gist to resolve the problem with node & npm. With this method of installing node you can eliminate using sudo for npm. Please follow along.

For mac here is how node, npm should be installed using nvm. This is the official nodejs.org recommendation for macbook pro. With this approach it eliminates the need of using sudo for npm and file permission issues are automatically addressed.

Install nvm by running commands

touch ~/.bash_profile
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
source ~/.bash_profile

Exit the terminal and open new terminal & check nvm is installed successfully by running. This prints the version of nvm as 0.33.11.

nvm --version

Next, to see a list of available node versions run this command

nvm ls-remote

Installing node

Pick the latest version and install node by running

nvm install v10.6.0
nvm use v10.6.0
nvm alias default v10.6.0

Check which version is used

nvm current
nvm ls

Set the node to latest version permanently

Exit the terminal. Open a new terminal. Check the prefix value by running

npm config get prefix

If you still see an older location and not the one installed by nvm, then you have to set the new location as latest by running

npm config set prefix /Users/<username>/.nvm/versions/node/v10.6.0

Verify Versions

Exit terminal & open again Check versions to see if the node & npm are installed

MacBook Pro:~ vp$ npm -v
6.1.0
MacBook Pro:~ vp$ node -v
V10.6.0
MacBook Pro:~ vp$ npm config get prefix
/Users/<username>/.nvm/versions/node/v10.6.0

See locations of node & npm installation directories on the system

MacBook Pro:~ vp$ which node
/Users/vp/.nvm/versions/node/v10.6.0/bin/node
MacBook Pro:~ vp$ which npm
/Users/vp/.nvm/versions/node/v10.6.0/bin/npm

Install angular globally (Note: DO NOT USE sudo for npm)

npm install -g @angular/cli

Change directory to your project project-abc Remove any existing node_modules directory by running sudo rm -Rf node_modules
Git undo checkout package.json (if in case any previous changes due to npm install exist)
Remove package-lock.json and run these commands to start angular app locally. Add package-lock.json to .gitignore.

npm install
ng s

This runs the angular app on default port 4200.

Running angular on a different port

If you want to run the app at a different port run this

ng s --port 4444

Updating latest NPM

To upgrade npm run this command

nvm install-latest-npm

nvm man page

Nvm has a list of commands that are very useful

MacBookPro:angular-lab vp$ nvm
Node Version Manager
Note: <version> refers to any version-like string nvm understands. This includes:
  1. full or partial version numbers, starting with an optional "v" (0.10, v0.1.2, v1)
  2. default (built-in) aliases: node, stable, unstable, iojs, system
  3. custom aliases you define with `nvm alias foo`
 Any options that produce colorized output should respect the `--no-colors` option.
Usage:
  nvm --help                                Show this message
  nvm --version                             Print out the installed version of nvm
  nvm install [-s] <version>                Download and install a <version>, [-s] from source. Uses .nvmrc if available
    --reinstall-packages-from=<version>     When installing, reinstall packages installed in <node|iojs|node version number>
    --lts                                   When installing, only select from LTS (long-term support) versions
    --lts=<LTS name>                        When installing, only select from versions for a specific LTS line
    --skip-default-packages                 When installing, skip the default-packages file if it exists
    --latest-npm                            After installing, attempt to upgrade to the latest working npm on the given node version
  nvm uninstall <version>                   Uninstall a version
  nvm uninstall --lts                       Uninstall using automatic LTS (long-term support) alias `lts/*`, if available.
  nvm uninstall --lts=<LTS name>            Uninstall using automatic alias for provided LTS line, if available.
  nvm use [--silent] <version>              Modify PATH to use <version>. Uses .nvmrc if available
    --lts                                   Uses automatic LTS (long-term support) alias `lts/*`, if available.
    --lts=<LTS name>                        Uses automatic alias for provided LTS line, if available.
  nvm exec [--silent] <version> [<command>] Run <command> on <version>. Uses .nvmrc if available
    --lts                                   Uses automatic LTS (long-term support) alias `lts/*`, if available.
    --lts=<LTS name>                        Uses automatic alias for provided LTS line, if available.
  nvm run [--silent] <version> [<args>]     Run `node` on <version> with <args> as arguments. Uses .nvmrc if available
    --lts                                   Uses automatic LTS (long-term support) alias `lts/*`, if available.
    --lts=<LTS name>                        Uses automatic alias for provided LTS line, if available.
  nvm current                               Display currently activated version
  nvm ls                                    List installed versions
  nvm ls <version>                          List versions matching a given <version>
  nvm ls-remote                             List remote versions available for install
    --lts                                   When listing, only show LTS (long-term support) versions
  nvm ls-remote <version>                   List remote versions available for install, matching a given <version>
    --lts                                   When listing, only show LTS (long-term support) versions
    --lts=<LTS name>                        When listing, only show versions for a specific LTS line
  nvm version <version>                     Resolve the given description to a single local version
  nvm version-remote <version>              Resolve the given description to a single remote version
    --lts                                   When listing, only select from LTS (long-term support) versions
    --lts=<LTS name>                        When listing, only select from versions for a specific LTS line
  nvm deactivate                            Undo effects of `nvm` on current shell
  nvm alias [<pattern>]                     Show all aliases beginning with <pattern>
  nvm alias <name> <version>                Set an alias named <name> pointing to <version>
  nvm unalias <name>                        Deletes the alias named <name>
  nvm install-latest-npm                    Attempt to upgrade to the latest working `npm` on the current node version
  nvm reinstall-packages <version>          Reinstall global `npm` packages contained in <version> to current version
  nvm unload                                Unload `nvm` from shell
  nvm which [current | <version>]           Display path to installed node version. Uses .nvmrc if available
  nvm cache dir                             Display path to the cache directory for nvm
  nvm cache clear                           Empty cache directory for nvm

Example:
  nvm install 8.0.0                     Install a specific version number
  nvm use 8.0                           Use the latest available 8.0.x release
  nvm run 6.10.3 app.js                 Run app.js using node 6.10.3
  nvm exec 4.8.3 node app.js            Run `node app.js` with the PATH pointing to node 4.8.3
  nvm alias default 8.1.0               Set default node version on a shell
  nvm alias default node                Always default to the latest available node version on a shell

Note:
  to remove, delete, or uninstall nvm - just remove the `$NVM_DIR` folder (usually `~/.nvm`)

Additional troubleshooting

If you get this error run npm audit fix

rxjs_1.of is not a function
TypeError: rxjs_1.of is not a function
    at WorkspaceLoader._getProjectWorkspaceFilePath (/Users/developer1011/Documents/somecompany/project_abc/Back_End/something/node_modules/@angular/cli/models/workspace-loader.js:41:27)
    at WorkspaceLoader.loadWorkspace (/Users/developer1011/Documents/somecompany/project_abc/Back_End/something/node_modules/@angular/cli/models/workspace-loader.js:31:21)
    at ServeCommand._loadWorkspaceAndArchitect (/Users/developer1011/Documents/somecompany/project_abc/Back_End/something/node_modules/@angular/cli/models/architect-command.js:189:32)
...    

If you get this error run npm install --save @ng-bootstrap/ng-bootstrap@2.0.0

ERROR in node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts(58,96): error TS2315: Type 'ElementRef' is not generic.
node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker-input.d.ts(121,67): error TS2315: Type 'ElementRef' is not generic.
...    
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment