Flatten glob "assets" to one output folder

[Nkmol]

🚀 Feature request

- [ ] new
- [x] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Description

I am currently working with nested assets folder per entity map. Currently, I am using the following assets export settings:

              {
                "glob": "**/assets/**/*",
                "input": "src/app",
                "output": "/assets",
                "ignore": ["**/*.ts"]
              }

Imagine having the following file structure:

src
├── app
|   ├── module-folder
|   |   ├── assets
|   |   │   ├── images
|   |   │   │   └── image1.png
|   ├──other-module-folder
|   |   ├── assets
|   |   │   ├── images
|   |   │   │   └── image2.png

What I get

This would result in the following dist/ file structure:

dir
├── assets
|   ├── module-folder
|   |   ├── assets
|   |   │   ├── images
|   |   │   │   └── image1.png
|   ├──other-module-folder
|   |   ├── assets
|   |   │   ├── images
|   |   │   │   └── image2.png

What I want to have

dir
├── assets
|   ├── image1.png
|   └── image2.png

What I have tried

I have tried to use a custom script to move the assets files manually in a flatten way to the dir folder.

for file in ./src/app/**/assets/**/*.*; do cp "$file" "./dist/assets/$(basename -- "$file")" ;done

This, however, does not work in combination with ng serve as the files are in-memory, and also does not work with the ng build --watch as I am unsure how to activate script after it has been built.

---

I would love to get some insight into the best approach. Maybe this is simply using an already existing flow. From my point of view, this should be included as functionality, as the nested folder structure strategy seems to be one of the more common approaches.

[alan-agius4]

Hi, thanks for reporting this.

Thinking about this more flattening the assets output is dangerous as this might cause file collisions since non of the assets files gets fingerprinted and a file with the same name can exist in a different nested folder.

[xoneill]

It would be nice to add this as an option, similar to CopyWebpackPlugin

[mario-d-s]

@alan-agius4 You're right that file collisions can be an issue but printing a warning to the console on build might be enough. In the end it's the developer's responsibility; if we are specifying we want all files in one folder, we couldn't have duplicate file names even if we were using any other build tool.

[Eraldo]

Django (python web framework) also does this and takes care of the collision via teaching the users a naming convention.

E.g.:

module1/assets/module1/images/image1.jpg
module2/assets/module2/images/image1.jpg

By adding a subfolder with the same name as the nested module, there should be no collisions.
In case of doubt it uses the first one it found. (Could also be the last one in case of glob)

I also would prefer using module local assets for some modules. It matches the whole lazy loading isolated module structure idea, is what I think.

[suiyun39]

The problem is that so far the cli cannot handle references to src in html.
Some very common requirements, such as: hash filename, add cdn host. cannot be implemented

[suiyun39]

I think cli should learn vue cli in this regard. If the file is in a specific folder, only copy it.
If the file is referenced by html or css, use webpack loader to convert it to require. next to other loader.

[suiyun39]

I have observed that html references are not processed at all, I think this is a design error

[Iworb]

Any updates on this feature?

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.