Angular Web Framework Angular Quality & Compliance 5 — Questions and Answers
Question 1: What does the Angular compiler's `fullTemplateTypeCheck` option do differently from `strictTemplates`?
- fullTemplateTypeCheck checks only inline templates; strictTemplates checks external HTML files
- fullTemplateTypeCheck enables basic type inference in templates; strictTemplates adds stricter checks like input type narrowing (Correct answer)
- fullTemplateTypeCheck is for production builds only; strictTemplates applies to development builds
- They are identical options with different names for backward compatibility
Correct answer: fullTemplateTypeCheck enables basic type inference in templates; strictTemplates adds stricter checks like input type narrowing
`fullTemplateTypeCheck` (legacy) enables type-checking of template expressions, while `strictTemplates` adds additional constraints like stricter input binding type checking and generic type inference.
Question 2: In an Angular project with Husky configured, what is the typical purpose of a pre-commit hook?
- To deploy the app to staging automatically on every commit
- To run linting and unit tests before allowing a git commit to succeed (Correct answer)
- To send Slack notifications when code is committed
- To auto-increment the version number in package.json
Correct answer: To run linting and unit tests before allowing a git commit to succeed
Pre-commit hooks with Husky commonly run `ng lint` and `ng test` to catch errors before they enter the repository, enforcing quality gates locally.
Question 3: Which Angular testing utility allows you to query the rendered DOM by CSS selector in a component test?
- fixture.nativeElement.querySelector()
- fixture.debugElement.query(By.css())
- TestBed.get(ElementRef).nativeElement
- Both A and B (Correct answer)
Correct answer: Both A and B
Both `fixture.nativeElement.querySelector()` and `fixture.debugElement.query(By.css())` work for DOM queries; `debugElement` is Angular-aware while `nativeElement` is a direct DOM reference.
Question 4: What is the purpose of the `--sourceMap` flag in an Angular production build for compliance and debugging purposes?
- It embeds source maps in the bundle for runtime performance tracing
- It generates separate .map files that map minified code back to original source for debugging (Correct answer)
- It enables TypeScript strict mode during the build
- It produces a report of all third-party licenses in the bundle
Correct answer: It generates separate .map files that map minified code back to original source for debugging
Source maps (`.map` files) allow developers and tools to trace errors in minified production bundles back to the original TypeScript/HTML source lines.
Question 5: What does Angular's built-in CSRF (Cross-Site Request Forgery) protection mechanism do?
- Adds a custom HTTP header (`X-XSRF-TOKEN`) from a cookie value on outgoing requests (Correct answer)
- Encrypts all POST request bodies automatically
- Blocks all cross-origin HTTP requests by default
- Validates the Origin header against a whitelist in the Angular router
Correct answer: Adds a custom HTTP header (`X-XSRF-TOKEN`) from a cookie value on outgoing requests
Angular's `HttpClientXsrfModule` reads the XSRF token from a cookie and sends it as the `X-XSRF-TOKEN` header, allowing the server to verify the request is legitimate.
Question 6: Which practice best improves the maintainability and compliance of Angular template tests over time?
- Testing implementation details like private methods directly
- Querying DOM elements by stable `data-testid` attributes rather than CSS classes (Correct answer)
- Hard-coding expected HTML strings in every assertion
- Using `NO_ERRORS_SCHEMA` in all tests to avoid future failures
Correct answer: Querying DOM elements by stable `data-testid` attributes rather than CSS classes
Using `data-testid` attributes decouples tests from styling and structure changes, making them resilient to refactoring without affecting test validity.
Question 7: What does the `ng build --stats-json` flag produce and how is it used for compliance or performance auditing?
- A JSON file of TypeScript errors for CI reporting
- A `stats.json` bundle analysis file consumable by tools like webpack-bundle-analyzer (Correct answer)
- A performance profile of the Angular compiler's memory usage
- A JSON summary of all lint violations found during build
Correct answer: A `stats.json` bundle analysis file consumable by tools like webpack-bundle-analyzer
`--stats-json` outputs webpack's `stats.json`, which tools like `webpack-bundle-analyzer` use to visualize bundle composition and identify bloated or unauthorized dependencies.
Angular Web Framework Angular Quality & Compliance 5
What does the Angular compiler's `fullTemplateTypeCheck` option do differently from `strictTemplates`?