angular project -> apache - css file not in /dist

Question

First, I've "solved" this by editing the index.html and manually copying the appropriate file over. But the way angular/node seems to work is really confusing to me, so I'm asking this to determine if I did something wrong or if there is something else going on.

Anyway, I have this cheesy webstore project (yes, taking a class) and I want to put it on my Apache2 webserver.

When I issue the ng build --prod command, in the resulting ./dist directory, the index.html file that is generated references

<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>

which certainly does exist in my project directory - BUT the node_modules directory and dist directory are on the same level (ie, both subdirectories of .../ProjectName). App looks great running on localhost via ng serve when doing development.

So... the question.

Am I missing something in how I've added bootstrap to my dependencies? The reference to it appears to be the same as all the other dependencies which are being included and give me working functionality.

Am I build-ing the project wrong? I get no error output...

Suggestions please? Thanks!

Per request in comments, my .../src/index.html

And yes, I can see where my reference is in the index.
So how do I reference this file so that everything needed ends up in my .../ProjectName/dist folder when I ng build --prod ?

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Ivan's Stuff for Sale</title>
        <base href="/">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" /> 
    </head>
    <body class="m-a-1">
    <app></app>
</body>
</html>

And my ProjectName/.angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "ivan-store"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "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",
    "component": {}
  }
}

https://github.com/angular/angular-cli/wiki/stories-include-bootstrap — JB Nizet, Mar 30 '18 at 15:33
@JBNizet - was indeed missing from my `.angular-cli.json` file, but after adding it and re-running my `ng build --prod` the reference is still the same and the files are not included in the `..../dist/` directory — ivanivan, Mar 30 '18 at 15:44
These instructions are correct. You're doing something wrong. Post your index.html (the one in your sources, not the generated one), and post your .angular-cli.json file. — JB Nizet, Mar 30 '18 at 15:47
@JBNizet - egg on my face (kinda) - my `.../src/index.html` does indeed contain that full path. What would be the correct reference so that everything ends up in the `.../dist` directory? Edit coming in a moment wtih the contents of the files — ivanivan, Mar 30 '18 at 16:01
Remove that styles tag from your index.html source. Angular should be adding its own styles tag on compile. — Jarrett Helton, Mar 30 '18 at 18:49

Jarrett Helton · Answer 1 · 2018-03-30T18:45:56.123

Since you are using the angular cli to compile your project, you will want to add your static files to the cli configuration. There is an array to put in your style paths to compile your CSS.

Example of my .angular-cli.json. Notice the styles array. The same can be done for javascript files.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "demo"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css",
        "../node_modules/materialize-css/dist/css/materialize.min.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/materialize-css/dist/js/materialize.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "staging": "environments/environment.staging.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",
    "component": {}
  }
}

When the angular CLI compiles the imported styles, they should be (they are for me) compiled into a single styles bundle, which is injected into the index.html that its built. The styles tag that imports styles.a51a871499d3e6357e92.bundle.css is not in my "non-built" version of index.html. The angular compiler added that. The only stylesheets I am loading manually are CDNs.

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- Begin MailChimp Signup Form -->
  <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/agate.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/ace/1.2.8/ace.js"></script>
  <script src="https://cdn.bootcss.com/marked/0.3.6/marked.min.js"></script>
  <script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
  <meta charset="UTF-8">
  <base href="/">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="icon" type="image/x-icon" href="assets/imgs/logo-icon.png">
  <link href="styles.a51a871499d3e6357e92.bundle.css" rel="stylesheet"/>
</head>
<body>
<prehab-root></prehab-root>
<script type="text/javascript" src="inline.c27adf0de88b28299fdd.bundle.js"></script>
<script type="text/javascript" src="polyfills.6233469b59ce155cca70.bundle.js"></script>
<script type="text/javascript" src="scripts.8432b1e713993574ef2a.bundle.js"></script>
<script type="text/javascript" src="main.888a683b4d8b8b9b8553.bundle.js"></script>
</body>
</html>

I've added that to my styles but the file reference in my ../src/index.html has the full (wrong) path, so I've found it. But, with the file referenced in the styles array shouldn't it be copied to the ..../dist directory? — ivanivan, Mar 30 '18 at 16:00

angular project -> apache - css file not in /dist

1 Answers1