Over the course of this post we’ll focus on getting set up using node and the angular cli, understanding the basics of angular and explore the code a little. The next two post will cover creating a basic app with angular and deploying your angular app to a production environment. Check out all of our Angular content!
Getting Started with Angular: Install Dependencies
To run Angular on your localhost you need
- npm package manager
You can simply go to to nodejs.org and make sure to download the LTS release. After installation open up your Node.js command prompt and check your versions for both node.js and npm.
For reference I’m using node version 14.15.4 and npm version 6.14.10 at the time of writing this. For this small example it shouldn’t matter what versions you have but pro tip, its always an important step to check that stuff when following along with any online tutorials or guides. Lastly we have to do one more install on the command line before we can generate out angular app.
Go ahead and install the angular CLI and check your version by following the provided commands. The CLI allows us to generate our angular project as well as modules, services, components and more!
npm install -g @angular/cli
At the time of this post I’m using Angular version 11 & Typescript version 4.0.7.
Create the application
ng new my-app
This command will ask you a few setup questions. You can typically just accept the defaults until you know what you need for a specific project. I will go ahead and show you my responses but feel free to set it up a little different it shouldn’t cause any issues. My one recommendation is to say NO to enforce stricter type checking. This is Angular strict mode and while its a nice feature the few times I’ve used it I’ve run into issues but that’s likely due to it being a relatively new feature still. Overall it’s a great addon but not something conducive to learning the fundamentals of Angular. If you want to learn more about angular strict mode check out the official post here
- “Do you want to enforce stricter type checking…..” -> No
- “Would you like to Add Angular Routing?” -> Yes
- Which stylesheet format would you like to use? -> SCSS (you’ll thank me later)
- ………(this might take a minute)
During the creation of the app, if you see and warnings that say “LF will be replaced by CRLF in tsling.json” then just ignore it for now since it wont affect what were doing. It simply means Windows is making some changes to how the file was created to better fit its needs.
Run the appAfter the app is created go into that directory by running:
Ensure your in the file location where you created the app. In my case I named my app gettingStarted, so my app was generated in “H:\The Rambling Dev\Demos\Angular\gettingStarted” yours will be different but you get the idea. Next we can go ahead and run and open our app.Run and Open the default app
ng serve --open
You should see your beautiful new angular app appear! From here feel free to browse around and look at what you can do. Angular gives you a handy reference on the next steps you can do by generating things with the angular CLI. We will go over all of these in future post.
Get an IDE
For this project the IDE you use doesn’t really matter, as long as you can load up the file/website and edit it then you should be good. In case your not sure what an IDE is, its simply a way to edit/launch/debug your code. Almost all IDE’s will have support for Typescript. I wont go over getting or setting up an IDE in this post, if that’s something you want to see then add a comment below and we can go over the best IDES for different project types and stacks. If you want a quick and easy platform then try Visual Studio Code, this is free and should meet all your needs.
Add your project to your IDE
Go ahead and add your angular project to the IDE and explore the code. There might seem like a ton is going on, but for now you can simply focus on a few parts. So Lets quickly go over the main parts of the angular app.
- node_modules: This is where all your build tools and libraries live. Basically if you need to run npm install to install a new package it will go here.
- app-routing.module.ts: This is your default routing component, you can define routes for your app here.
- app.component.html: This is considered the root component view and is often only has header, router, and footer components in it.
- app.component.ts: This is the root component
- app.module.ts: This is the default module for angular. When new components, services, etc.. are generated they must be added here to work.
- angular.json: This is the main configuration file.
- pacakge.json: This is where all the package configurations are. If you need to find what version of a package your using this is the place to go.
While there are a ton more I don’t want to bore you guys. If your interested check out the official angular documentation.
Today we learned how to get up and running with angular, and got our first look at some of the components and important files. The next post we will create a simple angular app and get it ready for deployment.