Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(@angular-devkit/build-angular): allow customization of output locations #26675

Merged
merged 1 commit into from
Dec 14, 2023

Conversation

alan-agius4
Copy link
Collaborator

@alan-agius4 alan-agius4 commented Dec 14, 2023

This update introduces the ability for users to define the locations for storing media, browser, and server files.

You can achieve this by utilizing the extended outputPath option.

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": {
              "base": "dist/my-app",
              "browser": "",
              "server": "node-server",
              "media": "resources"
            }
          }
        }
      }
    }
  }
}

While not recommended, choosing to set the browser option empty will result in files being output directly under the specified base path. It's important to note that this action will generate certain files like stats.json and prerendered-routes.json that aren't intended for deployment in this directory.

Validation rules:

  • browser and server are relative to the configuration set in the base option.
  • When SSR is enabled, browser cannot be set to an empty string, and cannot be the same as server.
  • media is relative to the value specified in the browser option.
  • media cannot be set to an empty string.
  • browser, media, or server cannot contain slashes.

Closes: #26632 and closes: #26057

@alan-agius4 alan-agius4 added the target: minor This PR is targeted for the next minor release label Dec 14, 2023
@angular-robot angular-robot bot added the detected: feature PR contains a feature commit label Dec 14, 2023
@alan-agius4 alan-agius4 force-pushed the output-path-customize branch 15 times, most recently from 63f6d96 to a7ec2e5 Compare December 14, 2023 14:44
@alan-agius4 alan-agius4 marked this pull request as ready for review December 14, 2023 15:03
@alan-agius4 alan-agius4 added the action: review The PR is still awaiting reviews from at least one requested reviewer label Dec 14, 2023
@JoostK
Copy link
Member

JoostK commented Dec 14, 2023

Should there be a check that browser and server are not the same?

@alan-agius4
Copy link
Collaborator Author

@JoostK, good call out! Updated.

@alan-agius4 alan-agius4 force-pushed the output-path-customize branch 3 times, most recently from 7848eff to 2b47a8c Compare December 14, 2023 18:52
…cations

This update introduces the ability for users to define the locations for storing `media`, `browser`, and `server` files.

You can achieve this by utilizing the extended `outputPath` option.
```json
{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": {
              "base": "dist/my-app",
              "browser": "",
              "server": "node-server",
              "media": "resources"
            }
          }
        }
      }
    }
  }
}
```

While not recommended, choosing to set the `browser` option empty will result in files being output directly under the specified `base` path. It's important to note that this action will generate certain files like `stats.json` and `prerendered-routes.json` that aren't intended for deployment in this directory.

**Validation rules:**
- `browser` and `server` are relative to the configuration set in the `base` option.
- When SSR is enabled, `browser` cannot be set to an empty string, and cannot be the same as `server`.
- `media` is relative to the value specified in the `browser` option.
- `media` cannot be set to an empty string.
- `browser`, `media`, or `server` cannot contain slashes.

Closes: angular#26632 and closes: angular#26057
@alan-agius4 alan-agius4 added action: merge The PR is ready for merge by the caretaker and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Dec 14, 2023
@alan-agius4 alan-agius4 merged commit cc246d5 into angular:main Dec 14, 2023
33 checks passed
@alan-agius4 alan-agius4 deleted the output-path-customize branch December 14, 2023 22:50
@e-oz
Copy link

e-oz commented Dec 14, 2023

Why “media” can not be an empty string? I just want the “assets” folder to be copied into the “assets” folder, what is so wrong with that? It was working for 16 versions and now it is wrong?

@alan-agius4
Copy link
Collaborator Author

@e-oz, assets and media are two unrelated features.

  • assets, configured via the assets option, consist of files untouched by the build system; they are simply copied as they are.
  • media are files processed by the build system, commonly referenced in CSS files, like background images and font files.

@e-oz
Copy link

e-oz commented Dec 15, 2023

@alan-agius4 that might be true until we reference files from assets in our CSS files. I understand that some people want cache busting for such files, but I don't understand why it's not allowed to opt out.

Anyway, thank you for implementing this, it is much better now ❤️

@alan-agius4
Copy link
Collaborator Author

alan-agius4 commented Dec 15, 2023

Referencing assets in CSS will result in duplicate emissions — one in the designated assets directory and another in media or the root, with the webpack-based builder.

For proper processing by the build system relative referenced resources in CSS, it's advisable not to store these assets directly in the "assets" directory. Consider reorganising their placement to avoid such duplication.

A good rule of thumb is that if a file is referenced relatively in a CSS is not to placed it in assets directory.

alan-agius4 added a commit to alan-agius4/angular-cli that referenced this pull request Dec 15, 2023
…on schematics to work with new `outputPath`

In angular#26675 we introduced a long-form variant of `outputPath`, this commit updates the application builder migration and ssr schematics to handle this change.
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this pull request Dec 15, 2023
…on schematics to work with new `outputPath`

In angular#26675 we introduced a long-form variant of `outputPath`, this commit updates the application builder migration and ssr schematics to handle this change.
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this pull request Dec 15, 2023
…on schematics to work with new `outputPath`

In angular#26675 we introduced a long-form variant of `outputPath`, this commit updates the application builder migration and ssr schematics to handle this change.
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this pull request Dec 18, 2023
…on schematics to work with new `outputPath`

In angular#26675 we introduced a long-form variant of `outputPath`, this commit updates the application builder migration and ssr schematics to handle this change.
alan-agius4 added a commit that referenced this pull request Dec 19, 2023
…on schematics to work with new `outputPath`

In #26675 we introduced a long-form variant of `outputPath`, this commit updates the application builder migration and ssr schematics to handle this change.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jan 15, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker detected: feature PR contains a feature commit target: minor This PR is targeted for the next minor release
Projects
None yet
4 participants