Button doesn't display in component

[adrobson]

Which @angular/* package(s) are the source of the bug?

common, Don't known / other

Is this a regression?

Yes

Description

I am following the instructions for the housing tutorial.
I got to the end of lesson 3 but there are important differences between what I see in the browser and what I should be seeing.

1. The button that is supposed to be in the home component doesn't show at all
2. There is supposed to be a border around the input box but that also doesn't show.

The same result in edge, firefox and chrome

Please provide a link to a minimal reproduction of the bug

Install versions as below. Follow instructions to the end of part 3.

Please provide the exception or error you saw

1. The button that is supposed to be in the home component doesn't show at all
2. There is supposed to be a border around the input box but that also doesn't show.

Please provide the environment you discovered this bug in (run ng version)

Node v20.11.0
Angular cli 17.2.3
Schematics/Angular 17.2.3
Typescript 5.3.3

Anything else?

No response

[adrobson]

It turns out this is to do with the styles.css file. In the examples they start with a styles.css which has values. Part of this file sets a PrimaryColor value. If there isn't a value for PrimaryColor the button is white on a white background ie invisible.

However, I can't find anything in the instructions to populate this file. If you are creating a new project the file is empty and so the button is invisible.

Therefore you might want to add something to populate this file. Otherwise there will be many like me (for a bit), who think Angular is broken.

[garrettld]

It sounds like you started a brand new project instead of starting by downloading the "default" app like the tutorial suggests. The default app includes the styles.css file with the --primary-color value already defined for you (and more).

However, the download functionality appears to be incomplete ever since commit c4de4e1 because the download no longer includes the necessary config files (tsconfig.ts, package.json, angular.json, etc.). If these were included, the styles.css file would already be configured as the global stylesheet for you, as shown here in the now-deleted file:

angular/adev/src/content/tutorials/common/angular.json

Line 51 in 8d58595

"styles": ["src/styles.css"],

Kinda related: #53283, which started as a separate issue but the recent comments are talking about the missing config files.

I'm not sure if the solution is to partially undo c4de4e1 by restoring the common folder or if there's some other way to get these files now.

If the common folder that contains all the common config files is not restored, then we should at least update the README that still references it: https://github.com/angular/angular/tree/main/adev/src/content/tutorials#common

[adrobson]

Yes that's what happened. Maybe its just me that went wrong but I doubt it. Since the styles file is the only difference between starting a new project and downloading the other project, you could possibly add a note for those, like I did who are starting from their own project.

[madrizr]

Hello! I want to try to solve the issue