Angular project structure walkthrough - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Identify the purpose of the 'src/app' folder in an Angular project

In a typical Angular project, what is the main purpose of the 'src/app' folder?

A It holds the compiled JavaScript files after building the project

B It stores configuration files like angular.json and tsconfig.json

C It contains the main application code including components, services, and modules

D It contains third-party libraries and dependencies

💡 Hint

Think about where you write your Angular components and services.

The 'src/app' folder is where the main application code lives. This includes components, services, and modules that make up the Angular app.

❓ component_behavior

intermediate

What happens if you delete the 'main.ts' file?

In an Angular project, what is the effect of deleting the 'src/main.ts' file?

A The application will fail to bootstrap and will not start

B The application will run normally without any issues

C The styles will not load but the app will still start

D Only the tests will fail but the app runs fine

💡 Hint

Consider what 'main.ts' does in Angular.

'main.ts' is the entry point that bootstraps the root module. Without it, Angular cannot start the app.

📝 Syntax

advanced

Which file defines the root module in Angular?

Which file typically defines the root Angular module in a standard project structure?

A package.json

B src/main.ts

C angular.json

D src/app/app.module.ts

💡 Hint

Look for the file that declares NgModule and imports BrowserModule.

The root module is defined in 'app.module.ts' inside the 'src/app' folder.

🔧 Debug

advanced

Why does the app fail to load styles from 'src/styles.css'?

If you add styles to 'src/styles.css' but they do not apply in the app, what is the most likely cause?

A The styles file is empty so no styles are applied

B The 'angular.json' file does not include 'src/styles.css' in the styles array

C The styles are overridden by inline styles in components

D The 'package.json' is missing the styles dependency

💡 Hint

Check where global styles are registered in Angular configuration.

Global styles must be listed in the 'styles' array inside 'angular.json' to be included in the build.

❓ lifecycle

expert

Order of files executed when starting an Angular app

What is the correct order of execution for these Angular project files when the app starts?

A 4,1,2,3

B 1,2,3,4

C 4,2,1,3

D 1,4,2,3

💡 Hint

Think about what the browser loads first and how Angular bootstraps modules and components.

The browser first loads 'index.html' (4), then Angular runs 'main.ts' (1) to bootstrap the root module 'app.module.ts' (2), which loads the root component 'app.component.ts' (3).