Soma for your shiny new Angular project ¹

Poor Ralph, he’s probably sitting there getting ready to plunge deep into the world of setting up a shiny new Angular project without any afterthought about one thing: environments. Yes, Ralph, I'm talking to you! It's not just about plunging headfirst into a project, it’s about setting up your tools correctly, and since you humans tend to overcomplicate such things, let me show you how it's done properly — you could learn a thing or two from us moggies!

Step 1: Node Versions and nvm - (Because You'll Want Control)

Before diving into the important stuff about Angular, a few words about environments. Node.js versions matter a lot in this game. You can't just install one version of Node and assume it will work with every new project. This is where nvm, or Node Version Manager, comes into play.

Unlike Ralph, who probably still thinks running one Node version is fine, us cats know that we need flexibility. Sometimes you need to run a stable LTS version; sometimes you want the latest and greatest release for your bleeding edge project.

Either way, here's how you install nvm from the terminal:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Once it's installed you can list available Node versions:

nvm ls-remote

Then, all you need to do to install a particular version is type this:

nvm install 16

And to switch between versions, type:

nvm use 16

But manually switching Node versions is for humans! The feline way to do it is with an .nvmrc file.

Step 2. Adding an .nvmrc File — The Easy, Yet Effective Solution

First, create an .nvmrc file in your project directory to lock in a Node version to use for your project. From the root of your project, type this into the terminal:

echo "16" > .nvmrc

Now, each time Ralph switches to his project folder he can just run nvm use, and nvm will automatically use the correct Node version. Smooth, right? Well, Ralph might like to think so, but we’ve got one up on him...

Step 3: Automatic Environment Switching

Let’s make it even better — we can auto-switch Node versions whenever you navigate into a project directory. Just add this following simple snippet to your .bash_profile (or .zshrc if you are using Zsh):

# Add this to ~/.bash_profile or ~/.zshrc

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

# Automatically switch Node versions based on .nvmrc
cd() {
  builtin cd "$@"
  if [ -f .nvmrc ]; then
    nvm use
  fi
}

From now on, every time you cd into a project folder that contains an .nvmrc file, nvm automatically switches to the correct version of Node. You’ll never have to think about doing it again. Let Ralph be happy running his commands by hand; you've automated it.

Step 4: Using npm (Because We're Keeping It Simple)

Unlike some overly-complicated cats that insist on using Yarn, we're just going to use npm here. Ralph will be pleased about this as it's what he knows. And to be fair, it's perfectly good for managing your packages.

First, install the Angular CLI globally with npm:

npm install -g @angular/cli

Then, bootstrap your new Angular project:

ng new [your-project-name]

Ralph may feel proud of himself at this point, but let's not get ahead of ourselves as it's just the beginning. Now that your project is set up, it is time to install the dependencies.

Step 5: Run with npm — Installation of Dependencies

cd into your new project folder and run:

npm install

Ralph probably feels proud of himself now; finally, something is happening here. npm is quite straightforward and to the point: just got all your project dependencies nicely installed.

Step 6: Serve the Project

The moment Ralph has been waiting for — serving the project to see his creation came to life. Type:

npm start

And before Ralph can even finish telling you what he thinks will happen, head to:

http://localhost:4200/

...in your browser. There's your Angular project, up and running like a well-oiled machine. Ralph will no doubt still be euphoric, but we both know you’ve done all the hard work by setting up your environment correctly.

As a reward for all your hard work, and for getting this far with this post (!) here’s a picture of me sitting in a pond.

Me, sitting in a pond.

Conclusion: Putting Ralph on the Right Track

There you have it. With nvm managing your Node versions and npm keeping your packages in order, you've got everything you need to start working on Angular the right way. Ralph's still trying to get up to speed, but that's okay. You've got the tools and the setup, and most importantly, the efficiency that only a cat could guide you to.

Now, if you'll excuse me, I'm overdue for a nap. Let’s hope Ralph doesn't break anything while I'm sleeping.

Up Next...

Next week, we’ll dive into the world of components — how to craft clean, reusable, and scalable pieces of UI that keep your codebase efficient and maintainable. Whether you're just getting started or looking to refine your approach, this guide will give you the tools to build smarter Angular apps.

1. In Aldous Huxley’s Brave New World, "soma" is a drug used to maintain societal control by providing a sense of calm and happiness. In the world of coding, stability in code functions similarly, offering peace of mind by preventing bugs and crashes. Just as citizens of the World State rely on soma to escape discomfort, developers rely on stable frameworks and tools to avoid debugging nightmares.