Angular Project Setup with Setup

Maximilian Schwarzmüller
A free video tutorial from Maximilian Schwarzmüller
Professional Web Developer and Instructor
4.7 instructor rating • 36 courses • 1,404,265 students

Lecture description

A lot of sections of this course will start with a basic setup - this lecture explains how that basic setup is created with the CLI.

Learn more from the full course

Angular - The Complete Guide (2021 Edition)

Master Angular 10 (formerly "Angular 2") and build awesome, reactive web apps with the successor of Angular.js

33:20:49 of on-demand video • Updated February 2021

  • Develop modern, complex, responsive and scalable web applications with Angular 11
  • Fully understand the architecture behind an Angular application and how to use it
  • Use the gained, deep understanding of the Angular fundamentals to quickly establish yourself as a frontend developer
  • Create single-page applications with one of the most modern JavaScript frameworks out there
English Maximilian: Throughout this course, I'll often start with an empty project for a given section, so that we can focus on the topic at hand in this section. So therefore you can simply create a new project with Engine new as we did it a couple of lectures ago. And I'll typically start with an empty app component HTML file. If I have a different starting setup, you'll find it attached to the lecture. So, I'll always ensure that this is the case. But here, I'll now simply have this empty setup. We can now remove forms module from app module here, in case you added it. So that we really have a clean starting project, and there's one important thing. In this course, I'll use the bootstrap CSS framework to have some nice CSS styles out of the box, without us having to write all these CSS styles. Now to add this, we need to install it. We need to download it. We can do this by quitting this development server with control C, and then installing it with this NPM tool, this node package manager. By running NPM install, -: -save bootstrap, and now that's important, at free to install version free, which is the version I use in this course. Now this will install it locally in this project, not globally, locally. Simply hit enter, and it will download bootstrap and store it in that node modules folder. Now that's one first step, but to be able to use it, we also need to make angular aware of this styling package we wanna use. And we do that in one of the config files, the most important one actually, the angular.json file. This configures the seal I project. We will not work in this project file throughout the course because the default setup is perfect and we don't need to change anything there. But one thing we do need to change right now, is this styles we wanna use by default. Here you've got this styles array in this architect build node. Now it already has one entry, source styles CSS. This is a file you can use to define some global styles you wanna use application wide. So you can enter any CSS code here, and it will be used in every angler component. But in my case, I will add another import, prior to that source styles CSS import. So that we could overwrite it within this file. And now here, we need to point to node modules, so to this node modules folder we got there. And there if you scroll down a bit, there are many dependencies because you also have dependencies of dependencies here. If you scroll down a bit you'll see bootstrap. And in there you find a dist folder, a CSS folder, and there the bootstrap CSS file, or to be precise they're all just at bootstrap.min.css file just hidden a bit by my ID. So we can enter, node_modules/bootstrap/dist/css/bootstrap.min.css. And make sure that you got no typo in here, it's easy to miss the T or something like that. So make sure that you have a path like this. Once you edit this path here, save your package to json file and rerun NG serve to load this new configuration. As I said, you don't really need to change anything else here. The default configuration should work perfectly. So once you're done, you can wizard local host 4,200, and you won't see anything because I deleted all the content in the template. But, if you open the developer tools, and you go to the elements tab there, here in the head section, you will see that the styles CSS file is being imported. And if you go to sources, you should find that styles CSS file here. And in there, you will see that it's mentioning bootstrap, which basically means that everything worked and bootstrap is included here. And with that, you know, that everything we do in the course will work and we'll have to correct styles. And one last change in the app component, all to get rid of whichever property we have here. With that, the starting project is prepared. You can always use that at the beginning of a new module and important you also saw how you can add your own styles.