Creating a service with CLI in Angular - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to generate a new Angular service using the CLI.

Angular

ng generate [1] my-service

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

Aservice

Bcomponent

Cmodule

Ddirective

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'component' instead of 'service' will create a component, not a service.

Forgetting to specify the type after 'ng generate'.

The Angular CLI command ng generate service creates a new service.

2fill in blank

medium

Complete the command to create a service with the CLI and skip the test file generation.

Angular

ng generate service my-service [1]

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

A--noTest

B--skip-tests

C--skipTest

D--no-tests

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect flag names like '--no-tests' which are not recognized.

Omitting the flag and getting test files generated.

The --skip-tests flag tells the CLI not to create the test file.

3fill in blank

hard

Fix the error in the command to generate a service named 'data' inside a folder 'shared'.

Angular

ng generate service [1]/data

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

Ashared

Bshare

Cshared/

D/shared

Attempts:

3 left

💡 Hint

Common Mistakes

Adding a trailing slash after the folder name.

Adding a leading slash before the folder name.

The correct folder path is 'shared/data'. Do not add trailing slashes or leading slashes in the argument.

4fill in blank

hard

Fill in the blanks to generate a service named 'auth' in the 'core' folder and make it provided in root.

Angular

ng generate service [1]/[2] --[3]

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

Acore

Bauth

CprovidedIn=root

DprovidedInRoot

Attempts:

3 left

💡 Hint

Common Mistakes

Using kebab-case for the flag instead of camelCase.

Swapping folder and service names.

The service path is 'core/auth'. The flag --providedIn=root makes the service available app-wide.

5fill in blank

hard

Fill all three blanks to generate a service named 'logger' in the 'utils' folder, skip tests, and specify flat structure.

Angular

ng generate service [1]/[2] --[3] --skip-tests

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

Autils

Blogger

Cflat

Dflat-structure

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flat-structure' instead of 'flat' for the flag.

Omitting the folder or service name.

The service path is 'utils/logger'. The --flat flag creates the service without a folder. The --skip-tests flag skips test files.