CODEWITHSUNDEEP
angulardeploymentangular-cli
Mason Matlock
Mason Matlock

Reputation: 65

Serving non-JS static files on local build (ng serve)

I am working on an Angular 5 project that is utilizing a couple of non-NPM external projects, currently merging their examples/demos into our in-progress Angular application. Included in these demos are static media files such as .pngs, .wavs, etc. I have put these assets in a dir structure as follows:

src -> assets -> ext_app -> media/
src -> assets -> ext_app -> <'loose' app js files>
src -> assets -> ext_app -> appfactory/
src -> assets -> ext_app -> ext_dependencies/ -> dep1 -> <many folders>
src -> assets -> ext_app -> ext_dependencies/ -> dep2 -> <many folders>

When running ng build, the dist/ directory contains the assets folder in their entirety. However, when running ng serve, none of the non-JS files can be found, and looking in the "sources" tab on Chrome dev tools (or Debugger in Firefox Dev Edition) only shows the .js files and the directories that contain .js files, all the way through every nested folder within the assets directory. All other file types and directories containing other file types seem to have been stripped out, or not served to the browser.

My .angular-cli.json has the assets like I have seen recommended:

"assets": [
    "assets",
    "favicon.ico"
],

which should handle all nested folders according to what I've seen. Does anyone know what I am missing in my setup?

Upvotes: 1

Views: 3355

Answers (1)

VivaLaPanda
VivaLaPanda

Reputation: 838

Are you linking to the resources properly? Chrome Devtools can only see resources that are fetched somewhere in your code, so if you formatted the links improperly they won't show up.

Static assets should by accessed like:

Folder: src/assets/images/an-image.jpg

URL: /assets/images/an-image.jpg

Upvotes: 3

Related Questions