How to create a basic Angular app with Angular 17

I gotta admit: there are quite a few changes in how we build apps these days. I like the direction Angular version-changes are taking but still, it takes some time to get used to doing things the “new” way.

So, let’s create a basic app with some structure and routing. Once you have it going, you can build on that instead of starting fresh and figuring out the app.routes.ts and the app.config.ts files.

Anyways, let’s get this thing rolling.

Environment setting

First, check if your environment is set correctly. Check in your terminal if you have NodeJS and NPM. If not, install both of them – you won’t be able to use any library or run your code locally if you don’t have them.

node -v
npm -v

Now install Angular cli (CLI = Command Line Interface). You need it to run an Angular code on your computer. This is the magic tool that will create the whole app structure for us.

npm install -g @angular/cli

Go to your destined folder (in my case its’s my user’s subfolder: emmaline/Developer where I keep all my apps) and paste the command switching the name of my app to something else (all rights reserved – this is MY app’s name! 😉 ).

ng new scaffolding-app

ng may ask you, shat kind of stylesheet you’d like to use. I recommend SCSS (why? I’ll explain in a separate post – if you follow this post’s instructions, stick to SCSS to avoid troubles in the next steps).

Another thing ng may ask you about is a Server-Side Rendering (SSR) or Static Site Generation (SSG). If you plan to have a mostly-static page, go with an SSG which is faster and less complex. However, if your page will change a lot, pick SSR (just note, it is a bigger burden on your server. I’m gonna go with the easier choice which is the SSG.

You want to see this prompt:

If you still do not see it, try googling your errors until your app files are all in order.

Do GIT (optional but just do it!)

Go to your app folder (cd name-of-your-app) and type the following command

git init
git add .
git commit -m "initial commit"

Congrats! You’ve just created a local git repository. Now, let’s connect it to you GitHub account. Open github.com and log in (or, if you’ve been living under the rock and still do not have a GitHub account, register ASAP!).

One of the coolest things about GitHub is that once you create a new repository there (remember to not add README.txt file), it will give you all the commands you need to connect your local repo to the one in the cloud.

I honestly do not even remember what commands to copy and in what order. I just assume that GitHub will ALWAYS prepare them for me and don’t waste my brain-RAM to figure those out. 🙂

Note that our scenario assumes connecting our existing local repository (which we just created writing git init a while ago) and the one in the cloud. Copy the commands underneath the “…or push an existing repository…”.

IN IDE – adding components

Finally! The time has come. We can open our IDE (IntelliJ in my case but do whatever works for you as long as it works with Angular – no judgment here, you Eclipse-weirdos! 😉 ).

Once you open you project in an IDE, you should see a structure similar to this one:

The important parts are that you have an index.html file and an app folder with 4 main files: .ts (this is your angular file), .spec.ts (test file for your .ts file), .html (this is you visual), and a .scss file (your styling file).

Unfortunately, we’re still not done with the terminal. Although you can create components manually, it is considered a better practice to do it using ng (yes, it means we’re going back to the terminal. This time I’m going to use the terminal window in my IDE to see the immediate changes in the app structure).

Ready? Stop for a moment and do some thinking. What do you want your app to look like? The usual way of dividing the front-end app is to create separate components for a header, a footer, and main (aka body). Some add a sidebar (if you want it completely separate from the main component but I prefer to have it lower in the component structure).

Let’s get to it, then (go to the terminal, to your app’s folder (not to the src, to to the src/app – No! Your main name-of-the-app folder):

ng generate component header
ng generate component footer
ng generate component main

You’ll immediately see your newly-created components in your app structure. If anything goes wrong remove it (unfortunately, it is not as easy as creating one and you need to do it manually).

Now let’s quickly explain how the browser reads your app. As with all front-end apps, the browser first searches for the file named: index.html. And it does find it in our app just as well. However, there is not much in the file, is there?

Apart from some meta sh*t in the head, the body only contains one tag – and a weird one at that. And this is, my dear, exactly where the Angular takes over. The app-root is the selector of our main component, the app component:

Anything you want for app to do, anything you want displayed, need to be somehow routed to the app-component.

We have our three components: the header, the footer and the main (aka body). But until they appear in the AppComponent (or in the routing, but that’s a completely different story), they do not exist in our app. Let’s add them to the AppComponent, then.

adding components to the app component

Go to your app.component.html file. You’ll see it’s full of junk. Remove it all. Instead add the following code there:

<app-header></app-header>
<app-main></app-main>
<app-footer></app-footer>

If any of the selectors is marked red, you need to import them to your AppComponent. Do the right-click (or click + shift, depending on the IDE) and import the components.

You’ll see the import of the components at the top of your app.component.ts file.

If you run your app now, you’d see whatever’s inside the html files of those three components (usually there is a sentence: “Header works!” or something like that).

Adding routing to the main component

If you want your page to just be a static landing page, well done. You’re pretty much done. Just add a bunch of text and images to your three components and pat yourself on the back for the job well done.

But… We want our app to be dynamic. We want it to have a potential to grow and to display multiple different pages. We want to create services, connect to the backend or to external APIs. We need some routing. This is like a map of all the URLs we can pick and how to get to them.

Let’s add the routing to our MainComponent. This way the header and the footer will always stay intact (which means they will only load once and not on each and every page we open) and all the dynamic changes will happen within the MainComponent.

First, open your terminal and paste the following:

ng add @angular/router

Note! This should return an error or a notification of some kind that will say that the Routing is already installed.

Then, let’s do the actual routing. Let’s create two more components that can be displayed in the MainComponent. For example, let’s create two pages: About and Contact.

ng generate component about
ng generate component contact

Now, in the old days, we’d create the app-routing.module.ts file but since Angular 16, we do it in app.routes.ts and app.config.ts files.

In the routes file, all you need is a routes const with all the endpoints you want to have on your page. Here, we have the empty path (which means just the URL of your page) and two subpages: /about and /contact.

I like to put the empty path as the last option, together with the wildcard path ( the two asterisks mean all the endpoints that weren’t mentioned above). This way, the browser will look through all the available endpoints and if it doesn’t find it, it will still go to the main component instead of crashing you page.

Then, the app.config.ts file. The Angular CLI does everything for you. You just need to make sure you have provideRouter(routes) in your providers’ section.

Note! If for some reason you do not have those files, just create them and make sure they are in the src/app folder.

The last step is to add the header, the footer and the routing to our app.component.html file.

Swap the <app-main></app-main> tag to the <router-outlet></router-outlet> and you’re golden.

Running the app with NG SERVE

In order to run your app, click the “play” button in your IDE or type

ng serve 

in your terminal. Usually, the app starts in the http://localhost:4200/. Whenever you save your code, the ng will reload your app to see all the latest changes.

---

That’s it.

Your basic app is up and running. From here, you can taking it anywhere you want. Add a custom-made header and footer that will load once and be there all the time, use router links instead of hrefs to move around the components quickly, add services and connect to the backend or any external API you want.

You can find the complete code HERE. Feel free to use it however you like it. Obviously, it comes with no strings attached and with the WYSIWYG type of rights. Don’t blame me when my hidden Trojan bug eats your computer in seconds. 😉

Just kidding – I’m not that savvy. Yet. 🙂

And remember – It’s up to you what you do with your code. The sky is the limit!

Ciao!

/*
Until next time,
stay positive (like unsigned integer) and keep coding!
eMs
*/