docs: correct stale visibleLines ranges in the first-app tutorial

The tutorial's example files shifted without the README line references
following, so several steps point at the wrong code. In two cases every
requested line is past the end of the file; on the inputs step this renders
as a code block with no lines visible at all.

(cherry picked from commit 46b02cc181)
This commit is contained in:
Kam
2026-08-30 16:33:14 +03:00
committed by Matthew Beck
parent a6b29d79c0
commit ffbb7e6d52
6 changed files with 9 additions and 9 deletions
@@ -100,7 +100,7 @@ In your IDE:
1. In `app.ts`, in the `App` class definition, replace the `title` line with this code to change the component title.
<docs-code header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/02-Home/src/app/app.ts" visibleLines="[11,13]"/>
<docs-code header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/02-Home/src/app/app.ts" visibleLines="[10]"/>
Then, save the changes you made to `app.ts`.
@@ -30,7 +30,7 @@ In the code editor, import the `input` helper method from `@angular/core` into t
<docs-step title="Add the Input property">
Add a required property called `housingLocation` and initialize it using `input.required()` with the type `HousingLocationInfo`.
<docs-code header="Declare the input property in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[12]"/>
<docs-code header="Declare the input property in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[10]"/>
You have to invoke the `required` method on `input` to indicate that the parent component must provide a value. In our example application, we know this value will always be passed in — this is by design. The `.required()` call ensures that the TypeScript compiler enforces this and treats the property as non-nullable when this component is used in a template.
@@ -57,7 +57,7 @@ In the **Edit** pane of your IDE:
1. Inside the `HousingService` class, paste these functions after the data you just copied.
These functions allow dependencies to access the service's data.
<docs-code header="Service functions in src/app/housing.service.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/housing.service.ts" visibleLines="[112,118]"/>
<docs-code header="Service functions in src/app/housing.service.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/housing.service.ts" visibleLines="[110,116]"/>
You will need these functions in a future lesson. For now, it is enough to understand that these functions return either a specific `HousingLocation` by id or the entire list.
@@ -37,11 +37,11 @@ In this lesson, you will enable routing in your application to navigate to the d
2. In `main.ts`, make the following updates to enable routing in the application:
1. Import the routes file and the `provideRouter` function:
<docs-code header="Import routing details in src/main.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/main.ts" visibleLines="[7,8]"/>
<docs-code header="Import routing details in src/main.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/main.ts" visibleLines="[3,4]"/>
1. Update the call to `bootstrapApplication` to include the routing configuration:
<docs-code header="Add router configuration in src/main.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/main.ts" visibleLines="[10,17]"/>
<docs-code header="Add router configuration in src/main.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/main.ts" visibleLines="[6,8]"/>
3. In `src/app/app.ts`, update the component to use routing:
1. Add file level imports for the router directives `RouterOutlet` and `RouterLink`:
@@ -25,7 +25,7 @@ In the **Edit** pane of your IDE:
1. In `src/app/housing.service.ts`, inside the `HousingService` class, paste this method at the bottom of the class definition.
<docs-code header="Submit method in src/app/housing.service.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/housing.service.ts" visibleLines="[120,124]"/>
<docs-code header="Submit method in src/app/housing.service.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/housing.service.ts" visibleLines="[118,122]"/>
1. Confirm that the app builds without error.
Correct any errors before you continue to the next step.
@@ -156,13 +156,13 @@ The data source has been configured, the next step is to update your web app to
1. Add a string property called `url` and set its value to `'http://localhost:3000/locations'`
<docs-code header="Add url property to housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[8]"/>
<docs-code header="Add url property to housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[6]"/>
This code will result in errors in the rest of the file because it depends on the `housingLocationList` property. We're going to update the service methods next.
1. Update the `getAllHousingLocations` function to make a call to the web server you configured.
<docs-code header="Update the getAllHousingLocations method in housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[10,13]"/>
<docs-code header="Update the getAllHousingLocations method in housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[8,11]"/>
The code now uses asynchronous code to make a **GET** request over HTTP.
@@ -172,7 +172,7 @@ The data source has been configured, the next step is to update your web app to
HELPFUL: Notice the `fetch` method has been updated to _query_ the data for location with a matching `id` property value. See [URL Search Parameter](https://developer.mozilla.org/en-US/docs/Web/API/URL/search) for more information.
<docs-code header="Update the getHousingLocationById method in housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[15,19]"/>
<docs-code header="Update the getHousingLocationById method in housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[13,17]"/>
1. Once all the updates are complete, your updated service should match the following code.