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": {}
}
}
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.
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.