Angular Project Setup with Setup

Maximilian Schwarzmüller
A free video tutorial from Maximilian Schwarzmüller
Professional Web Developer and Instructor
4.6 instructor rating • 35 courses • 1,252,476 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 (2020 Edition)

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

33:20:33 of on-demand video • Updated November 2020

  • 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 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 that section. So therefore, you can simply create a new project with ng new; as we did 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 lectures. I'll always ensure that this is the case. But here, I'll now simply have this empty setup. We can remove FormsModule from app.module.ts (in case you added it) so that we 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 Ctrl-C and then installing it with this NPM tool (the Node Package Manager), by running npm install --save bootstrap@3. It's important to install version 3 as it's the version I use in this course. Now, this will install it locally in this project; not globally, but locally. Simply hit Enter and it will download Bootstrap and store it in the node_modules folder. Now, that's the first step, but to be able to use it, we also need to make Angular aware of this styling package we want to use and we do that in one of the config files (the most important one actually) the angular.json file. This configures the CLI 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 the styles we want to use by default. Here you've got this "styles" array in this "architect", "build" node. Now, it already has one entry "src/styles.css". This is a file you can use to define some global styles you want to use application-wide. So, you can enter any code here and it will be used in every Angular component. But, in my case, I will add another import prior to that "src/styles.css" import so that we could overwrite it within this file. Now, here we need to point to node_modules (to this node_modules folder we've got here) and if you scroll down a bit, there are many dependencies because you have dependencies of dependencies here. If you scroll down a bit more, you'll see bootstrap and in there you'll find a dist folder, a CSS folder and there, bootstrap.css file, or to be precise, there is also a bootstrap.min.css file just hidden a bit by my IDE. So, we can enter "node_modules/bootstrap/dist/css/bootstrap.min.css" and make sure that you've 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've added this path, save your angular.json file and re-run ng serve to load this new configuration. As I said, you don't really need to change anything else in here. The default configuration should work perfectly. So, once you're done you can visit localhost:4200. You won't see anything because I deleted all the content in the template. But if you access the Elements tab in the Developer Tools, you should see that in the head section there are two styles imports and the first one should be Bootstrap v3.3.7. Now, this is the import you need there and with that, everything we do in the course will look correct. Now, one last change is needed in app.component.ts. I'll get rid of whichever property we have here. With that, the starting project is prepared. You can always use this at the beginning of a new module and, importantly, you also saw how you can add your own styles.