<commit_before># Common Routing Tasks

This topic describes how to implement many of the common tasks associated with adding the Angular router to your application.

{@a basics}
## Generate an application with routing enabled

The following command uses the Angular CLI to generate a basic Angular application with an application routing module, called `AppRoutingModule`, which is an NgModule where you can configure your routes.
The application name in the following example is `routing-app`.

<code-example language="sh">
  ng new routing-app --routing
</code-example>

When generating a new application, the CLI prompts you to select CSS or a CSS preprocessor.
For this example, accept the default of `CSS`.

### Adding components for routing

To use the Angular router, an application needs to have at least two components so that it can navigate from one to the other. To create a component using the CLI, enter the following at the command line where `first` is the name of your component:

<code-example language="sh">
  ng generate component first
</code-example>

Repeat this step for a second component but give it a different name.
Here, the new name is `second`.

<code-example language="sh">
  ng generate component second
</code-example>

The CLI automatically appends `Component`, so if you were to write `first-component`, your component would be `FirstComponentComponent`.

{@a basics-base-href}

<div class="alert is-helpful">

  #### `<base href>`

  This guide works with a CLI-generated Angular application.
  If you are working manually, make sure that you have `<base href="/">` in the `<head>` of your index.html file.
  This assumes that the `app` folder is the application root, and uses `"/"`.

  </code-example>
<commit_msg>docs: describe your change... (#43455)<commit_after># Common Routing Tasks

This topic describes how to implement many of the common tasks associated with adding the Angular router to your application.

{@a basics}
## Generate an application with routing enabled

The following command uses the Angular CLI to generate a basic Angular application with an application routing module, called `AppRoutingModule`, which is an NgModule where you can configure your routes.
The application name in the following example is `routing-app`.

<code-example language="sh">
  ng new routing-app --routing --defaults
</code-example>

### Adding components for routing

To use the Angular router, an application needs to have at least two components so that it can navigate from one to the other. To create a component using the CLI, enter the following at the command line where `first` is the name of your component:

<code-example language="sh">
  ng generate component first
</code-example>

Repeat this step for a second component but give it a different name.
Here, the new name is `second`.

<code-example language="sh">
  ng generate component second
</code-example>

The CLI automatically appends `Component`, so if you were to write `first-component`, your component would be `FirstComponentComponent`.

{@a basics-base-href}

<div class="alert is-helpful">

  #### `<base href>`

  This guide works with a CLI-generated Angular application.
  If you are working manually, make sure that you have `<base href="/">` in the `<head>` of your index.html file.
  This assumes that the `app` folder is the application root, and uses `"/"`.

  </code-example>

{'fraction_non_alphanumeric': 0.07789535567313345, 'fraction_numerical': 0.0014697236919459142, 'mean_word_length': 4.453525641025641, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 25, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7290507', 'n_tokens_mistral': 891, 'n_tokens_neox': 845, 'n_words': 479}