Angular 4 Local CSS File Gives 404 Error

I have the following in my head element of my index.html in my Angular 4 App:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Plant Simulator</title>
  <base target="_blank" rel="nofollow" href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link target="_blank" rel="nofollow" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
  <link target="_blank" rel="nofollow" href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
  <!-- link rel="stylesheet" target="_blank" rel="nofollow" href="styles.css" type="text/css" -->
  <link rel="stylesheet" target="_blank" rel="nofollow" href="//demo.productionready.io/main.css">

</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>

If I use the local path to the styles.css file, I can see from my browser console that it always throws a 404 error saying styles.css is not found as shown in the screenshot below:

Any ideas as to why is this? It works fine if I load the css from the CDN, but I want to have it rendered locally!