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

fix(@angular-devkit/build-angular): use a dash in bundle names #25877

Merged
merged 1 commit into from
Sep 21, 2023

Conversation

cexbrayat
Copy link
Member

PR Checklist

Please check to confirm your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • Other... Please describe:

What is the current behavior?

The files generated by the esbuild-based builder are named main.xxx.js, polyfills.xxx.js but the chunks are named chunk-xxx.js

What is the new behavior?

This updates the esbuild-based builder to use a dash in bundles and media instead of a dot to be consistent with the chunks files chunk-xxx.js.

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

@cexbrayat
Copy link
Member Author

I'm missing something in the PR, but I can't figure out what as I don't know these parts well enough... Do you have an insight?

// The first part of the filename is the name of file (e.g., "polyfills" for "polyfills.7S5G3MDY.js")
const name = basename(relativeFilePath).split('.', 1)[0];
// The first part of the filename is the name of file (e.g., "polyfills" for "polyfills-7S5G3MDY.js")
const name = basename(relativeFilePath).split('-', 1)[0];
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line is causing the problem as the extension is no longer removed. Also in the case using slice can cause problems for entrypoints name with a dashed Example material-styles.css. I propose to you a regexp.

Suggested change
const name = basename(relativeFilePath).split('-', 1)[0];
const name = basename(relativeFilePath).replace(/(?:-[\dA-Z]{8})?\.[a-z]{2,3}$/, '');

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks Alan, let's try that

@cexbrayat cexbrayat force-pushed the fix/bundle-names branch 2 times, most recently from 7b6360c to 00acb46 Compare September 21, 2023 07:45
This updates the esbuild based builder to use a dash in bundles and media instead of a dot to be consistent with the chunks files `chunk-xxx.js`.
@cexbrayat
Copy link
Member Author

I had to change a few tests, but CI is now green. Thanks for the help @alan-agius4

@alan-agius4 alan-agius4 added the target: major This PR is targeted for the next major release label Sep 21, 2023
Copy link
Collaborator

@alan-agius4 alan-agius4 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Thanks for this.

@alan-agius4 alan-agius4 added the action: merge The PR is ready for merge by the caretaker label Sep 21, 2023
@alan-agius4 alan-agius4 merged commit 4e89c3c into angular:main Sep 21, 2023
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this pull request Sep 22, 2023
…e name

This update the regexp to account for the change in angular#25877
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this pull request Sep 22, 2023
…e name

This update the regexp to account for the change in angular#25877 A filename that has the hash included will be `main.[hash]` in Webpack and `main-[hash]` when using esbuild.
alan-agius4 added a commit that referenced this pull request Sep 22, 2023
…e name

This update the regexp to account for the change in #25877 A filename that has the hash included will be `main.[hash]` in Webpack and `main-[hash]` when using esbuild.
@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 Oct 22, 2023
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 target: major This PR is targeted for the next major release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants