angular / angular/angular-cli

Flatten glob "assets" to one output folder

Open
#14,158 11 comments 9 reactions 0 assignees View on GitHub
area: @angular-devkit/build-angular feature feature: insufficient votes
Dominant language
TypeScript
Stars
27k
Forks
11.8k
Avg merge
14h 23m
Merged PRs (30d)
162

Description

# πŸš€ 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:

```json
{
"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.

```sh
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.

Contributor guide

Open the contributing guide

Research direction

Start with the asset export configuration and compare how ng serve, ng build --watch, and a regular build process the shown glob. The change is done when nested assets can be emitted directly under dist/assets without the intermediate module and assets folders, while remaining available to the in-memory serve workflow.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
build-system, cli
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.