search

johnpapa / angular-tour-of-heroes

Angular - Tour of Heroes - The Next Step after Getting Started
Apache License 2.0
825 stars 1.44k forks source link

Error: GET http://localhost:4200/styles.css #115

Closed elekwent closed 7 years ago

elekwent commented 7 years ago

The last step in the Routing Tutorial is to apply a global style to the application. After following the instructions for doing so, I get an error in the browser: GET http://localhost:4200/styles.css. The app is being served using the CLI command: ng serve (if that makes any difference). The styles.css file is located at the default location where the CLI created it. Why can't the browser find the file?

index.html

<head>
  <meta charset="utf-8">
  <title>AngularTourOfHeroes</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="styles.css">
</head>

src directory (filtered for relevance)

.
├── app
│   ├── app-routing.module.ts
│   ├── app.component.css
│   ├── app.component.ts
│   ├── app.module.ts
│   ├── dashboard.component.css
│   ├── dashboard.component.html
│   ├── dashboard.component.ts
│   ├── hero-detail.component.css
│   ├── hero-detail.component.html
│   ├── hero-detail.component.ts
│   ├── hero.service.ts
│   ├── hero.ts
│   ├── heroes.component.css
│   ├── heroes.component.html
│   ├── heroes.component.ts
│   └── in-memory-data.service.ts
├── assets
├── favicon.ico
├── index.html
├── main.ts
└── styles.css
rollrodrig commented 7 years ago

same issu

chriszrc commented 7 years ago

Hi, ok, I had the same problem and the tutorial is wrong in one place. With the latest version of the angular cli, you no longer have to include the <link rel="stylesheet"...> in the index.html file. The cli will inject the contents automatically. So remove that line from the index.html and all should work. The files that get injected are specified in the .angular-cli.json file, and this works because the styles.css is already preconfigured there for you-

ref - https://github.com/angular/angular-cli/wiki/stories-global-styles

johnpapa commented 7 years ago

closing since this was rewritten with the CLI

jofftiquez commented 7 years ago

@chriszrc lol

parthasarathysarathy commented 7 years ago

122

125

Sachin124 commented 7 years ago

Okay Recently I fetched this problem I have very simple solution for solve this Issue , follow these steps: go to these directories src-> app-> index.html open the index.html and find <base href="your app name ">change this to <base href="/">

siddharthasharma1986 commented 5 years ago

Hey , I have once query here. If we use # in place of "/". it is not able to find css. I am using scss.