Creating components with CLI in Angular - Performance Optimization Steps

Performance: Creating components with CLI

MEDIUM IMPACT

This affects initial page load speed and bundle size by controlling how components are generated and included in the app.

Generating Angular components for a project

Angular

ng generate component my-component --skip-tests --inline-style --inline-template

Generates only essential code with inline styles and templates, skipping test files to reduce bundle size and build time.

📈 Performance Gainsaves ~3-5kb per component, reduces build time by avoiding extra files

Generating Angular components for a project

Angular

ng generate component my-component

Generates all default files including CSS, HTML, and test files even if not needed, increasing bundle size and build time.

📉 Performance Costadds ~3-5kb per unused file, slightly increases build time

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Default CLI component generation	Moderate (extra files increase DOM complexity)	Multiple reflows if many CSS files	Higher paint cost due to separate CSS	[X] Bad
CLI component with inline styles/templates and no tests	Lower (fewer files, simpler DOM)	Single reflow	Lower paint cost with inline styles	[OK] Good

Rendering Pipeline

Component creation affects the bundle size and code complexity, which impacts the browser's parsing and rendering speed during the critical rendering path.

→Parsing

→Style Calculation

→Layout

→Paint

⚠️ BottleneckParsing and Style Calculation due to larger bundles and more CSS files

Core Web Vital Affected

LCP

This affects initial page load speed and bundle size by controlling how components are generated and included in the app.

Optimization Tips

1Use Angular CLI flags like --inline-style and --inline-template to reduce file count and bundle size.

2Skip generating test files if not needed to save build time and reduce project size.

3Smaller bundles improve parsing speed and reduce Largest Contentful Paint (LCP).

Performance Quiz - 3 Questions

How does using --inline-style and --inline-template flags when generating Angular components affect performance?

A Reduces bundle size by embedding styles and templates, improving load speed

B Increases bundle size by adding more files

C Has no effect on performance

D Causes more reflows during rendering

DevTools: Network

How to check: Open DevTools > Network tab, filter by JS and CSS files, and compare bundle sizes before and after using CLI flags.

What to look for: Look for reduced number and size of CSS and JS files indicating smaller bundles and faster load times.

Practice

1. What command do you use to create a new Angular component using the CLI?

easy

A. ng build component component-name

B. ng create component component-name

C. ng new component component-name

D. ng generate component component-name

Solution

1. Step 1: Understand Angular CLI commands

   The Angular CLI uses ng generate to create new files and features.

2. Step 2: Identify the correct syntax for creating components

   To create a component, the command is ng generate component followed by the component name.

3. Final Answer:

   ng generate component component-name -> Option D

4. Quick Check:

   Use ng generate component to create components [OK]

Hint: Remember: 'generate' creates, 'create' is incorrect here [OK]

Common Mistakes:

• Using 'ng create' instead of 'ng generate'
• Confusing 'ng new' which creates a new project
• Using 'ng build' which compiles the app

2. Which of the following is the correct syntax to generate a component named header using Angular CLI?

easy

A. ng generate component header

B. ng generate component-header

C. ng generate component:header

D. ng generate component/header

Solution

1. Step 1: Check the correct command format

   The Angular CLI expects the component name as a simple argument after the command.

2. Step 2: Identify the valid component name format

   Component names should be simple words or camelCase without special characters like ':' or '/'.

3. Final Answer:

   ng generate component header -> Option A

4. Quick Check:

   Use space, not symbols, between command and name [OK]

Hint: Use space after 'component' for name, no symbols [OK]

Common Mistakes:

• Using symbols like ':' or '/' in component name
• Hyphenating the command instead of the name
• Confusing command syntax with file paths

3. What files are created when you run ng generate component footer in an Angular project?

medium

A. footer.component.js, footer.component.html, footer.component.css

B. footer.ts, footer.html, footer.css, footer.spec.ts

C. footer.component.ts, footer.component.html, footer.component.css, footer.component.spec.ts

D. footer.component.ts, footer.html, footer.css, footer.spec.js

Solution

1. Step 1: Recall Angular component file structure

   Angular components generate four files: TypeScript, HTML, CSS, and a test spec file, all with the component name prefix.

2. Step 2: Match the correct file extensions and naming

   The files have extensions .ts, .html, .css, and .spec.ts with the component name and '.component' in the filename.

3. Final Answer:

   footer.component.ts, footer.component.html, footer.component.css, footer.component.spec.ts -> Option C

4. Quick Check:

   Angular components create 4 files with .component and correct extensions [OK]

Hint: Remember 4 files: .ts, .html, .css, .spec.ts [OK]

Common Mistakes:

• Missing the .spec.ts test file
• Using .js instead of .ts
• Omitting '.component' in filenames

4. You ran ng generate component nav-bar but got an error. What is the likely cause?

medium

A. You must run the command inside an Angular project folder

B. Component names cannot contain hyphens

C. The CLI command should be ng create component nav-bar

D. Component names must be uppercase

Solution

1. Step 1: Check the environment for running CLI commands

   Angular CLI commands must be run inside an Angular project folder where configuration files exist.

2. Step 2: Verify the command syntax and naming rules

   Hyphens are allowed in component names, and the command is ng generate component, not ng create. Component names can be lowercase.

3. Final Answer:

   You must run the command inside an Angular project folder -> Option A

4. Quick Check:

   Run CLI commands inside Angular project folder [OK]

Hint: Always run CLI commands inside your Angular project folder [OK]

Common Mistakes:

• Trying to run commands outside the project folder
• Using 'ng create' instead of 'ng generate'
• Thinking hyphens are invalid in names

5. You want to create a component named userProfile inside a folder features using Angular CLI. Which command correctly does this?

hard

A. ng generate component features userProfile

B. ng generate component features/userProfile

C. ng generate component features-userProfile

D. ng generate component userProfile/features

Solution

1. Step 1: Understand folder structure in CLI commands

   To create a component inside a folder, specify the folder path before the component name separated by a slash.

2. Step 2: Identify the correct command syntax

   The correct syntax is ng generate component features/userProfile to place the component inside the 'features' folder.

3. Final Answer:

   ng generate component features/userProfile -> Option B

4. Quick Check:

   Use slash to specify folder path before component name [OK]

Hint: Use folder/componentName with slash to create nested components [OK]

Common Mistakes:

• Swapping folder and component name order
• Using space instead of slash for folder path
• Hyphenating folder and component name incorrectly