by In this part, we’ll examine the file and folder structures of an Angular application. We’ll open the Welcome app and see what is in there. Since there are many files, we’ll focus on the the most relevant.
1. Workspace Configuration Files
The node_module folder contains all the dependencies needed for the application.
angular.json – this file contains the CLI default configurations for all the projects in the workspace. It include the configuration settings for building, testing and serving used by the CLI
package.json – Contains configuration for npm package dependencies used by all the projects in the workspace
package-lock.json – this file provides version information for the packages installed
src/ – this is the directory that contains the source files for the root-level application
2. Application Project Files
The application project files are placed in the in the src/ folder of the workspace. The src/ folder contains the source files for the root application. Let’s now look at the content of the src/ folder
app/ – this folder contains the where the application logic and data are defined. Discussed below
assets/ – this folder contains assets including images used by the application
environment/ – contains build configuration settings for a particular target environment. There is a default standard production environment
index.html – this is the index page of the web application. The script and css files are added automatically.
main.ts – this is the main entry point of the application. It compiles the application with the Just-In-Time(JIT) compiler and bootstraps the root module(AppModule) to run in a browser.
styles css – This files contains the css styles and stylesheets that are used by the project.
3. Content of the app/ Folder
The key project files you’ll be working with in located in the app/ directory inside the src/ folder. The file files inside include the following:
app.component.css – this is the css style for the root AppComponent. The styles here applies to the app.component.html file
app.component.html – this is the html template associated with the root component (AppComponent0
app.component.specs.ts – Use for unit testing of the root component
app.component.ts – This a TypeScript file that defines the core logic of the AppComponent. The view associated with the AppComponent is what becomes the root of the view hierarchy as you add components and services to your application.
app.module.ts – this file defines the root module of the application. The root module is called AppModule. This tell Angular how to organise your application. Any new components you will be adding to your application must be defined in the app.module.ts file.
app.routing.module.ts – this file contains the definitions for the navigation between components in Angular application
[…] Angular 10 – File Structure […]