1

I have been looking at every question related to this error but have yet to find a solution. I am using Angular(4) with angular-cli. I am running ng serve to run my application but I continue to see this error in my browser when loading my startup/index page:

Here's a screenshot from my browser

After seeing this error, my css is actually working as expected, but I suppose the app is not recognizing that and is failing to compile. From what I understand, angular is not interpreting the reference to the css in my component correctly, but I have no idea why this is happening. Can anyone help/explain to me what this error is really saying and why it is occuring? Below is some helpful code in my project:

HomeComponent:

import { Directive, HostListener, Component } from '@angular/core';
import * as $ from 'jquery';

@Component({
    selector: 'home',
    templateUrl: '../../../assets/build/index.html',
    styleUrls: ['../../../styles.css']
})
export class HomeComponent{
    title = 'Home';
}

angular-cli.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
  "name": "anexinet.cxp.web"
 },
 "apps": [
   {
     "root": "src",
     "outDir": "dist",
     "assets": [
       "assets",
       "favicon.ico"
     ],
     "index": "./assets/build/index.html",
     "main": "main.ts",
     "polyfills": "polyfills.ts",
     "test": "test.ts",
     "tsconfig": "tsconfig.app.json",
     "testTsconfig": "tsconfig.spec.json",
        "prefix": "app",
     "styles": [
       "styles.css"
     ],
     "scripts": [
       "./assets/build/js/vendor/jquery-1.11.2.min.js",
       "./assets/build/js/plugins.js",
       "./assets/build/js/vendor/modernizr-2.8.3.min.js",
       "./assets/build/js/main.js"
     ],
     "environmentSource": "environments/environment.ts",
     "environments": {
       "dev": "environments/environment.ts",
       "prod": "environments/environment.prod.ts"
     }
   }
 ],
 "e2e": {
      "protractor": {
        "config": "./protractor.conf.js"
      }
    },
    "lint": [
   {
     "project": "src/tsconfig.app.json",
     "exclude": "**/node_modules/**"
   },
   {
     "project": "src/tsconfig.spec.json",
     "exclude": "**/node_modules/**"
   },
   {
     "project": "e2e/tsconfig.e2e.json",
     "exclude": "**/node_modules/**"
   }
 ],
 "test": {
   "karma": {
     "config": "./karma.conf.js"
   }
 },
 "defaults": {
   "styleExt": "css",
   "class": {
     "spec": false
   },
   "component": {}
 }
}

EDIT

App Component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['../styles.css']
})
export class AppComponent {
  title = 'app';
}

styles.css:

/* You can add global styles to this file, and also import other style files */
@import url('./assets/build/css/main.css');

My main.css is a pretty long file and probably isn't needed unless some would find that helpful.

4
  • Is that your only component? Commented Oct 31, 2017 at 15:16
  • No, I didn't want to overload the page with unneeded code, I can add my app component as well Commented Oct 31, 2017 at 15:18
  • Well the one that's the problem is likely to be the one with a styles value defined in the component decorator, no? Commented Oct 31, 2017 at 15:18
  • That is my assumption, but no matter what I change in the decorator seems to affect the error :( Commented Oct 31, 2017 at 15:21

1 Answer 1

2

As I see, you have included styles.css in multiple places. Since you have referenced that file globally in .angular-cli.json, you don't need to duplicate it in individual components.

Try to comment out styleUrls: ['../../../styles.css'] and styleUrls: ['../styles.css'] in your HomeComponent and AppComponent. Or reference different files.

Sign up to request clarification or add additional context in comments.

1 Comment

Wow, I feel so silly for such a simple solution. Thank you so much!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.