0

I have a folder structure that looks like the one depicted below

root
 |- angular_app
 |- middleware_app (holds external scripts loaded into angular)
 |- assets
      |- images
      |- fonts
      |- ...

The Issue

I am loading the scripts through the .angular-cli.json scripts array. They are loading and running fine except for one small detail. These scripts are using images inside the assets folder, so whenever they attempt to grab that image, I get a 404 in my console because the path of that image is no longer correct.

The scripts are attempting to access the images through relative paths like so:

const ASSET_IMAGE_1_URL = '/images/asset_image_1.svg'

This above syntax has to remain constant due to other app's dependency on scripts.

Solution?

If I can load those external assets into my angular application like I do with the scripts, and maintain that folder structure, that is fantastic. If that is possible to do, can someone please walk me through it. Thanks!

Side Notes

Q. Why not just add the external assets to your assets folder inside your angular app?

A. Other applications are dependent on those external assets, as well as the scripts. Which means I cannot create a local copy of those assets in my angular assets folder and update the paths to said assets inside the external scripts.

Cody Bentson
  • 117
  • 2
  • 9

1 Answers1

0

You can load them in to your angular app just like you are loading the scripts using a node glob in your angular.json file. In angular.json modify your assets to look something like this (preserving any existing assets like the default favicon):

    "assets": [
      { "glob": "**/*", "input": "../assets/images", "output": "/images/" }
    ]

During build, that will copy ../assets/images to your relative /images/ path. See this angular CLI story for details.

Dean
  • 2,084
  • 17
  • 23