Bird
0
0

Given this code snippet in app.module.ts:

medium📝 component behavior Q13 of 15
Angular - Modules
Given this code snippet in app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ProductsModule } from './products/products.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ProductsModule],
  bootstrap: [AppComponent]
})
export class AppModule { }
What will happen if ProductsModule declares and exports a component ProductListComponent and you use <app-product-list> in AppComponent template?
AThe <code>ProductListComponent</code> will render correctly inside <code>AppComponent</code>
BAngular will throw a template parse error because <code>ProductListComponent</code> is not declared in AppModule
CThe app will compile but <code>ProductListComponent</code> will not display anything
DThe app will crash at runtime with a component not found error
Step-by-Step Solution
Solution:
  1. Step 1: Understand module imports and declarations

    Since ProductsModule is imported in AppModule, its declared components are available in AppModule's templates.
  2. Step 2: Check component usage in template

    Using <app-product-list> in AppComponent works because ProductListComponent is exported by ProductsModule.
  3. Final Answer:

    The ProductListComponent will render correctly inside AppComponent -> Option A
  4. Quick Check:

    Imported module components usable in templates = A [OK]
Quick Trick: Imported module components can be used in root templates [OK]
Common Mistakes:
  • Thinking components must be declared in AppModule to use
  • Assuming runtime crash instead of compile error
  • Believing imported components won't render

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes