Angular project structure walkthrough - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define the root component selector in Angular.

Angular

@Component({
  selector: '[1]',
  templateUrl: './app.component.html'
})
export class AppComponent {}

Drag options to blanks, or click blank then click option'

Amain-app

Broot-app

Capp-root

Dapp-main

Attempts:

3 left

💡 Hint

Common Mistakes

Using a selector name that does not match the one in index.html.

Confusing the selector with the component class name.

The root component selector is usually 'app-root' in Angular projects.

2fill in blank

medium

Complete the code to import the CommonModule in a standalone Angular component.

Angular

@Component({
  standalone: true,
  imports: [[1]],
  template: `<p>Hello World</p>`
})
export class HelloComponent {}

Drag options to blanks, or click blank then click option'

ACommonModule

BFormsModule

CHttpClientModule

DRouterModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing FormsModule when no forms are used.

Forgetting to import CommonModule causing template errors.

CommonModule provides common directives like *ngIf and *ngFor needed in templates.

3fill in blank

hard

Fix the error in the Angular module declaration by completing the missing metadata property.

Angular

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

Drag options to blanks, or click blank then click option'

Aschemas

Bimports

Cproviders

Dexports

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'exports' instead of 'imports' for module dependencies.

Omitting the imports property causing runtime errors.

The 'imports' property is used to bring other modules into this module.

4fill in blank

hard

Fill both blanks to complete the Angular routing module setup.

Angular

const routes: Routes = [
  { path: '', component: [1] }
];

@NgModule({
  imports: [RouterModule.[2](routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Drag options to blanks, or click blank then click option'

AHomeComponent

BforRoot

CforChild

DAppComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using forChild in the root routing module.

Referencing the wrong component in the route.

The root route uses HomeComponent and RouterModule.forRoot sets up the main routes.

5fill in blank

hard

Fill all three blanks to create a reactive form control in Angular.

Angular

import { Component, [1] } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-input',
  template: `<input [formControl]="nameControl">` 
})
export class InputComponent implements OnInit {
  nameControl = new FormControl([2]);

  ngOnInit() {
    this.nameControl.[3](value => console.log(value));
  }
}

Drag options to blanks, or click blank then click option'

AOnInit

B''

CvalueChanges.subscribe

DngOnInit

Attempts:

3 left

💡 Hint

Common Mistakes

Not subscribing to valueChanges causing no reaction to input.

Using ngOnInit without importing OnInit.

OnInit is imported for lifecycle hooks, the FormControl starts with an empty string, and valueChanges.subscribe listens for changes.

Practice

1. Which folder in an Angular project typically contains the main application code and assets?

easy

A. src/

B. node_modules/

C. dist/

D. e2e/

Solution

1. Step 1: Understand Angular folder roles

   The src/ folder holds the source code including app files and assets.

2. Step 2: Identify other folders' purposes

   node_modules/ holds external libraries, dist/ is for build output, and e2e/ is for end-to-end tests.

3. Final Answer:

   src/ -> Option A

4. Quick Check:

   App code and assets = src/ [OK]

Hint: Remember: src means source code folder [OK]

Common Mistakes:

• Confusing node_modules with source code
• Thinking dist holds source files
• Assuming e2e contains app code

2. Which file defines the root component of an Angular application?

easy

A. app.module.ts

B. app.component.ts

C. main.ts

D. index.html

Solution

1. Step 1: Identify root component file

   The root component is defined in app.component.ts, which contains the main UI logic.

2. Step 2: Differentiate other files

   app.module.ts defines the app module, main.ts bootstraps the app, and index.html is the main HTML page.

3. Final Answer:

   app.component.ts -> Option B

4. Quick Check:

   Root component = app.component.ts [OK]

Hint: Component files end with .component.ts [OK]

Common Mistakes:

• Confusing app.module.ts with component file
• Thinking main.ts defines UI
• Assuming index.html is a component

3. Given this Angular project structure snippet:

src/
  app/
    app.module.ts
    app.component.ts
  assets/
  styles.css

Which file is responsible for declaring components and importing modules?

medium

A. assets/

B. styles.css

C. app.component.ts

D. app.module.ts

Solution

1. Step 1: Understand app.module.ts role

   This file declares components and imports other Angular modules to organize the app.

2. Step 2: Clarify other files' roles

   app.component.ts defines UI logic, styles.css holds styles, and assets/ stores static files.

3. Final Answer:

   app.module.ts -> Option D

4. Quick Check:

   Module declarations = app.module.ts [OK]

Hint: Modules declare components, components define UI [OK]

Common Mistakes:

• Mixing component and module responsibilities
• Thinking styles.css declares components
• Confusing assets folder with code files

4. You see this error when running an Angular app:
ERROR in src/app/app.module.ts: Unexpected token
What is the most likely cause in the app.module.ts file?

medium

A. Missing @NgModule decorator

B. Empty app.component.ts file

C. Syntax error like missing comma or bracket

D. Wrong file extension instead of .ts

Solution

1. Step 1: Analyze error message

   An "Unexpected token" error usually means a syntax mistake like a missing comma or bracket.

2. Step 2: Check common syntax issues in app.module.ts

   Look for missing commas, brackets, or typos in imports or declarations.

3. Final Answer:

   Syntax error like missing comma or bracket -> Option C

4. Quick Check:

   Unexpected token = syntax error [OK]

Hint: Unexpected token means syntax mistake [OK]

Common Mistakes:

• Assuming missing decorator causes token error
• Blaming wrong file extension without checking syntax
• Thinking empty component file causes this error

5. You want to add a new feature module to your Angular app. Where should you place the new module file and what must you do to use it in your app?

hard

A. Place it inside src/app/ and import it in app.module.ts

B. Place it in src/assets/ and reference it in index.html

C. Place it in src/ root and add it to main.ts

D. Place it in src/styles/ and import in styles.css

Solution

1. Step 1: Locate new module in project structure

   Feature modules go inside src/app/ to keep app code organized.

2. Step 2: Import new module in app.module.ts

   To use the new module, import it in app.module.ts so Angular knows about it.

3. Final Answer:

   Place it inside src/app/ and import it in app.module.ts -> Option A

4. Quick Check:

   Feature module location and import = Place it inside src/app/ and import it in app.module.ts [OK]

Hint: Modules live in src/app and must be imported [OK]

Common Mistakes:

• Putting modules in assets or styles folders
• Forgetting to import the module in app.module.ts
• Adding modules to main.ts or index.html incorrectly