In this video I want to show you the Angular project folder structure which was generated by Angular cli for us. It's really crucial for next steps to understand how Angular starts an application and what files are invoked.

In previous video we bootrstrapped our angular project and emptied app.component.html and we can see "Hello Angular" on screen. The question is now how it's rendered and what all this generated files are.

Just to remind you that we are writing Angular projects with Typescript. This is why the extension is .ts everywhere. You can of course understand Angular code with just Javascript knowledge but sooner or later it's a must to learn Typescript.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

The first file which is loaded by webserver when we start it is src/main.ts. As you can see here we have a bunch of imports on the top. So the idea is that every file is completely isolated and get decide what to import inside and export outside.

Here we enable production mode if we build the application for production and then the most import line.

platformBrowserDynamic().bootstrapModule(AppModule)

This starts the angular application. As you can see as an argument in bootstrapModule we give AppModule. So this is our main module and let's check it content.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

It can look quite frightening on the first glance. So what we see here is typical angular module. And the question now what is module at all. Module is an isolated part of project which do something. For example RegisterPage is a module or Feed is a module. Actually any part of your application is a module. The main idea that it is isolated and you can register some things inside module and define what do you want to export for outside world.

Here we have AppModule it's the first module which is called when we start an application. As you can see a module is just a class. Then at the top of class we call a decorator @NgModule when we define some parameters. And just to remind you once again we have here classes and decorators and it works here because it's a typescript which have support of such things. It's not plain javascript.

Inside decorator you can see 4 blocks. In declarations we declare everything which is registered in current module. In our case it's AppComponent. In imports we say what other modules we need inside this module. About providers we will talk in other video and bootstrap is used exactly to start an application. Here we say that we use AppComponent as a main component for the application.

It's look not easy for sure but you get used to it because it looks the same in every module. The main point is that we call in bootstrapModule AppModule. And inside here in bootstrap section we see AppComponent. So this is exactly the next this which is called next.

Let's check AppComponent

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'angular-for-beginners';
}

It looks actually a bit similar to AppModule. We see here imports, class and decorator. The main difference is that this is not a module. It's a component. This is why you can see component decorator here. Basically the component is isolated this which has some logic inside, some css and some html. In this case you can see templateUrl this is the part to our template. This is exactly the fine that we changed. Then styleUrls it's an array of paths where we can write css for this component and selector. In our case it's app-root.

You can see also a title properly inside our class. Let's just delete it because we don't use it yet and it's a leftover from generated files.

Now if you open app.component.html you see our markup that we wrote but now we know how it appears there.

And one more point. Let's open src/index.html. This is exactly the file which angular uses for application rendering. And this specific tag app-root is a place where our application will be rendered.

Now you know how exactly Angular renders the application.

If angular for beginners is too easy for you or you want more advanced stuff check my 14 hours Angular course where we create a real project from beginning to the end. Link is also in the description.