Angular中能否在manifest.json引用外部路径的共享图标？

Absolutely! You can totally share the external assets_outside directory's icons between your project1 and project2, and yes, you will need to modify the angular.json files for both projects to make this setup work smoothly. Let’s walk through exactly what to do:

1. Update angular.json to Include the External Assets Directory #

For each project, you need to tell Angular to include the external assets_outside directory as part of its build/serve process. Since assets_outside sits at the same level as both project1 and project2, use a relative path to reference it.

Open the angular.json file for project1, find the assets array under projects -> project1 -> architect -> build -> options, and add the external directory path:

"assets": [
  "src/favicon.ico",
  "src/assets",
  "../assets_outside" // Add this line to include the external assets
]

Do the same for project2's angular.json file—add ../assets_outside to its assets array as well.

This tells Angular to either copy the contents of assets_outside into the build output (when running ng build) or serve it directly in development mode (when running ng serve).

2. Update Icon Paths in manifest.json #

Next, fix the icon references in each project's manifest.json to point to the shared assets instead of their local assets directory.

Replace the existing src value in the icons array with the path to the shared icon:

"icons":[
  {
    "src":"assets_outside/apple-touch-icon-144x144.png", // Updated path to external asset
    "sizes":"144x144",
    "type":"image/png" // Quick note: you had a typo here ("pmg")—fix this to "png"
  },
  // Repeat for other shared icons as needed
]

Make this change in both project1 and project2's manifest.json files.

3. Update Icon Links in index.html #

Finally, update the link tag in each project's index.html to reference the shared icon:

<link href="assets_outside/apple-touch-icon-144x144.png" rel="apple-touch-icon" sizes="144x144">

Again, apply this change to both projects.

4. Verify the Setup #

• Run ng serve for either project and check if the icons load correctly (you can inspect the page to confirm the path resolves properly).
• Run ng build and check the dist directory—you should see an assets_outside folder with the shared icons inside it.

Key Notes #

• Double-check the relative path in angular.json: if your directory structure changes later, you’ll need to adjust this path to match.
• Ensure the assets_outside directory has proper read permissions so Angular can access its files during build/serve.

内容的提问来源于stack exchange，提问作者Puddlejumper26