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>
  <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="//" rel="stylesheet" type="text/css">
  <link target="_blank" rel="nofollow" href="//|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="//">


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!