package.json — npm configuration that you must be familiar with. if not, take a quick look here. we can also write and run custom scripts from here. for eg. you can see start script defined as ng serve so you can run npm start which in turn will run ng serve.

protractor.conf.js — e2e test config for protractor

README.md — documentation for our project. by default you can see all the available commands that we can run for our app. we should keep updating this, as and when required, for our specific application.

tsconfig.json — typescript compiler configuration

src directory —

this is where our application code resides. here is how it should look as of now:

application source folder

app directory — this contains our root module app.module.ts which is needed for application bootstrap and declares all the components used in our application. also, our root component app.component.ts reside here along with it’s template ( app.component.html), style ( app.component.css) and unit test ( app.component.spec.ts). as we will write new components, we will see how those are nested inside our root app component.

assets dir — here we keep the assets like images, fonts etc that need to be copied as-is.

environments dir — files for our target environments. we generally have different environment specific configs that are used during build, one example being which api end point is called for crud operations. this is where we define those configs.

index.html — main html file which is served to browser. all the script and style references are injected by cli automatically here, so we do not need to edit this manually, almost ever.

main.ts — this is the main entry point for our angular application and this is where application bootstrap method is called for our root module.

1

platformBrowserDynamic().bootstrapModule(AppModule)

polyfills.ts — polyfills to support all kind of browsers for a consistent user experience across browsers.