feat(@angular/build): support import attribute based loader configuration#28040
Merged
Merged
Conversation
JoostK
reviewed
Jul 12, 2024
clydin
force-pushed
the
application/loader-import-attribute
branch
from
6303751 to
1d15d22
Compare
…tion When using the application builder, a `loader` import attribute is now available for use with import statements and expressions. The presence of the import attribute takes precedence over all other loading behavior including JS/TS and any `loader` build option values. This allows per file control over loading behavior. For general loading for all files of an otherwise unsupported file type, the `loader` build option is recommended. For the import attribute, the following loader values are supported: * `text` - inlines the content as a string * `binary` - inlines the content as a Uint8Array * `file` - emits the file and provides the runtime location of the file Unfortunately, at this time, TypeScript does not support type definitions that are based on import attribute values. The use of `@ts-expect-error` or the use of individual type definition files (assuming the file is only imported with the same loader attribute) is currently required. Additionally, the TypeScript `module` option must be set to `esnext` to allow TypeScript to successfully build the application code. As an example, an SVG file can be imported as text via: ``` // @ts-expect-error TypeScript cannot provide types based on attributes yet import contents from './some-file.svg' with { loader: 'text' }; ``` When using the development server and a file that is referenced from a Node.js package with a loader attribute, the package must be excluded from prebundling via the development server `prebundle` option. This does not apply to relative file references.
clydin
force-pushed
the
application/loader-import-attribute
branch
from
1d15d22 to
3272ebb
Compare
clydin
added
the
action: review
alan-agius4
approved these changes
Jul 15, 2024
alan-agius4
added
action: merge
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
When using the
applicationbuilder, aloaderimport attribute is now available for use with import statements and expressions. The presence of the import attribute takes precedence over all other loading behavior including JS/TS and anyloaderbuild option values. This allows per file control over loading behavior. For general loading for all files of an otherwise unsupported file type, theloaderbuild option is recommended.For the import attribute, the following loader values are supported:
text- inlines the content as a stringbinary- inlines the content as a Uint8Arrayfile- emits the file and provides the runtime location of the fileUnfortunately, at this time, TypeScript does not support type definitions that are based on import attribute values. The use of
@ts-expect-erroror the use of individual type definition files (assuming the file is only imported with the same loader attribute) is currently required.Additionally, the TypeScript
moduleoption must be set toesnextto allow TypeScript to successfully build the application code.As an example, an SVG file can be imported as text via:
When using the development server and a file that is referenced from a Node.js package with a loader attribute, the package must be excluded from prebundling via the development server
prebundleoption. This does not apply to relative file references.This feature provides the bundling aspects of #26575. TypeScript type definition support would provide the full feature set for that issue but is currently blocked on TypeScript upstream.