Angular CLI and NG Build breaking paths to css, photos, fonts, images and all

0
votes

When I use ng serve and run my webapp using the webpack angular-cli provides for just the front end dev environment everything renders perfectly but when I use ng build or ng build --prod and ran it using an express server and back end it didn't load any images, css or javascript, just the raw html from the angular app. I searched around and found angular-cli.json and added my img folder, fonts folder, css folder into assets and all js files into the scripts array and css files into the styles array but now it wont even build because all the paths are broken.

Its giving me two pages of red text in my console telling me images, fonts and other files cant be resolved. Clearly it has changed around the relative pathing and broken everything horribly, how do I fix this on build without having to hardcode path changes?

1
angularangular-cli
could you capture your console and network tab – Tiep Phan
just use ./ path to your images for example if your background is ../../../bg.png than use ./bg.png – Yoav Schniederman
hm my console is 17603 characters of red text, kind of over the comment limit :P Ill get in some: ERROR in ./~/css-loader!./~/postcss-loader!./src/css/grayscale.min.css Module not found: Error: Can't resolve '../img/downloads-bg.jpg' in 'C:\Users\Sean\OneDrive\webpages\000\lasttry\src\css' @ ./~/css-loader!./~/postcss-loader!./src/css/grayscale.min.css 6:3750-3784 @ ./src/css/grayscale.min.css @ multi styles ERROR in ./~/css-loader!./~/postcss-loader!./src/bootstrap.min.css Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.eot' i – seanEd

1 Answers

2
votes

It seems that you are trying to load the site from a sub-directory. You should be able to resolve the errors by setting the base href="" tag in the head of index.html.

https://angular.io/docs/ts/latest/guide/deployment.html#!#dev-deploy

<html>
 <head>
  <base href="file:///C:/Users/Sean/OneDrive/webpages/000/lasttry/">
 </head>
 <body>
  <app-root>Loading...</app-root>
 </body>
</html>

...assuming that index.html is located in C:/Users/Sean/OneDrive/webpages/000/lasttry/

Please note that this will only fix the broken links when the path to index.html is being accessed by the URL:

file:///C:/Users/Sean/OneDrive/webpages/000/lasttry/index.html