The VSCode extension looks for `@angular/language-service/package.json`
using `require`. This currently breaks as of the ESM changes because
we introduced the `exports` field but did not expose the `package.json`.
This commit fixes it.
Co-authored-By: Andrew Scott <atscott@google.com>
Co-authored-By: Dylan Hunn <dylhunn@gmail.com>
PR Close#48678
Fixes a deprecation warning that was being logged by compiler when generating aliases, because we weren't going through `ts.factory` to create an AST node.
PR Close#48652
Similar to the Saucelabs job, the jasmine default timeout can be
increased to avoid the common jasmine timeouts. We cannot control
how fast Selenium e.g. loads a page or not.
PR Close#48671
Prior to this change the universal example was broken as the example type was not retrieved correctly in bazel which caused the `_renameFile` method to be called with incorrect context.
Closes#48664
PR Close#48665
This commit prepares the code of the `BrowserTestingModule` to include the `MockPlatformLocation` by deafult in the future. With this change, the set of providers to add the `MockPlatformLocation` would be disabled by a flag, which will be switched in v16.
PR Close#48651
There is a small typo in integration/check-dependencies.js.
Should read `ensure` rather than `esnure`.
Signed-off-by: Tim Gates <tim.gates@iress.com>
PR Close#48588
This is no longer needed in google3 and actively impedes prodmode tests. See http://b/254054103#comment7 for deeper analysis.
This just turns off the transform for now, if it lands successfully I'll follow up with deleting the flag and dead code altogether.
PR Close#47934
The `/api` entry-point was accidentally dropped when we switched the
compilation in the repo to full ESM- thinking the entry-point is not
needed externally.
We re-add it because the VSCode repo extension relies on it for checking
whether `ts.LanguageService` is an Angular one.
PR Close#48670
Following #24008, the schematics don't produce ngOnInit and the constructor. Let's reflect that in the Tour of Heroes tutorial.
Fixes#48575
PR Close#48576
* removing guard as console.warn is now widely supported
* Couldn't remove non-null assertion, waiting for TS support of getters with different types (microsoft/typescript#43662)
PR Close#48476
It looks like the wrapping in `&> /dev/null` breaks for some reason.
We don't need it as CircleCI will remove secrets from logs if they
would leak for some reason.
A simple echo is very unlikely ever printing its content to
stdout/stderr though.
PR Close#48648
Instead of encoding the GitHub snapshot robot access token
in a file that needs to be decoded by an ambiguously named
secret called `KEY`, the token can be directly stored in the
secrets of CircleCI given easier maintenance and the same risk.
The leakage of the secret still means the GitHub token file could
be decoded.
We are switching to a similar model as in the components repo, which
also simplifies key rotations etc.
PR Close#48644
The attachDebugGetter function is only used in the i18n specific code
so could be moved closer to the sole usage site instead of being
exported to the entire framework code. It also lets us remove the
entire packages/core/src/render3/util/debug_utils.ts file.
PR Close#48549
There is no need to parse clientWidth/clientHeight/naturalWidth/naturalHeight on HTMLImageElement as there is no sign of other types being returned on everygreen browers.
PR Close#48527
This commits add a triple slash type reference to the `main.ts` of the project when running `ng add @angular/localize`. This is purely needed for IDE purposes so that `$localize` is available globally. For the compilations `@angular/localize` types are adding the the respective TS configs files.
This commits also add better support for using `@angular/localize` in `/// <reference types="@angular/localize" />`. To support this we need to move the global definition outside of a barrel file and into the index.ts file. Without this change the `$localize` method will not available globally when using triple slash type references.
Closes#48434
PR Close#48502
- update `errors.ts` to annotate the error NG0403, so that the runtime can add a link to that guide when an error is thrown
- update `application_ref_spec.ts` to include the new link of the error
- update `errors.md` as a result of running `yarn bazel test packages/core/test`
Fixes#47985
PR Close#48483
Removes unused dependencies introduced back when the devtools
were moved into the framework repo.
Most of these deps were added when the Bazel http-server from
the components repo was copied here
PR Close#48641
Similar to how the `@babel/core` dependency is managed for the localize
NPM package, the version should be locked. Also the version should
correspond to the version we install for building & testing.
Currently the Babel version allowed by the compiler-cli may not
work given the ESM -> CJS interop. causing errors like:
```
import { types as t } from "@babel/core";
^^^^^
SyntaxError: Named export 'types' not found. The requested module '@babel/core' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from '@babel/core';
const { types: t } = pkg;
```
We can only be confident about the interop if we know the version
installed- is the one we test.
PR Close#48634
Prior to this change the FESM bundles have the license banner duplicated multiple of times in each published file.
With this change we remove all the banners from the individual input files. A new banner will be appended at the top of the FESM using rollup's banner option.
While there is a rollup plugin on NPM to strip these banners (https://github.com/mjeanroy/rollup-plugin-strip-banner) we could not use this as it does not support `.mjs`.
PR Close#48560
Prior to this change the FESM bundles for the FW packages have the license banner duplicated hundreds of times in each published file.
With this change we remove all the banners from the individual input files. A new banner will be appended at the top of the FESM using rollup's banner option.
While there is a rollup plugin on NPM to strip these banners (https://github.com/mjeanroy/rollup-plugin-strip-banner) we could not use this as it does not support `.mjs`.
PR Close#48560
Fix non-hermetic zipping of example zips by fixing the zip entry timestamps.
I also hardcoded stamp values in stable-status.txt and volatile-status.txt using the workspace status command for the aio_local_deps config to improve cache performance. The Bazel remote cache appears to not ignore volatile-status.txt when there are no other changes, unlike the local Bazel cache:
https://github.com/bazelbuild/bazel/issues/10075#issuecomment-546872111
PR Close#48579
Using 'always' as the stamp attribute caused stable-status.txt
to always be included as an input, which has different values on
different ci executors causing a cache miss.
We run the regular aio build without stamping on ci so only include
status files when stamping is explicitly enabled.
PR Close#48585
The Karma Saucelabs script for Bazel & Saucelabs relies on some CommonJS
specific features. This commit replaces it with an ESM-compatible
alternative so that it can execute because `nodejs_binary` requires ESM
files now.
PR Close#48573
With the recent ESM changes we also started generating Saucelabs
targets for `//devtools` (as part of an effort to avoid code
duplication). We should skip Saucelabs targets for this package
because we don't intend to run them on Saucelabs and this whole
setup needs some more work (and we shouldn't change unexpectedly).
PR Close#48554
The way the benchmarking code is used and wired up in g3 is rather
magical. This change makes it easier to sync into g3 by using
conditional blocks, and also consistnetly using a single bundle name
(like it was before— we regressed here as part of the ESM initial
changes- but now with clear comments, it's more future-proof..)
PR Close#48538
Fixes that we temporarily broke the Bazel npm package artifact as
part of the ESM work. This commit adjusts it and also makes the
artifact subsitutions more maintainable.
PR Close#48538
This will help making it easier to update patches when `node_modules`
are cached. Note that most of the time this shouldn't be necessary
as we only cache the Yarn `.cache` for the non-windows jobs. Windows
job caches `node_modules` directly- so could be affected and needs
a cache reset/wipe occasionally when patches change (even though it's
rarely). Long-term we can remove this when the esm patches are no longer
needed.
PR Close#48538
This is basically a pre-step for combining devmode and prodmode into a
single compilation. We are already achieving this now, and can claim
with confidence that we reduced possible actions by half. This is
especially important now that prodmode is used more often, but rules
potentially still using the devmode ESM sources. We can avoid double
compilations (which existed before the whole ESM migration too!).
We will measure this more when we have more concrete documentation
of the changes & a better planning document.
Changes:
* ts_library will no longer generate devmode `d.ts`. Definitions are
generated as part of prodmode. That way only prodmode can be exposed
via providers.
* applied the same to `ng_module`.
* updates migrations to bundle because *everything* using `ts_library`
is now ESM. This is actually also useful in the future if
schematics rely on e.g. the compiler.
* updates schematics for localize to also bundle. similar reason as
above.
PR Close#48538
* Switches all remaining targets (even if not tested and failing as per
build) away from `ts_devserver` to the canonical `http_server` from
dev-infra.
PR Close#48538
ZoneJS is no longer loaded as an UMD, but instead is included as part
of the browser init entry-point. This means that ZoneJS is bundled and
the ESBuild logic needs to be adjusted for that.
PR Close#48538
After discussion initiated in the framework team (by kkostadinov),
the team has decided to not keeping the `components-repo-unit-tests`
job. This commit removes it.
PR Close#48538
* The benchmark macro should also use devmode ESM 2020. No CommonJS
* The benchmark macro should always add `benchpress` as runtime
dependency because it is loaded asynchronously.
* The protractor `nodejs_binary` should use our ESM-interop binary
so that ESM resolution works (e.g. when `await import(benchpress)` from
the driver utilities is invoked).
PR Close#48538
* Switches away from the ESM-incompatible & unmaintained `ts_devserver`
to `http_server`. This is the canonical server maintained by dev-infra
* Switches tests away from CommonJS specific logic. e.g. require.resolve
* Adjusts tests to work with Protractor spec bundling (Protractor does
not support ESM execution, but we want to take ESM-written specs)
* Reworks playground and benchmarks to use `app_bundle` and `esbuild`
instead of loading hundreds of files individually. This also makes
tests more stable and more aligned with real applications.
PR Close#48538
* Updates circular dependency tests to use the `.mjs` outputs
* Switches away from CommonJS specific `require` calls.
* Simplifies the test helper logic since all browsers/NodeJS versions
support `URL` as a global.
PR Close#48538
The Angular Language Service package is now tested & compiled using ESM.
Previously it was a mismatch of CommonJS and ESM.
Still the language-service ESM output is transformed into a single UMD
bundle to allow for module resolution to be overriden. See
`bundles/BUILD`.
This is kept as is. To fully ship ESM (language-service is an exception
here), we need to:
* Update all code to no longer reference typescript via import. Instead
typescript needs to be passed around so that the extension can
control the version
* The VSCode extension/ the TS server needs to be able to load ESM. It
looks like the server supports ESM global plugins, but the extension
might not yet.
This is out of scope for the dev-infra effort as it requires more
insight into VSCode & the extension system & the TS language server.
PR Close#48538
* The Karma Bazel Saucelabs binary needs to use `.mjs` as everything in
the repo w/Bazel is supposed to be ESM.
* The symbol extractor test is updated to no longer use CommonJS
features like `require.resolve`.
PR Close#48538
* Switches all examples to use dev-infra's canonical ESM-compatible
`http_server`.
* Uses ESBuild for bundling ESM into a single file, compared to having
to load hundreds of individual ESM files in the browser (potential
source of flakiness & slowness).
PR Close#48538
Since the `defaults.bzl` repo-wide macros are now supporting ESM,
the special spec-bundle logic from `devtools` can be removed.
Also the esbuild configurations need to be updated to account
for the recent dev-infra build-tooling changes. Also properly
now ensures that `aysnc/await` is downleveled for ZoneJS compatibility.
PR Close#48538
* Updates build-tooling to benefit from the latest `spec_bundle`
improvements.
* Updates the ESM extension loader to not attempt adding extensions to
builtin `node:` specifiers. This seems to be disallowed and cannot be
handled gracefully (the attempts are part of a try/catch).
```
Use --sandbox_debug to see verbose messages from the sandbox
Error [ERR_UNKNOWN_BUILTIN_MODULE]: No such built-in module: node:fs.mjs
at new NodeError (node:internal/errors:371:5)
at ESMLoader.builtinStrategy (node:internal/modules/esm/translators:276:11)
at ESMLoader.moduleProvider (node:internal/modules/esm/loader:236:14)
```
PR Close#48538
Since the Bazel setup in this repo will now always use ESM,
the tooling scripts/binaries in AIO need to be switched to ESM
too. Most of the scripts are already ESM, but a few had to be converted.
Note that the Dgeni generation does not use ESM because it's unaffected
and the Dgeni CLI is used. In the future we could also update the Dgeni
setup to ESM but there is no need currently.
PR Close#48538
Even with patched resolution, we should always attempt the next/builtin
NodeJS resolution first. It may find a module if there `node_modules`
relative to the context file. This would be more correct than looking
for a module always at the Bazel `npm` repository `node_modules` folder.
PR Close#48538
ESBuild relies on the linker and we currently set up the ESM loader,
along with accidentally enabling the patched resolution loader. This
didn't cause any problems in sandbox, but outside of sandbox incorrect
ESBuild versions may be discovered because the loader looks at the
top-level `npm/` node modules before looking relative to e.g.
`@bazel/esbuild`
PR Close#48538
* Adjusts tests to no longer rely on CommonJS features. Switches them to
ESM
* Updates test initialization files to not double-initialize Jasmine now
that bootstrap files are loaded after Jasmine. The `jasmine.boot`
setup was hacky from `rules_nodejs` and will break in the future
regardless if we e.g. use `rules_js` with actual unmodified `jasmine`.
PR Close#48538
Tests now always run with ESM 2020, while previously they ran with
ES2015 CommonJS UMD bundles.
Since ZoneJS does not support intercepting native `async/await` syntax,
the forms test needs to use the zone-compatible variant of
`jasmine_node_tests`. This variant downlevels the native `async/await`
syntax to generators that ZoneJS can intercept. All of this is done
using the dev-infra ESBuild `spec_bundle` rule.
PR Close#48538
* Uses `.mjs` for circular deps tests
* Replaces `require` with ESM-equivalent. uses an import statement here
for proper typing, and specify dependency properly.
PR Close#48538
The `packages/localize` package still required some trickery
to support CommonJS because tests in the repo were running as CommonJS.
This commit removes the CommonJS logic in localize and its tests, so
that only ESM is used in production & tests.
PR Close#48538
Protractor does not support ESM, so we need to take all the ESM
output and bundle it into a CommonJS file. This comes at the cost
of not using actual ESM for execution, but the ESBuild bundle follows
strict ESM semantics so we can be sure it's compatible when we have
an ESM-compatible e2e test runner in the future.
PR Close#48538
There are two build targets which never had all its runtime dependencies
properly specified. This wasn't noticed because there were macros in
`defaults.bzl` that automatically included these deps.
In a follow-up we will clean-up this legacy auto-deps feature in
`defaults.bzl`.
PR Close#48538
The ESM js files need to be referenced, and the router tests rely
on `async/await` with change detection- so a special rule is required
that downlevels `async/await` to generators (similar to the Angular CLI)
PR Close#48538
Introduces a variant of `jasmine_node_test` that works with async/await
in combination with ZoneJS. This is needed for tests relying on
async/await in combinatin with change detection.
Browser tests are already benefting from ESbuild async-await
downleveling. Node tests would ideally not need this, but until
ZoneJS supports native async/await we need to also process
source files to avoid native async/await syntax.
PR Close#48538
* Switches to the canonical dev-infra http server
* Uses the bundle for serving.
* Switches app_bundle to simple `esbuild` since the test relies
on `ngDevMode` which `app_bundle` elides as optimization.
PR Close#48538
`platform-browser` tests now run in ESM and with `.mjs` output, so
the build targets and tests need to be updated.
Here we change the `zone_event_unpatched` script to include the
`.init` suffix that will be picked up by `spec_bundle`.
Also some circular dependency tests are updated to refer to the
`.mjs` files.
PR Close#48538
The bazel tests cannot use CommonJS features like `require` and should
be updated to work with ESM. Additionally some specs are updated to
no longer assert CJS/UMD output from `ng_module`. The rule only emits
ESM now.
PR Close#48538
The Angular CLI does not yet support schematics running as ESM. For
this reason we switch the schematics BUILD targets to explicitly
use ESM (as an exception in the repo).
PR Close#48538
Since Karma with Bazel does not support ESM natively, we bundle the
tests using ESBuild into a single AMD file. This not only solves the
ESM issue until we can run browser ESM tests natively (also pending
in the components repo - the esbuild generation follows ESM semantics
but since collapsed we don't rely on the real module system).
A benefit of bundling is also faster and more reliable Karma browser
tests since only a single file needs to be loaded- compared to hundreds
of individual files.
PR Close#48538
If tests are bundled using e.g. esbuild, the `ee` symbols may
be rewritten to `\u0275\u0275`. This breaks assertions that
rely on `Function.toString`. We can avoid this string comparison
and make it more future proof by just comparing the symbols directly.
PR Close#48538
Update dev-infra's build-tooling since multiple ESM changes have
landed there. e.g. not relying on `require.main === module` for API
bundling. This will allow us to also execute all dev-infra rules
in ESM because we plan on applying our ESM patching to `ts_library`
(which would also affect build-tooling then).
PR Close#48538
We use `bazel/esbuild` in various places (e.g. for app bundling tests).
These tests rely on the Angular Compiler-CLI itself for e.g. linking
or the Terser configuration. Since everything in this repo is now
strict ESM, the ESBuild configs (which are already ESM-supported)
need to import from `//packages/compiler-cli`. We also need to be
able to leverage our existing ESM Bazel loader for this though as
otherwise resolution would fail.
Long-term we can remove this if everything in the compiler-cli
would use `.mjs` extensions and the import paths would also specify
an explicit extension. See: https://nodejs.org/api/esm.html#mandatory-file-extensions
PR Close#48538
The ESM loader when used with patched Bazel module resolution
handled subpaths incorrectly. e.g.
`@bazel/concatjs/tsc_wrapped/internal/index.js` could be incorrectly
resolved to `@bazel/concatjs/index.js`.
This commit fixes the flawed logic. Also we prioritize the ESM attempts
before the original specifier. This is necessary because otherwise
the default Node resolution (using `require.resolve`) may incorrectly
prefer the `index.js` file over a `index.mjs` when a directory is
imported.
PR Close#48538
The `packages/core/test` test code was relying on non-ESM
compatible features like untyped `require` calls.
We switch these to ESM `import` statements/expressions and
make it strongly typed. It's a trade-off between type-safety
and the dependency graph- but it feels more reasonable typing
this properly to actually benefit from the type system provided
by using TypeScript.
Additionally, we align the IDE tsconfigs to use `esnext` as module
because that is what we use in Bazel and it allows us to use
top-level await.
PR Close#48538
Since we no properly initialize as part of the spec-entrypoint
the hacky logic starting Jasmine can be removed. The init
file now runs before tests run, but after Jasmine is initialized.
Calling `boot` while Jasmine is already initialized results in
tests executing in a different context and before other
initialization work completes.
PR Close#48538
Since we generate a `.mjs` file as entry-point for jasmine tests,
a couple of issues prevented the transitive dependencies from
bootstrap targets to be brought in (causing resolution errors):
1. The `_files` (previously `_esm2015`) targets are no longer needed,
and they also miss all the information on runfiles.
2. The aspect for computing linker mappings does not respect the
`bootstrap` attribute from the `spec_entrypoint` so we manually
add the extract ESM output targets (this rule works with the aspect
and forwards linker mappings).
PR Close#48538
RxJS currently ships ESM output that cannot be executed directly
in NodeJS. This is because RxJS ships ESM as `.js` files but does
not have a `package.json` which instructs Node to execute these as ESM.
RxJS would either need to use the explicit `.mjs` extension, or add
a `type: module` `package.json` next to the `.js` sources.
We manually patch RxJS to do this, while we wait on the upstream fix
to land. See: #7130.
PR Close#48538
The prodmode compilation pipeline -that we intend to use more heavily
now given it emitting files with the `.mjs` extension- exposes an
additional tsickle closure externs file. This file is empty most
of the time anyway since tsickle is not wired up.
We remove this generation as otherwise convenient `$(location` of
such ts library targets break because there always is more than 1 file.
PR Close#48538
Note: `--require` does not work for ESM. `--import` does not exist
in the current Node versions. Started being available in NodeJS v19.
A custom entry-point script, already supported by dev-infra, simplifies
the whole logic and solves the ESM case.
PR Close#48538
For every `ts_library` target we expose a shorthand that grants
access to the JS files because `DefaultInfo` of a ts library
only exposes the `.d.ts` files.
We rename this away from `es2015` since in practice it's a much
higher target these days. Additionally we no longer use the devmode
output but rather use the prodmode output which has the explicit
`.mjs` output- compatible with ESM.
PR Close#48538
We introduced a loader that supports ESM with Bazel. This loader can
only be enabled as part of our `nodejs_binary` defaults.bzl test. This
works fine, but there might be other binaries/tests e.g. from
`@angular/build-tooling` that should be able to use ESM & might need to
for importing the `compiler-cli`.
We move the logic for installing the patch into a `rules_nodejs` patch.
There is an existing one that is just updated to "enable ESM support".
PR Close#48538
This is necessary for e.g. JSON files from the CLDR data repository.
Otherwise these could not be added to the runfiles of the
binaries/tests.
PR Close#48538
For the ESM interop patches we expect to have two types
of patches:
* Patches for `node_modules`
* Patches for Bazel repositories.
We move the patches in respective folders to make it very clear
where a patch is used/applied to.
PR Close#48538
We modified the macros of `nodejs_binary/test` to have a rule
in between that requests the `.mjs` output. This works fine but
breaks make variable substitution for `templated_args` because
Bazel requires referenced labels to be part of the explicit `data`.
The rule in between breaks this, so we add a new argument that
can be used for such "template"/"args" data dependencies.
This can be removed when everything is ESM and we don't need
the rule in between.
PR Close#48538
The `nodejs_binary` rule already prioritizes the `.mjs` output as
of the recent commits. The `nodejs_test` rule should do the same,
and also set `use_esm = True`
PR Close#48538
The Bazel NodeJS rules will always use the `.js` files as entry-points.
Since we only rely on the `.mjs` output going-forward, we need to teach
`nodejs_binary` and `nodejs_test` to use the `.mjs` extensions if
intended.
Our `defaults.bzl` macros will set `use_esm = True`, but other targets
from e.g. external repositories should keep the original behavior.
PR Close#48538
The `__ESM_IMPORT_META_URL__` trick was used because we used both ESM
and CommonJS in this repo. It was an interop needed because
`import.meta.url` syntax couldn't be used as it woud have caused syntax
errors.
We still need to keep the CommonJS/ESM interop in the compiler-cli
because g3 relies on the compiler and uses CommonJS. This affects very
few places, just in the compiler- so this is acceptable.
PR Close#48538
The `generate-locales-tool` now needs to run as ESM because we changed
the `ts_library` rule. This commit accounts for the ESM syntax but
removing CJS code parts like `require.main === module`.
Also imports using `require` need to be changed to their ESM
equivalents.
PR Close#48538
Since this repo will now be strict ESM, and Angular Compiler packages
on NPM are also ESM-only, we can rework `ngc-wrapped` to remove
the CJS/ESM interop and we make it strict ESM too.
PR Close#48538
Replaces the existing ESM loader for dealing with external module
imports. This loader was introduced by Aspect for AIO `.mjs` scripts.
The loader will be used as foundation for a more extensive loader
that also properly handles first-party packages.
Additionally another loader is added, all packed as a single
loader because our current NodeJS version only supports a single
loader per node invocation. So we implement chaining ourselves.
The new loader will attempt rewriting `.js` extensions to `.mjs`,
also it will add `.mjs` if not already done. This is necessary
in the transition phase because we don't/cannot use explicit `.mts`
extensions and also we don't specify extensions in imports yet.
Long-term we would likely use `.mts` and explicit import extensions,
but it's not yet clear how we would sync this into g3 too.
PR Close#48538
This is in prearation for having a proper diff when this loader
is adjusted to support more situations than just simple external
node modules. See next commit.
Also the file is formatted to make the diff less verbose later.
The file was never formatted correctly and we don't lint `.mjs` files.
PR Close#48538
Currently the devmode output for `ng_module` and `ts_library` is
using ES5 CommonJS UMD. To bring it in sync with prodmode and
to start with our long-term migration to full ESM- the devmode
is updated to to ES2020 ES modules too.
This will require more tricks to make devmod work with the bazel
setup and also tests may need to be refactored given them relying
on ES5 CJS features, like for `spyOn` jasmine patching etc.
PR Close#48538
AIO e2e tests became more flaky recently. More investigation is needed to identify why,
but we mark the `//aio:e2e` as flaky for now to rerun those tests on CI if they fail.
PR Close#48498
This commit adds a swappable provider for an upcoming change to the
implementation of `Router#createUrlTree`. This will be a breaking change
and is planned to be included in V16.
PR Close#47988
It is not clear that when we provide a service to some eagerly loaded module of an application, then that service is available for components of all eagerly loaded modules of that application. It would be better to give a link for more information at least.
PR Close#47979
In the #48216 Material deps were updated to v15,
but the components and modules in DevTools were not
updated to MDC nor replaced with the legacy definitions.
PR Close#48420
fix the issue of camel-case properties not being handled correctly in
state transition causing them not to be applied to the element
resolves#48246
PR Close#48436
This commit accommodates the recent terminology preference change
from "application" to "app" when describing what an Angular
project produces. For now, using "application" is not a blocker, but
writers should be aware of the change in terminology.
PR Close#48456
With vale 2.21, the spell checker style stopped working.
This commit removes the spell checker from the list of styles to allow Vale to
be used, minus the spell checker, until the bug is resolved or a workaround
can be applied.
PR Close#48456
This commit prepares the documentation directories for future tutorials organized by directory.
Also, it moves the Angular Libraries topic from the Tutorials section to Developer Guides in TOC
PR Close#48162
TestBed.overrideProvider should include `multi` support in its type. The
underlying implementation already supports it, as documented by the
tests which are currently casting the override to `any` to get around
the bad type.
PR Close#48424
```ts
@NgModule({
imports: [RouterModule.forRoot([{path: '/enigma', component: EnigmaComponent}])],
providers: [{provide: APP_BASE_HREF, useValue: '/en'}]
})
export class AppModule {}
```
Navigating to `/enigma` will redirect to `/en/igma` not to `/en/enigma` as it expects
Fixes: #45744
PR Close#48394
Updates the angular.io landing page with new messaging
and new images. The Quick-start app has been updated
to demonstrate a minimalist Angular app and the value
proposition content has been updated.
PR Close#47047
There have been/are several bugs related to base href handling in
Angular (#45744, #48175, #19296).
These all stem from the attempted custom handling of base href
in the `Location` class. This logic does not really make an attempt
to be fully compliant with the spec.
PR Close#48422
These migrations can no longer run due to a single update version policy (IE: from 13 to 14, 14 to 15 etc..). Therefore these are redundant and can be deleted.
We also remove the `-beta` suffix from the version which is not needed as the Angular CLI will add the prerelease suffixes automatically.
PR Close#48414
Previously, this check looked like this: `/^(https?:)?\/\//.test(baseHref)`,
but that resulted in syntactically incorrect code after Closure Compiler minification.
This was likely caused by a bug in Closure Compiler, but for now, the check is rewritten
to use `new RegExp` instead.
PR Close#48406
For standalone components it may be beneficial to group multiple declarations
into a single array, that can then be imported all at once in `Component.imports`.
If this array is declared within a library, however, would the AOT compiler
need to extract the contents of the array from the declaration file. This
requires that the array is constructed using an `as const` cast, which results
in a readonly tuple declaration in the generated .d.ts file of the library:
```ts
export declare const DECLARATIONS: readonly [typeof StandaloneDir];
```
The partial evaluator logic did not support this syntax, so this pattern was
not functional when a library is involved. This commit adds the necessary
logic in the static interpreter to evaluate this type at compile time.
Closes#48089
PR Close#48091
Replace custom `flatten` and `map` with native `flatMap` usage.
Benchmark:
| Test case name | Result |
|---------------- |-------------------------------------------------------- |
| flatten & map | flatten & map x 1,182 ops/sec ±2.18% (63 runs sampled) |
| flatMap | flatMap x 6,011 ops/sec ±0.91% (35 runs sampled) |
The fact that `flatMap` is faster is also highlighted in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap
PR Close#48378
When injecting the `ChangeDetectorRef` into a node that matches a component, we create a new ref using the component's LView. This breaks down for host directives, because they run before the component's LView has been created.
These changes resolve the issue by creating the LView before creating the node injector for the directives.
Fixes#48249.
PR Close#48355
improve the emulated shadowDom implementation so that it can correctly
scope selectors present inside the @container at-rule (recently added
to the css specs)
resolves#48264
PR Close#48353
The docker-based AIO preview deploy setup is replaced with
significantly simpler setup using GitHub actions provided by
dev-infra (also something dev-infra can maintain better then).
The actions under the hood leverage Firebase preview channels.
PR Close#48345
Ocassionally the NodeJS version is not correct after NVM on Windows.
This adds some debug information that should help improve stability
here. A recent attempt to update the `$PATH` did not seem to help.
PR Close#48351
This commit removes the unnecessary `assignExtraOptionsToRouter` helper
function. This helper is not necessary because the options can be
retrieved from DI and assigned during the construction on the Router.
PR Close#48313
The Router constructor and `setupRouter` factory mainly exist as a
legacy configuration. Since the Router's creation, the style in Angular
has evolved quite a bit. This commit eliminates and cleans up some
unnecessary comlicated code paths related to the router
constructor/factory.
Note that there are edits to the `setupTestingRouter` that could be seen
as breaking. However, it is not for several reasons:
1. The function is documented as a factory function. If used as
documented, the parameters should match what's available in DI
2. The function is totally unused by the Router itself and is not used
in g3 either. I believe it was made publicApi by an error when
updating documentation annotations long ago.
PR Close#48313
These steps builds AIO which is memory intensive. Running out of memory
may be the cause of some ci flakiness. Change the executor size to test
this theory.
For context: The CLI process is randomly getting `Killed`, likely by the
linux OOM killer. The Angular CLI builds happen on the host machine- no RBE.
Without the Bazel migration they were previously already at ~63% peak RAM.
With Bazel's overhead and e.g. remote caching, it seems to hit 100%
(can be seen in CircleCI machine insights). OOM killer may then choose the
highest consuming task. i.e. the Angular CLI and kill it.
Angular CLI build ram consumption is proportional to the size of the app. AIO is not small
https://app.circleci.com/pipelines/github/angular/angular/53992/workflows/ec47e3d8-2e7d-45b8-a802-7ec8ec4026c4/jobs/1265666/parallel-runs/0/steps/0-106https://angular-team.slack.com/archives/C02PARQNMC1/p1670067910332809i
PR Close#48342
We now set the Firebase deploy target for AIO preview deployment
via GitHub actions. It looks like configuring the deploy target
also requires authentication / or a project.
PR Close#48352
Checks out the Firebase project before setting the AIO preview targets.
Surprisingly Firebase requires a project when setting resource
identifiers for the targets. This is already done by the Firebase
deploy action from @FirebaseExtended, but we need to do it earlier.
PR Close#48347
For the deploy job we still need to use the Firebase CLI to configure
the proper hosting deploy targets. See:
011ef66a04.
We don't have node modules installed in this job, and it would
also be overkill to install them for just using firebase here.
Since the action uses `npx firebase-tools` down the line anyway,
we can use it without any speed downsides.
PR Close#48346
The AIO firebase project specifies `aio` as deploy target. This means
that we need to configure this target before being able to deploy AIO
previews.
We use the default project target as target since the preview Firebase
project does not use multi site targets. See:
https://firebase.google.com/docs/hosting/multisites
PR Close#48338
The `test_win` job is occasionally failing where a super old NodeJS
version is used even though we installed a proper one with `nvm`.
It's unclear how the CircleCI windows VMs differ here, it's coming
up rarely and is hard to reproduce when SSH-ing into VMs. Our best
guess is that the existing NodeJS version from the container/image is
super old and somehow takes precedence over the NVM-managed NodeJS
version. This could happen due to bad ordering in the `$PATH`
environment variable, or NVM not properly being wired up there.
We attempt to fix this by always setting `$PATH` to the NVM symlink
directory manually- with highest priority.
PR Close#48326
The `example-boilerplate` NodeJS binary always depends on all files from
the individual examples. This is not needed as for composition w/ the
boilerplate, only the target example content + boilerplate is needed
in the runfiles. This reduces the runfiles and therefore speeds up
boilerplate creation (which can happen for all examples concurrently).
PR Close#48329
AIO has two risk places where `node_modules` folders may exist and may
be accidentally picked up by Bazel- even though they are already added
as part of `.bazelignore` and made visible through `.gitignore`. It
doesn't hurt instructing Bazel to always ignore `node_modules` as part
of the `glob` instruction.
Co-authored-by: Joey Perrott <josephperrott@gmail.com>
PR Close#48329
When building AIO using `yarn build` the `--config=release` is added.
This was done as part of the Bazel migration to make sure the footer
shows a Git revision via Bazel stamping.
This does not provide enough benefits, compared to the downside of
reduced caching. Bazel will discard the analysis cache when the stamp
configuration changes.
This may happen easily when you work in framework where
`--config=release` is not used. Then when starting work in AIO: the
config changes and the cache is discarded. This may even mean that
existing framework package build artifacts may be discarded when an
AIO local build is started.
Co-authored-by: Joey Perrott <josephperrott@gmail.com>
PR Close#48329
These folders are no longer used in the source tree, and only exist
in the Bazel sandbox. We can rmeove them. Node modules are kept because
people may create them when editing the integration `package.json`
files.
PR Close#48329
It's very easy to have some random `node_modules/` folder floating
around in the repository. Especially coming from the old AIO
example boilerplate setup (which heavily relied on nested node modules).
These `node_modules/` folders can contain millions of files and might
be accidentally picked up by Bazel `glob`'s (if they are authored
in way that selects all nested files).
This could surface in `aio/tools/examples/shared` or individual content
examples, causing the Bazel analysis phase or runfile forest creation
to take forever given more than 1.5 files being dealt with.
Note that we keep the `examples/shared` node modules folder gitignored
as otherwise Renovate may have problems when updating the folder.
PR Close#48329
NgClass has non-negligable performance cost, especially if a
different object is provided as NgClass input (which was the case
for the NavItemComponent). The perfornace problem was noticed
in the scope of the INP score investigations while profiling the
https://angular.io/resources page. On this particular page replacing
NgClass usage with alternatives results in 20x (!) runtime perf
improvement. Such big improvement is possible since we avoid unneeded
CSS classes removal / adding in the DOM.
Part of #25518
PR Close#48312
Bazel otherwise may almost look as being stuck when it performs
many slow e2e tests. We should show what is running, even it results
in a little more output in the logs.
PR Close#48316
The `.bazelrc` workspace file attempted to imported the `.bazelrc.user`
file. This user file is set on CI to include the CI specific Bazel
settings.
Apparently this user rc import does not work, and fails silently given
the `try-import`. It fails because for AIO Bazel commands we change
the working directory using `yarn --cwd aio` and the `try-import`
is relative to the working directory..
PR Close#48316
Because the language service uses the compiler, we try to produce as
much useful information as possible rather than throwing hard errors.
Hard errors cause the compiler to crash. While this can be acceptable
when compiling a program as part of a regular build, this is undesirable
for the language service.
PR Close#48314
This commit removes several debug data structures from
the framework runtime. The data structures in question
were introduced in the framework in the past with the
idea of having debugging aid in the form of the human-redable
data structures. It turned out that in practice those
data structures were not used (most of the fwk developers
didn't even know about their existence!), yet we kept
paying the price of maintaining those duplicated (prod
and debug) version of the data structures.
PR Close#48281
This option has already been removed from availability externally. Internally, the last use has been removed
for the type on Route.loadChildren. More testing will be necessary to verify nothing relies on the other
code paths.
PR Close#48292
The navigationId is really just a count of how many navigations have been
processed through the navigation pipeline. This tracking should be
done as part of the navigation transition handler
PR Close#48257
Rather than accessing router internal properties that are available in DI,
this commit directly injects those dependencies in the navigation transition
handler. Note that there are several other items that _should_ be injectable
in DI (like the TitleStrategy) but because those are part of the Router public
interface and writeable(!), they might be changed during runtime. We
have to get these other items from the Router for now...
PR Close#48257
Remove the NgModuleRef from the internal interface of the Router. This
was only used to get the injector (equivalent to EnvironmentInjector).
Instead, the navigation transition handler can directly inject the
EnvironmentInjector
PR Close#48257
The ConfigLoader is only used as part of the navigation transition.
Moving the loader there completes the removal of event triggering in
the router code. This all now lives in the transition handler (plus
the router scroller, but let's ignore that...).
PR Close#48257
The events observable is part of the lifecycle of a navigation. This should
be contained in the NavigationTransitions class rather than the Router.
This Subject is re-exported by the router as an observable to maintain
the public API
PR Close#48257
Similar to the Rules NodeJS require patch, we have an ESM import patch
as of the AIO Bazel migration (to support ESM scripts better).
This script uses `--loader`, an experimental NodeJS flag. This is
similar to how `ts-node` uses it. We should disable the warnings
as it results in a lot of unreadable Bazel output and the warnings
are okay to be ignored. Note that we cannot fine-grain disable
the specific warning so all others would be disabled too.
Realistically we haven't seen any in the past and long-term we will
be not relying on patched resolution anyway (looking at `rules_js`).
PR Close#48282
The navigationId is really just a count of how many navigations have been
processed through the navigation pipeline. This tracking should be
done as part of the navigation transition handler
PR Close#48257
Rather than accessing router internal properties that are available in DI,
this commit directly injects those dependencies in the navigation transition
handler. Note that there are several other items that _should_ be injectable
in DI (like the TitleStrategy) but because those are part of the Router public
interface and writeable(!), they might be changed during runtime. We
have to get these other items from the Router for now...
PR Close#48257
Remove the NgModuleRef from the internal interface of the Router. This
was only used to get the injector (equivalent to EnvironmentInjector).
Instead, the navigation transition handler can directly inject the
EnvironmentInjector
PR Close#48257
The ConfigLoader is only used as part of the navigation transition.
Moving the loader there completes the removal of event triggering in
the router code. This all now lives in the transition handler (plus
the router scroller, but let's ignore that...).
PR Close#48257
The events observable is part of the lifecycle of a navigation. This should
be contained in the NavigationTransitions class rather than the Router.
This Subject is re-exported by the router as an observable to maintain
the public API
PR Close#48257
Prior to the AIO bazel migration, the pwa test script only tested the
pwa metric. A bug was introduced where the score target was used for all
metrics, causing the AIO deploy test to fail.
PR Close#48214
The stricter checks under `strictInjectionParameters` in Angular 15 now enforce that
an inherited constructor must be compatible with DI, based on whether all parameters
are valid injection tokens. There is an issue when the constructor is inherited from
a class in a declaration file though, as information on the usage of `@Inject()` is
not present within a declaration file. This means that this stricter check cannot be
accurately performed, resulting in false positives.
This commit disables the stricter check to behave the same as it did prior to
Angular 15, therefore avoiding the false positive.
Fixes#48152
PR Close#48156
This commit extracts the Router's navigation "transitions" to a separate
file. The goal here is twofold:
- Separate the Router's logic into more manageable chunks. Rather than
having to always edit a 1000+ line file, this separates different
pieces into smaller, more focused files
- More importantly, this sets the groundwork for separating the Router
state from the individual navigation transition. That is, it would be
good for the rxjs pipeline to _not_ modify the Router state but only
keep track of its own intermediate stages and emit outwards during
important events. The Router can subscribe to those events and make
updates to its state. This would theoretically allow us to swap those
implementations independently. That is, the Router's state management
can be changed without changing the transition handling and
vice-versa.
PR Close#48187
Cannot load the root package.json. Surfaced after trying to merge
aio-bazel-migration to main because the deployment short circuits
on ci for feature branhces.
The ngc entrypoint escapes the sandboxed example folder. Rather than
always symlinking local packages, copy the full package when there are
bin entries.
Some earlier refactoring prevented the watchr script from running in
the source tree. There was also a Windows issue where running architect
didn't preserve symlinks causing the app to not be served.
The `initNavigated` flag is not necessary. The way `enabledBlocking`
works is by blocking any navigations from finishing until the
application has bootstrapped. The bootstrap is unblocked as soon as we
hit the `afterPreactivation` step. After that point,
`afterPreactivation` is always unblocked because the `bootstrapDone`
Subject is completed/stopped. There is no need for an additional
variable to track this information.
PR Close#48064
This commit makes several updates to the bootstrap tests of the Router.
The change that made the real difference was providing
`MockPlatformLocation`. Other changes include:
* using `async/await` instead of `done`
* not providing APP_BASE_HREF (recent router refactors made this unnecessary)
* using some functional guards to simplify some tests
PR Close#48176
If `history.pushState()` or `history.replaceState()` were called manually without including the `navigationId` field the state was being incorrectly discarded - that logic was for maintaining the original behavior of `NavigationStart.restoredState`.
Improves on #28176, fully fixes#28108, see also #28954
PR Close#48033
The MockPlatformLocation forward, back, and historyGo methods should trigger a popstate event.
Additionally, these events should just be synchronous since that's what the majority of the major
browsers do. Lastly, onPopState should be implemented the same way as onHashChange.
PR Close#48113
Add the missing FormRecord class to the
Reactive forms API summary which is located under Developer Guides ->
Forms -> Reactive Forms.
Fixes#47808
PR Close#48136
This reverts commit 07c9396824. This
change caused test failures (both unit and integration). Though the code
looks like it should be a no-op update, it's possible it affecting
something to do with microtasks, zoneJS, and change detection. More
investigation would need to be done into the exact nature of the
failures.
PR Close#48135
We plan to change the link in google3 to point to google3-specific
documentation. Replacing a single constant will make for a smaller and
more maintainable patch.
PR Close#48082
Fixes that the `AbstractControl` was mutating the validators arrays being passed into the constructor an helper methods like `setValidators`.
Fixes#47827.
PR Close#47830
On Firefox, Angular DevTools was breaking the XML display because of the script injected
Based on contentType, we won't inject that script anymore
Fixes#48017
PR Close#48021
The useCapture argument of the listener instruction was only
meaningful in the Renderer3 case. Since the Renderer3 code was
removed this argument has no use. Note that we can perform
additional cleanup and remove the useCapture argument from the
listener instruction (this would require change to the instruction
signature, though).
PR Close#48046
Renderer3 had to store reference to the listener function in order to
properly cleanup event listeners. Since the Renderer3 abstraction was
removed the corresponding code path is no longer needed (Renderer2
returns a cleanup function that can be called directly).
PR Close#48046
The router has several default strategy implementations that are either
assigned via `new XStrategy()` property assignements or via the factory
function for the `Router` itself. These can be simplified by providing
the default implementation in the strategy `Injectable`. Custom
implementations can still override the defaults by specifying them in
the `providers` list.
Notably, this change also makes the `UrlHandlingStrategy` and
`RouteReuseStrategy` defaults injectable via DI rather than having to
indirectly grab them by going through the `Router` instance and
accessing the properties.
PR Close#48022
It is not clear what the intention of the promise catch and reject is. Potentially this is
legacy code built around some ZoneJs bug that doesn't exist anymore.
PR Close#48067
This commit adds extra e2e tests for the fill mode checks in the NgOptimizedImage directive to make
sure a warning is logged in a console.
PR Close#48036
Add a warning if a fill-mode image is rendered without height. This is a common occurence if the user doesn't properly set the 'position' attribute of the parent element.
PR Close#48036
* Update extractedUrl documentation to point to the correct extract method
* Remove authService.redirectUrl from tour of heroes (it's not used anywhere)
PR Close#48009
This commit updates the logic related to the attribute and property binding rules for <iframe> elements. There is a set of <iframe> attributes that may affect the behavior of an iframe and this change enforces that these attributes are only applied as static attributes, making sure that they are taken into account while creating an <iframe>.
If Angular detects that some of the security-sensitive attributes are applied as an attribute or property binding, it throws an error message, which contains the name of an attribute that is causing the problem and the name of a Component where an iframe is located.
BREAKING CHANGE:
Existing iframe usages may have security-sensitive attributes applied as an attribute or property binding in a template or via host bindings in a directive. Such usages would require an update to ensure compliance with the new stricter rules around iframe bindings.
PR Close#47964
I recently checked in a new error guide. The corresponding page must have a leading zero because it is a runtime error. Otherwise links to this error guide will be invalid.
PR Close#47991
[A Github issue](https://github.com/angular/angular/issues/43821) about an arcane-sounding Forms error is one of the repo's top-ten most visited pages. This converts the error to `RuntimeErrorCode` and adds a dedicated guide to explain how to solve it.
PR Close#47969
Fixes that we were calling `createRenderer` even though we had one already. This likely wasn't a performance issue since the renderer factory caches the renderer, but it's still better to reuse it to avoid confusion in the future.
Fixes#47980.
PR Close#47981
The public API for enabling this option has already been removed. This change
updates the internal Router code to not include any logic to support it.
PR Close#47933
The caretaker note label has been renamed to the new standardized label
name. This commit updates the ng-dev caretaker check configuration to
account for this.
Also the merge assistance queue query is updated to only show PRs marked
as ready for merge. Other PRs with just a caretaker note should not be
of interest for the caretaker yet.
PR Close#47987
Due to being only 1 letter away from `provideRouter`, it is quite
possible that developers may accidentally use `provideRoutes` rather
than `provideRouter` in the `boostrapApplication` function. This change
will warn developers when `provideRoutes` is used without the `Router`.
PR Close#47896
This function is too similar in name to the new `provideRouter` and can
lead to misconfiguring the router. The function itself is just a small
wrapper around `{provide: ROUTES, multi: true, useValue: routes}`. It is
rarely necessary to provide routes in this way. The harm `provideRoutes`
will cause due to being only 1 letter away from `provideRouter` vastly
outweighs the benefit of a slightly shorter provider.
PR Close#47896
This rename reflects what the function actually does. Although the intention
is still not to have two different interceptor mechanisms, that is now
communicated in the docs for the function instead of in its name.
Fixes#47764
PR Close#47901
This is to push up the page in search results when searching for these terms.
Ex: currently when searching using the term `test` this page is displayed at the middle of the results.
PR Close#47953
This section is unnecessary given that all is needed for the user is to run `ng test`, and is also tricky to maintain (Node was hard coded to v14 still).
We have no mechanism of testing or verifying these setups, and we have no motivation to do so.
Users should see their CI providers documentation Any preconfigured Node setup is going to suggest `ng test`, which should "just work" for Angular.
PR Close#47940
In version 15, the Angular CLI will no longer generate a `karma.conf.js` by default.
This commit updates the testing document to include an example of how to include a custom `karma.conf.js`. Also, we update several parts of the documentation which were outdated.
PR Close#47940
This commit updates the error message thrown by the NgOptimizedImage directive, when it detects a situation
when inputs change after initial rendering.
The list of inputs was also updated to include all inputs added recently.
PR Close#47926
These changes include
- Remove the usage of `enableProdMode`
- Remove `test.ts`, `polyfills.ts`, `karma.conf.js` and environment files which are no longer generated by default
PR Close#47904
Currently there are 3 pages for analytics gathering information. Most of the information is duplicate.
With this change we remove the duplicate pages and outdated content to reflect the changes in version 15.
PR Close#47840
This commit updates the logic related to the attribute order on iframes and makes the rules more strict. There is a set of iframe attributes that may affect the behavior of an iframe, this change enforces that these attributes are applied before an `src` or `srcdoc` attributes are applied to an iframe, so that they are taken into account.
If Angular detects that some of the attributes are set after the `src` or `srcdoc`, it throws an error message, which contains the name of ann attribute that is causing the problem and the name of a Component where an iframe is located. In most cases, it should be enough to change the order of attributes in a template to move the `src` or `srcdoc` ones to the very end.
BREAKING CHANGE:
Existing iframe usages may have `src` or `srcdoc` preceding other attributes. Such usages may need to be updated to ensure compliance with the new stricter rules around iframe bindings.
PR Close#47935
`AnimationRendererFactory` maintains a map between a renderer delegate and the animations renderer it corresponds to, but the renderers are never removed from the map. This leads to memory leaks when used with the `ShadowDom` view encapsulation, because the specific renderer keeps a references to its shadow root which in turn references all the elements in the view.
These changes resolve the leak by clearing the reference when the animations renderer is destroyed.
Fixes#47892.
PR Close#47903
This commit updates the standalone components guide on AIO to showcase the
new `provideRouter` API. Previously the guide demonstrated configuring the
router via `importProvidersFrom(RouterModule.forRoot(...))`. A new section
was added to ensure `importProvidersFrom` was still shown in an example.
PR Close#47902
No longer maintains a separate tsconfig for the Bazel package. This
seems to be a legacy artifact back when ngc-wrapped was put into GitHub.
We now use the canonical repository Bazel tsconfig. This commit also
fixes all strictness-related errors and makes ngc-wrapped compatible.
PR Close#47893
Currently `ngc-wrapped` mostly relies on any casts/or disabled
strictness checks to be able to use `tsickle`'s emit callback and
emit result merging for ngtsc. We should change this so that supertypes
of `ts.EmitResult` can be used in these optional callbacks- allowing us
to enable strictness checks in `packages/bazel/...` too.
PR Close#47893
There are no new CLI related deprecations for v15. However, multiple
features listed in the deprecation guide have since been removed and
are now also removed from the relevant sections of the guide.
PR Close#47885
The `ServerRenderer` wasn't aligned with the `Renderer2` interface which meant that it was still referring to the old `debugInfo` parameters. It also wasn't implementing the `preserveContent` argument of `selectRootElement` which can lead to incosistencies between the server and the client.
Fixes#47844.
PR Close#47868
- Based on issue #47583
- Updated docs for Service workers by removing the section which used http-server to use service workers with ng serve
- By changelog of v14.2.0, service workers become compatible with ng serve using feature #23679
PR Close#47613
Fixes that the `AbstractControl` was mutating the validators arrays being passed into the constructor an helper methods like `setValidators`.
Fixes#47827.
PR Close#47830
As of Bazel v5, the `bazel-out` symlink no longer exists. This commit
corrects the path in the VSCode recommended launch configuration. This
helps speed up this launch configuration given less files having to be
explored.
PR Close#47831
I fixed inconsistent spelling and formatting and replaced a dead link to clarity design system starter.
docs(schematics): revert a change in schematic usage pronoun
docs: parentheses removal from schematic generation description
Co-Authored-By: Bob Watson <104218420+bob-watson@users.noreply.github.com>
PR Close#47453
The image distortion warning (when rendered aspect ratio is noticeably different than intrinsic) doesn't make sense with fill mode, where the user may want the image to stretch, crop or letterbox.
PR Close#47824
Currently, the scroll event is fired immediately after the
`NavigationEnd`. However, this is problematic because a change detection
has not been able to run, meaning that Angular will not yet have run the update
block of the component templates being rendered as part of the navigation.
This change delays the scroll event using a `setTimeout`, which will
allow Angular's change detection to run before the scroll restoration is
performed.
fixes#24547
PR Close#47563
Do not generate a srcset if the loader being used is the default noopImageLoader. This loader does not take width into account, so it does not make sense to use it with srcsets.
PR Close#47804
In v14.2, we've introduced a new directive to help developers to configure images for better performance. The directive was initially released in the "developer preview" mode. We've collected the feedback, made several improvements and we are happy to announce that the NgOptimizedImage APIs are promoted to stable!
This commit updates vast majority of APIs to drop the `@developerPreview` label, which effectively documents them as stable.
There are few APIs though that retained the `@developerPreview` annotations:
- the `IMAGE_CONFIG` token
- the `ImageConfig` type
- the `fill` @Input of the directive
We plan to collect some additional feedback for the mentioned APIs and drop the `@developerPreview` annotation after that.
PR Close#47794
The original description gave a false impression that only query params and fragment changes are ignored, while actually `routeParams` changes are ignored as well.
PR Close#47786
This is a small commit to:
- clarify that loaders aren't mandatory
- remove outdated preconnect option from docs
- clarify how width/height should be set for fixed size images
- minor structural changes for clarity
PR Close#47796
The current error that is thrown when the "width" or
"height" attributes is missing doesn't mention that
"fill" mode is another option. This commit updates
the error with that option.
PR Close#47797
This commit updates the NgOptimizedImage directive to:
- drop a deprecated selector (the `rawSrc` one)
- drop corresponding input getter
The `rawSrc` was replaced by the `ngSrc` one during the developer preview phase.
PR Close#47798
This commit adds a missing warning if the image directive
detects that you're hosting your image on one of our
supported image CDNs but you're not using the built-in loader
for it. This excludes applications that are using a custom
loader.
PR Close#47330
In v14, we've introduced core concepts to allow Components, Directives and Pipes to configure their dependencies
without the need to use NgModules and without the need to be declared in an NgModule. The concepts and initial
set of APIs were marked as "developer preview" to allow developers to use these APIs and share the feedback.
Since v14, we've been reviewing the entire API surface of the framework and either updating existing APIs to support standalone or creating new APIs that allowed to use Router, HttpClient and other abstractions without NgMod
ules.
Based on the mentioned work to review and stabilize APIs and also based on the positive feedback from the commun
ity, we are happy to announce that the Standalone APIs are promoted to stable!
This commit updates vast majority of standalone-related APIs to drop the `@developerPreview` label, which effect
ively documents then as stable.
Two APIs that retained the `@developerPreview` annotations are:
- withRequestsMadeViaParent (from `@angular/common/http`)
- renderApplication (from `@angular/platform-server`)
We plan to collect some additional feedback for the mentioned APIs and drop the `@developerPreview` annotation b
efore the next major release.
Co-Authored-By: Alex Rickabaugh <alx@alxandria.net>
Co-Authored-By: Andrew Scott <atscott@google.com>
Co-Authored-By: Dylan Hunn <dylhunn@gmail.com>
Co-Authored-By: Jessica Janiuk <jessicajaniuk@google.com>
Co-Authored-By: JoostK <joost.koehoorn@gmail.com>
Co-Authored-By: Kristiyan Kostadinov <crisbeto@abv.bg>
Co-Authored-By: Pawel Kozlowski <pkozlowski.opensource@gmail.com>
PR Close#47754
Implements more of the runtime validations for host directives as compiler diagnostics so that they can be caught earlier. Also does some minor cleanup.
PR Close#47768
The `main` bundle size has been reduced with the Angular CLI update.
This is not worth investigating as it's a positive side reduction likely
due to further optimizations in the Angular CLI devkit.
Also updates the other golden payload entries to capture all other CLI
related payload changes- making future payload update easier to
investigate.
PR Close#47717
Renovate no longer updated the dependencies because they were expanded
to a range. Ranges did not satisfy the `@next` tag anymore- so Renovate
did was not able to update.
This fixes the dependencies by locking them- and also updates the
versions according to our Renovate config.
PR Close#47717
Prior to this, the `@angular/localize/init` was added as a polyfill which caused the `@angular/localize` types not to be included in the TypeScript program which caused errors such as the below:
```
Error: src/app/app.component.ts:9:11 - error TS2304: Cannot find name '$localize'.
```
With the recent changes in the CLI (https://github.com/angular/angular-cli/pull/24032), adding `@angular/localize/init` as polyfil or in the `main.server.ts` is no longer necessary. Instead we add this as a TypeScript type. When users are running in JIT mode, we add `@angular/localize/init` as an additional entrypoint.
This change also exposes the `$localize` method as a global when importing `@angular/localize`.
Closes#47677
PR Close#47763
* Updates ng-dev to support the new g3sync canonical JSON configs
* Updates the google-internal-tests option to support the g3 sync
canonical JSON config
* Moves the YAML sync config to a dedicated JSON file, used by the
action and by `yarn ng-dev`.
* Updates the ng-dev caretaker config to fix that the Merge assistance
queue is always empty.
PR Close#47779
The supported Node.js versions for the `@angular/compiler-cli` package (^14.15.0 || >=16.10.0)
allow for the use of the `recursive` option of `mkdirSync`. Using the `recursive` option
removes the need to manually create each subdirectory in a given path.
PR Close#47678
This commit updates the `provideHttpClient` function to return the `EnvironmentProviders` instead of a regular `Provider[]`, to make sure that the `provideHttpClient` can only be used where an environment is being setup.
PR Close#47758
This update describes the content authoring and revision process in sufficient detail for technical and non-technical contributors to the angular.io documentation.
PR Close#47381
@@ -65,14 +65,6 @@ Angular maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
### Appeal
If you are banned you may contest the decision. To do so email conduct@angular.io with the subject line "Repeal Ban for {{your name here}}" and body with the responses to the following:
* Why do you believe you did not violate the Code of Conduct?
* Were other factors involved in this situation the leadership team may have been unaware of?
* Why do you wish to be a part of the Angular community?
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org), version 1.4,
@@ -306,6 +306,10 @@ There are currently a few exceptions to the "use package name" rule:
* `migrations`: used for changes to the `ng update` migrations.
* `ngcc`: used for changes to the [Angular Compatibility Compiler](./packages/compiler-cli/ngcc/README.md)
* `ve`: used for changes specific to ViewEngine (legacy compiler/renderer).
* `devtools`: used for changes in the [browser extension](./devtools/README.md).
* none/empty string: useful for `test` and `refactor` changes that are done across all packages (e.g. `test: add missing unit tests`) and for docs changes that are not related to a specific package (e.g. `docs: fix typo in tutorial`).
Angular is part of Google [Open Source Software Vulnerability Reward Program](https://bughunters.google.com/about/rules/6521337925468160/google-open-source-software-vulnerability-reward-program-rules). For vulnerabilities in Angular, please submit your report [here](https://bughunters.google.com/report).
Angular is part of Google [Open Source Software Vulnerability Reward Program](https://bughunters.google.com/about/rules/6521337925468160/google-open-source-software-vulnerability-reward-program-rules), for vulnerabilities in Angular please submit your report [here](https://bughunters.google.com/report).
For more information, check out [Angular's security policy](https://angular.io/guide/security).
For more information on Angular's security policy visit: https://angular.io/guide/security
"longDescription":"Adds the npm package for a published library to your workspace, and configures\nthe project in the current working directory to use that library, as specified by the library's schematic.\nFor example, adding `@angular/pwa` configures your project for PWA support:\n\n```bash\nng add @angular/pwa\n```\n",
"aliases":[],
"deprecated":false,
"options":[
{
"name":"collection",
"type":"string",
"description":"The package to be added.",
"positional":0
},
{
"name":"defaults",
"type":"boolean",
"default":false,
"description":"Disable interactive input prompts for options with a default."
},
{
"name":"dry-run",
"type":"boolean",
"default":false,
"description":"Run through and reports activity without writing out results."
},
{
"name":"force",
"type":"boolean",
"default":false,
"description":"Force overwriting of existing files."
},
{
"name":"help",
"type":"boolean",
"description":"Shows a help message for this command in the console."
},
{
"name":"interactive",
"type":"boolean",
"default":true,
"description":"Enable interactive input prompts."
},
{
"name":"registry",
"type":"string",
"description":"The NPM registry to use."
},
{
"name":"skip-confirmation",
"type":"boolean",
"default":false,
"description":"Skip asking a confirmation prompt before installing and executing the package. Ensure package name is correct prior to using this option."
},
{
"name":"verbose",
"type":"boolean",
"default":false,
"description":"Display additional details about internal operations during execution."
"longDescription":"You can help the Angular Team to prioritize features and improvements by permitting the Angular team to send command-line command usage statistics to Google.\nThe Angular Team does not collect usage statistics unless you explicitly opt in. When installing the Angular CLI you are prompted to allow global collection of usage statistics.\nIf you say no or skip the prompt, no data is collected.\n\n### What is collected?\n\nUsage analytics include the commands and selected flags for each execution.\nUsage analytics may include the following information:\n\n- Your operating system \\(macOS, Linux distribution, Windows\\) and its version.\n- Package manager name and version \\(local version only\\).\n- Node.js version \\(local version only\\).\n- Angular CLI version \\(local version only\\).\n- Command name that was run.\n- Workspace information, the number of application and library projects.\n- For schematics commands \\(add, generate and new\\), the schematic collection and name and a list of selected flags.\n- For build commands \\(build, serve\\), the builder name, the number and size of bundles \\(initial and lazy\\), compilation units, the time it took to build and rebuild, and basic Angular-specific API usage.\n\nOnly Angular owned and developed schematics and builders are reported.\nThird-party schematics and builders do not send data to the Angular Team.\n",
"aliases":[],
"deprecated":false,
"options":[
{
"name":"help",
"type":"boolean",
"description":"Shows a help message for this command in the console."
}
],
"subcommands":[
{
"name":"disable",
"command":"disable",
"shortDescription":"Disables analytics gathering and reporting for the user.",
"options":[
{
"name":"global",
"type":"boolean",
"aliases":[
"g"
],
"default":false,
"description":"Configure analytics gathering and reporting globally in the caller's home directory."
}
],
"aliases":[
"off"
],
"deprecated":false
},
{
"name":"enable",
"command":"enable",
"shortDescription":"Enables analytics gathering and reporting for the user.",
"options":[
{
"name":"global",
"type":"boolean",
"aliases":[
"g"
],
"default":false,
"description":"Configure analytics gathering and reporting globally in the caller's home directory."
}
],
"aliases":[
"on"
],
"deprecated":false
},
{
"name":"info",
"command":"info",
"shortDescription":"Prints analytics gathering and reporting configuration in the console.",
"options":[],
"aliases":[],
"deprecated":false
},
{
"name":"prompt",
"command":"prompt",
"shortDescription":"Prompts the user to set the analytics gathering status interactively.",
"options":[
{
"name":"global",
"type":"boolean",
"aliases":[
"g"
],
"default":false,
"description":"Configure analytics gathering and reporting globally in the caller's home directory."
"longDescription":"The command can be used to build a project of type \"application\" or \"library\".\nWhen used to build a library, a different builder is invoked, and only the `ts-config`, `configuration`, and `watch` options are applied.\nAll other options apply only to building applications.\n\nThe application builder uses the [webpack](https://webpack.js.org/) build tool, with default configuration options specified in the workspace configuration file (`angular.json`) or with a named alternative configuration.\nA \"development\" configuration is created by default when you use the CLI to create the project, and you can use that configuration by specifying the `--configuration development`.\n\nThe configuration options generally correspond to the command options.\nYou can override individual configuration defaults by specifying the corresponding options on the command line.\nThe command can accept option names given in either dash-case or camelCase.\nNote that in the configuration file, you must specify names in camelCase.\n\nSome additional options can only be set through the configuration file,\neither by direct editing or with the `ng config` command.\nThese include `assets`, `styles`, and `scripts` objects that provide runtime-global resources to include in the project.\nResources in CSS, such as images and fonts, are automatically written and fingerprinted at the root of the output folder.\n\nFor further details, see [Workspace Configuration](guide/workspace-config).\n",
"aliases":[
"b"
],
"deprecated":false,
"options":[
{
"name":"allowed-common-js-dependencies",
"type":"array",
"description":"A list of CommonJS packages that are allowed to be used without a build time warning."
},
{
"name":"aot",
"type":"boolean",
"default":true,
"description":"Build using Ahead of Time compilation."
},
{
"name":"base-href",
"type":"string",
"description":"Base url for the application being built."
},
{
"name":"build-optimizer",
"type":"boolean",
"default":true,
"description":"Enables advanced build optimizations when using the 'aot' option."
},
{
"name":"common-chunk",
"type":"boolean",
"default":true,
"description":"Generate a seperate bundle containing code used across multiple bundles."
},
{
"name":"configuration",
"type":"string",
"aliases":[
"c"
],
"description":"One or more named builder configurations as a comma-separated list as specified in the \"configurations\" section in angular.json.\nThe builder uses the named configurations to run the given target.\nFor more information, see https://angular.io/guide/workspace-config#alternate-build-configurations."
},
{
"name":"cross-origin",
"type":"string",
"default":"none",
"enum":[
"none",
"anonymous",
"use-credentials"
],
"description":"Define the crossorigin attribute setting of elements that provide CORS support."
},
{
"name":"delete-output-path",
"type":"boolean",
"default":true,
"description":"Delete the output path before building."
},
{
"name":"deploy-url",
"type":"string",
"deprecated":"Use \"baseHref\" option, \"APP_BASE_HREF\" DI token or a combination of both instead. For more information, see https://angular.io/guide/deployment#the-deploy-url.",
"description":"URL where files will be deployed."
},
{
"name":"extract-licenses",
"type":"boolean",
"default":true,
"description":"Extract all licenses in a separate file."
},
{
"name":"help",
"type":"boolean",
"description":"Shows a help message for this command in the console."
},
{
"name":"i18n-duplicate-translation",
"type":"string",
"default":"warning",
"enum":[
"warning",
"error",
"ignore"
],
"description":"How to handle duplicate translations for i18n."
},
{
"name":"i18n-missing-translation",
"type":"string",
"default":"warning",
"enum":[
"warning",
"error",
"ignore"
],
"description":"How to handle missing translations for i18n."
},
{
"name":"index",
"type":"string",
"description":"Configures the generation of the application's HTML index."
},
{
"name":"inline-style-language",
"type":"string",
"default":"css",
"enum":[
"css",
"less",
"sass",
"scss"
],
"description":"The stylesheet language to use for the application's inline component styles."
},
{
"name":"localize",
"type":"boolean",
"description":"Translate the bundles in one or more locales."
},
{
"name":"main",
"type":"string",
"description":"The full path for the main entry point to the app, relative to the current workspace."
},
{
"name":"named-chunks",
"type":"boolean",
"default":false,
"description":"Use file name for lazy loaded chunks."
},
{
"name":"ngsw-config-path",
"type":"string",
"description":"Path to ngsw-config.json."
},
{
"name":"optimization",
"type":"boolean",
"default":true,
"description":"Enables optimization of the build output. Including minification of scripts and styles, tree-shaking, dead-code elimination, inlining of critical CSS and fonts inlining. For more information, see https://angular.io/guide/workspace-config#optimization-configuration."
},
{
"name":"output-hashing",
"type":"string",
"default":"none",
"enum":[
"none",
"all",
"media",
"bundles"
],
"description":"Define the output filename cache-busting hashing mode."
},
{
"name":"output-path",
"type":"string",
"description":"The full path for the new output directory, relative to the current workspace.\nBy default, writes output to a folder named dist/ in the current project."
},
{
"name":"poll",
"type":"number",
"description":"Enable and define the file watching poll time period in milliseconds."
},
{
"name":"polyfills",
"type":"string",
"description":"Polyfills to be included in the build."
},
{
"name":"preserve-symlinks",
"type":"boolean",
"description":"Do not use the real path when resolving modules. If unset then will default to `true` if NodeJS option --preserve-symlinks is set."
},
{
"name":"progress",
"type":"boolean",
"default":true,
"description":"Log progress to the console while building."
},
{
"name":"project",
"type":"string",
"description":"The name of the project to build. Can be an application or a library.",
"positional":0
},
{
"name":"resources-output-path",
"type":"string",
"description":"The path where style resources will be placed, relative to outputPath."
},
{
"name":"service-worker",
"type":"boolean",
"default":false,
"description":"Generates a service worker config for production builds."
},
{
"name":"source-map",
"type":"boolean",
"default":false,
"description":"Output source maps for scripts and styles. For more information, see https://angular.io/guide/workspace-config#source-map-configuration."
},
{
"name":"stats-json",
"type":"boolean",
"default":false,
"description":"Generates a 'stats.json' file which can be analyzed using tools such as 'webpack-bundle-analyzer'."
},
{
"name":"subresource-integrity",
"type":"boolean",
"default":false,
"description":"Enables the use of subresource integrity validation."
},
{
"name":"ts-config",
"type":"string",
"description":"The full path for the TypeScript configuration file, relative to the current workspace."
},
{
"name":"vendor-chunk",
"type":"boolean",
"default":false,
"description":"Generate a seperate bundle containing only vendor libraries. This option should only be used for development to reduce the incremental compilation time."
},
{
"name":"verbose",
"type":"boolean",
"default":false,
"description":"Adds more details to output logging."
},
{
"name":"watch",
"type":"boolean",
"default":false,
"description":"Run build when files change."
},
{
"name":"web-worker-ts-config",
"type":"string",
"description":"TypeScript configuration for Web Worker modules."
"longDescription":"Angular CLI saves a number of cachable operations on disk by default.\n\nWhen you re-run the same build, the build system restores the state of the previous build and re-uses previously performed operations, which decreases the time taken to build and test your applications and libraries.\n\nTo amend the default cache settings, add the `cli.cache` object to your [Workspace Configuration](guide/workspace-config).\nThe object goes under `cli.cache` at the top level of the file, outside the `projects` sections.\n\n```jsonc\n{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"cli\": {\n \"cache\": {\n // ...\n }\n },\n \"projects\": {}\n}\n```\n\nFor more information, see [cache options](guide/workspace-config#cache-options).\n\n### Cache environments\n\nBy default, disk cache is only enabled for local environments. The value of environment can be one of the following:\n\n- `all` - allows disk cache on all machines.\n- `local` - allows disk cache only on development machines.\n- `ci` - allows disk cache only on continuous integration (CI) systems.\n\nTo change the environment setting to `all`, run the following command:\n\n```bash\nng config cli.cache.environment all\n```\n\nFor more information, see `environment` in [cache options](guide/workspace-config#cache-options).\n\n<div class=\"alert is-helpful\">\n\nThe Angular CLI checks for the presence and value of the `CI` environment variable to determine in which environment it is running.\n\n</div>\n\n### Cache path\n\nBy default, `.angular/cache` is used as a base directory to store cache results.\n\nTo change this path to `.cache/ng`, run the following command:\n\n```bash\nng config cli.cache.path \".cache/ng\"\n```\n",
"aliases":[],
"deprecated":false,
"options":[
{
"name":"help",
"type":"boolean",
"description":"Shows a help message for this command in the console."
}
],
"subcommands":[
{
"name":"clean",
"command":"clean",
"shortDescription":"Deletes persistent disk cache from disk.",
"options":[],
"aliases":[],
"deprecated":false
},
{
"name":"disable",
"command":"disable",
"shortDescription":"Disables persistent disk cache for all projects in the workspace.",
"options":[],
"aliases":[
"off"
],
"deprecated":false
},
{
"name":"enable",
"command":"enable",
"shortDescription":"Enables disk cache for all projects in the workspace.",
"options":[],
"aliases":[
"on"
],
"deprecated":false
},
{
"name":"info",
"command":"info",
"shortDescription":"Prints persistent disk cache configuration and statistics in the console.",
"longDescription":"Setting up autocompletion configures your terminal, so pressing the `<TAB>` key while in the middle\nof typing will display various commands and options available to you. This makes it very easy to\ndiscover and use CLI commands without lots of memorization.\n\n\n\n## Automated setup\n\nThe CLI should prompt and ask to set up autocompletion for you the first time you use it (v14+).\nSimply answer \"Yes\" and the CLI will take care of the rest.\n\n```\n$ ng serve\n? Would you like to enable autocompletion? This will set up your terminal so pressing TAB while typing Angular CLI commands will show possible options and autocomplete arguments. (Enabling autocompletion will modify configuration files in your home directory.) Yes\nAppended `source <(ng completion script)` to `/home/my-username/.bashrc`. Restart your terminal or run:\n\nsource <(ng completion script)\n\nto autocomplete `ng` commands.\n\n# Serve output...\n```\n\nIf you already refused the prompt, it won't ask again. But you can run `ng completion` to\ndo the same thing automatically.\n\nThis modifies your terminal environment to load Angular CLI autocompletion, but can't update your\ncurrent terminal session. Either restart it or run `source <(ng completion script)` directly to\nenable autocompletion in your current session.\n\nTest it out by typing `ng ser<TAB>` and it should autocomplete to `ng serve`. Ambiguous arguments\nwill show all possible options and their documentation, such as `ng generate <TAB>`.\n\n## Manual setup\n\nSome users may have highly customized terminal setups, possibly with configuration files checked\ninto source control with an opinionated structure. `ng completion` only ever appends Angular's setup\nto an existing configuration file for your current shell, or creates one if none exists. If you want\nmore control over exactly where this configuration lives, you can manually set it up by having your\nshell run at startup:\n\n```bash\nsource <(ng completion script)\n```\n\nThis is equivalent to what `ng completion` will automatically set up, and gives power users more\nflexibility in their environments when desired.\n\n## Platform support\n\nAngular CLI supports autocompletion for the Bash and Zsh shells on MacOS and Linux operating\nsystems. On Windows, Git Bash and [Windows Subsystem for Linux](https://docs.microsoft.com/en-us/windows/wsl/)\nusing Bash or Zsh are supported.\n\n## Global install\n\nAutocompletion works by configuring your terminal to invoke the Angular CLI on startup to load the\nsetup script. This means the terminal must be able to find and execute the Angular CLI, typically\nthrough a global install that places the binary on the user's `$PATH`. If you get\n`command not found: ng`, make sure the CLI is installed globally which you can do with the `-g`\nflag:\n\n```bash\nnpm install -g @angular/cli\n```\n",
"aliases":[],
"deprecated":false,
"options":[
{
"name":"help",
"type":"boolean",
"description":"Shows a help message for this command in the console."
}
],
"subcommands":[
{
"name":"script",
"command":"script",
"shortDescription":"Generate a bash and zsh real-time type-ahead autocompletion script.",
"longDescription":"A workspace has a single CLI configuration file, `angular.json`, at the top level.\nThe `projects` object contains a configuration object for each project in the workspace.\n\nYou can edit the configuration directly in a code editor,\nor indirectly on the command line using this command.\n\nThe configurable property names match command option names,\nexcept that in the configuration file, all names must use camelCase,\nwhile on the command line options can be given dash-case.\n\nFor further details, see [Workspace Configuration](guide/workspace-config).\n\nFor configuration of CLI usage analytics, see [ng analytics](cli/analytics).\n",
"aliases":[],
"deprecated":false,
"options":[
{
"name":"global",
"type":"boolean",
"aliases":[
"g"
],
"default":false,
"description":"Access the global configuration in the caller's home directory."
},
{
"name":"help",
"type":"boolean",
"description":"Shows a help message for this command in the console."
},
{
"name":"json-path",
"type":"string",
"description":"The configuration key to set or query, in JSON path format. For example: \"a[3].foo.bar[2]\". If no new value is provided, returns the current value of this key.",
"positional":0
},
{
"name":"value",
"type":"string",
"description":"If provided, a new value for the given configuration key.",
"longDescription":"The command takes an optional project name, as specified in the `projects` section of the `angular.json` workspace configuration file.\nWhen a project name is not supplied, executes the `deploy` builder for the default project.\n\nTo use the `ng deploy` command, use `ng add` to add a package that implements deployment capabilities to your favorite platform.\nAdding the package automatically updates your workspace configuration, adding a deployment\n[CLI builder](guide/cli-builder).\nFor example:\n\n```json\n\"projects\": {\n \"my-project\": {\n ...\n \"architect\": {\n ...\n \"deploy\": {\n \"builder\": \"@angular/fire:deploy\",\n \"options\": {}\n }\n }\n }\n}\n```\n",
"aliases":[],
"deprecated":false,
"options":[
{
"name":"configuration",
"type":"string",
"aliases":[
"c"
],
"description":"One or more named builder configurations as a comma-separated list as specified in the \"configurations\" section in angular.json.\nThe builder uses the named configurations to run the given target.\nFor more information, see https://angular.io/guide/workspace-config#alternate-build-configurations."
},
{
"name":"help",
"type":"boolean",
"description":"Shows a help message for this command in the console."
},
{
"name":"project",
"type":"string",
"description":"The name of the project to build. Can be an application or a library.",
"shortDescription":"Builds and serves an Angular application, then runs end-to-end tests.",
"aliases":[
"e"
],
"deprecated":false,
"options":[
{
"name":"configuration",
"type":"string",
"aliases":[
"c"
],
"description":"One or more named builder configurations as a comma-separated list as specified in the \"configurations\" section in angular.json.\nThe builder uses the named configurations to run the given target.\nFor more information, see https://angular.io/guide/workspace-config#alternate-build-configurations."
},
{
"name":"help",
"type":"boolean",
"description":"Shows a help message for this command in the console."
},
{
"name":"project",
"type":"string",
"description":"The name of the project to build. Can be an application or a library.",
"shortDescription":"Extracts i18n messages from source code.",
"aliases":[],
"deprecated":false,
"options":[
{
"name":"browser-target",
"type":"string",
"description":"A browser builder target to extract i18n messages in the format of `project:target[:configuration]`. You can also pass in more than one configuration name as a comma-separated list. Example: `project:target:production,staging`."
},
{
"name":"configuration",
"type":"string",
"aliases":[
"c"
],
"description":"One or more named builder configurations as a comma-separated list as specified in the \"configurations\" section in angular.json.\nThe builder uses the named configurations to run the given target.\nFor more information, see https://angular.io/guide/workspace-config#alternate-build-configurations."
},
{
"name":"format",
"type":"string",
"default":"xlf",
"enum":[
"xmb",
"xlf",
"xlif",
"xliff",
"xlf2",
"xliff2",
"json",
"arb",
"legacy-migrate"
],
"description":"Output format for the generated file."
},
{
"name":"help",
"type":"boolean",
"description":"Shows a help message for this command in the console."
},
{
"name":"out-file",
"type":"string",
"description":"Name of the file to output."
},
{
"name":"output-path",
"type":"string",
"description":"Path where output will be placed."
},
{
"name":"progress",
"type":"boolean",
"default":true,
"description":"Log progress to the console."
},
{
"name":"project",
"type":"string",
"description":"The name of the project to build. Can be an application or a library.",
"shortDescription":"Generates and/or modifies files based on a schematic.",
"aliases":[
"g"
],
"deprecated":false,
"options":[
{
"name":"defaults",
"type":"boolean",
"default":false,
"description":"Disable interactive input prompts for options with a default."
},
{
"name":"dry-run",
"type":"boolean",
"default":false,
"description":"Run through and reports activity without writing out results."
},
{
"name":"force",
"type":"boolean",
"default":false,
"description":"Force overwriting of existing files."
},
{
"name":"help",
"type":"boolean",
"description":"Shows a help message for this command in the console."
},
{
"name":"interactive",
"type":"boolean",
"default":true,
"description":"Enable interactive input prompts."
},
{
"name":"schematic",
"type":"string",
"description":"The [collection:schematic] to run.",
"positional":0
}
],
"subcommands":[
{
"name":"app-shell",
"command":"app-shell",
"shortDescription":"Generates an application shell for running a server-side version of an app.",
"options":[
{
"name":"app-id",
"type":"string",
"deprecated":"This option is no longer used.",
"default":"serverApp",
"description":"The application ID to use in withServerTransition()."
},
{
"name":"main",
"type":"string",
"default":"main.server.ts",
"description":"The name of the main entry-point file."
},
{
"name":"project",
"type":"string",
"description":"The name of the related client app."
},
{
"name":"root-module-class-name",
"type":"string",
"default":"AppServerModule",
"description":"The name of the root module class."
},
{
"name":"root-module-file-name",
"type":"string",
"default":"app.module.server.ts",
"description":"The name of the root module file"
},
{
"name":"route",
"type":"string",
"default":"shell",
"description":"Route path used to produce the application shell."
}
],
"aliases":[],
"deprecated":false
},
{
"name":"application",
"command":"application [name]",
"shortDescription":"Generates a new basic application definition in the \"projects\" subfolder of the workspace.",
"options":[
{
"name":"inline-style",
"type":"boolean",
"aliases":[
"s"
],
"description":"Include styles inline in the root component.ts file. Only CSS styles can be included inline. Default is false, meaning that an external styles file is created and referenced in the root component.ts file."
},
{
"name":"inline-template",
"type":"boolean",
"aliases":[
"t"
],
"description":"Include template inline in the root component.ts file. Default is false, meaning that an external template file is created and referenced in the root component.ts file. "
},
{
"name":"minimal",
"type":"boolean",
"default":false,
"description":"Create a bare-bones project without any testing frameworks. (Use for learning purposes only.)"
},
{
"name":"name",
"type":"string",
"description":"The name of the new application.",
"positional":0
},
{
"name":"prefix",
"type":"string",
"aliases":[
"p"
],
"default":"app",
"description":"A prefix to apply to generated selectors."
},
{
"name":"project-root",
"type":"string",
"description":"The root directory of the new application."
"description":"Do not add dependencies to the \"package.json\" file."
},
{
"name":"skip-tests",
"type":"boolean",
"aliases":[
"S"
],
"default":false,
"description":"Do not create \"spec.ts\" test files for the application."
},
{
"name":"standalone",
"type":"boolean",
"default":false,
"description":"Creates an application based upon the standalone API, without NgModules."
},
{
"name":"strict",
"type":"boolean",
"default":true,
"description":"Creates an application with stricter bundle budgets settings."
},
{
"name":"style",
"type":"string",
"default":"css",
"enum":[
"css",
"scss",
"sass",
"less"
],
"description":"The file extension or preprocessor to use for style files."
},
{
"name":"view-encapsulation",
"type":"string",
"enum":[
"Emulated",
"None",
"ShadowDom"
],
"description":"The view encapsulation strategy to use in the new application."
}
],
"aliases":[
"app"
],
"deprecated":false
},
{
"name":"class",
"command":"class [name]",
"shortDescription":"Creates a new, generic class definition in the given project.",
"options":[
{
"name":"name",
"type":"string",
"description":"The name of the new class.",
"positional":0
},
{
"name":"project",
"type":"string",
"description":"The name of the project."
},
{
"name":"skip-tests",
"type":"boolean",
"default":false,
"description":"Do not create \"spec.ts\" test files for the new class."
},
{
"name":"type",
"type":"string",
"description":"Adds a developer-defined type to the filename, in the format \"name.type.ts\"."
}
],
"aliases":[
"cl"
],
"deprecated":false
},
{
"name":"component",
"command":"component [name]",
"shortDescription":"Creates a new, generic component definition in the given project.",
"options":[
{
"name":"change-detection",
"type":"string",
"aliases":[
"c"
],
"default":"Default",
"enum":[
"Default",
"OnPush"
],
"description":"The change detection strategy to use in the new component."
},
{
"name":"display-block",
"type":"boolean",
"aliases":[
"b"
],
"default":false,
"description":"Specifies if the style will contain `:host { display: block; }`."
},
{
"name":"export",
"type":"boolean",
"default":false,
"description":"The declaring NgModule exports this component."
},
{
"name":"flat",
"type":"boolean",
"default":false,
"description":"Create the new files at the top level of the current project."
},
{
"name":"inline-style",
"type":"boolean",
"aliases":[
"s"
],
"default":false,
"description":"Include styles inline in the component.ts file. Only CSS styles can be included inline. By default, an external styles file is created and referenced in the component.ts file."
},
{
"name":"inline-template",
"type":"boolean",
"aliases":[
"t"
],
"default":false,
"description":"Include template inline in the component.ts file. By default, an external template file is created and referenced in the component.ts file."
},
{
"name":"module",
"type":"string",
"aliases":[
"m"
],
"description":"The declaring NgModule."
},
{
"name":"name",
"type":"string",
"description":"The name of the component.",
"positional":0
},
{
"name":"prefix",
"type":"string",
"aliases":[
"p"
],
"description":"The prefix to apply to the generated component selector."
},
{
"name":"project",
"type":"string",
"description":"The name of the project."
},
{
"name":"selector",
"type":"string",
"description":"The HTML selector to use for this component."
},
{
"name":"skip-import",
"type":"boolean",
"default":false,
"description":"Do not import this component into the owning NgModule."
},
{
"name":"skip-selector",
"type":"boolean",
"default":false,
"description":"Specifies if the component should have a selector or not."
},
{
"name":"skip-tests",
"type":"boolean",
"default":false,
"description":"Do not create \"spec.ts\" test files for the new component."
},
{
"name":"standalone",
"type":"boolean",
"default":false,
"description":"Whether the generated component is standalone."
},
{
"name":"style",
"type":"string",
"default":"css",
"enum":[
"css",
"scss",
"sass",
"less",
"none"
],
"description":"The file extension or preprocessor to use for style files, or 'none' to skip generating the style file."
},
{
"name":"type",
"type":"string",
"default":"Component",
"description":"Adds a developer-defined type to the filename, in the format \"name.type.ts\"."
},
{
"name":"view-encapsulation",
"type":"string",
"aliases":[
"v"
],
"enum":[
"Emulated",
"None",
"ShadowDom"
],
"description":"The view encapsulation strategy to use in the new component."
}
],
"aliases":[
"c"
],
"deprecated":false
},
{
"name":"config",
"command":"config [type]",
"shortDescription":"Generates a configuration file in the given project.",
"options":[
{
"name":"project",
"type":"string",
"description":"The name of the project."
},
{
"name":"type",
"type":"string",
"enum":[
"karma",
"browserslist"
],
"description":"Specifies which type of configuration file to create.",
"positional":0
}
],
"aliases":[],
"deprecated":false
},
{
"name":"directive",
"command":"directive [name]",
"shortDescription":"Creates a new, generic directive definition in the given project.",
"options":[
{
"name":"export",
"type":"boolean",
"default":false,
"description":"The declaring NgModule exports this directive."
},
{
"name":"flat",
"type":"boolean",
"default":true,
"description":"When true (the default), creates the new files at the top level of the current project."
},
{
"name":"module",
"type":"string",
"aliases":[
"m"
],
"description":"The declaring NgModule."
},
{
"name":"name",
"type":"string",
"description":"The name of the new directive.",
"positional":0
},
{
"name":"prefix",
"type":"string",
"aliases":[
"p"
],
"description":"A prefix to apply to generated selectors."
},
{
"name":"project",
"type":"string",
"description":"The name of the project."
},
{
"name":"selector",
"type":"string",
"description":"The HTML selector to use for this directive."
},
{
"name":"skip-import",
"type":"boolean",
"default":false,
"description":"Do not import this directive into the owning NgModule."
},
{
"name":"skip-tests",
"type":"boolean",
"default":false,
"description":"Do not create \"spec.ts\" test files for the new class."
},
{
"name":"standalone",
"type":"boolean",
"default":false,
"description":"Whether the generated directive is standalone."
}
],
"aliases":[
"d"
],
"deprecated":false
},
{
"name":"enum",
"command":"enum [name]",
"shortDescription":"Generates a new, generic enum definition in the given project.",
"options":[
{
"name":"name",
"type":"string",
"description":"The name of the enum.",
"positional":0
},
{
"name":"project",
"type":"string",
"description":"The name of the project in which to create the enum. Default is the configured default project for the workspace."
},
{
"name":"type",
"type":"string",
"description":"Adds a developer-defined type to the filename, in the format \"name.type.ts\"."
}
],
"aliases":[
"e"
],
"deprecated":false
},
{
"name":"environments",
"command":"environments",
"shortDescription":"Generates and configures environment files for a project.",
"options":[
{
"name":"project",
"type":"string",
"description":"The name of the project."
}
],
"aliases":[],
"deprecated":false
},
{
"name":"guard",
"command":"guard [name]",
"shortDescription":"Generates a new, generic route guard definition in the given project.",
"options":[
{
"name":"flat",
"type":"boolean",
"default":true,
"description":"When true (the default), creates the new files at the top level of the current project."
},
{
"name":"functional",
"type":"boolean",
"default":true,
"description":"Specifies whether to generate a guard as a function."
},
{
"name":"implements",
"type":"array",
"aliases":[
"guardType"
],
"description":"Specifies which type of guard to create."
},
{
"name":"name",
"type":"string",
"description":"The name of the new route guard.",
"positional":0
},
{
"name":"project",
"type":"string",
"description":"The name of the project."
},
{
"name":"skip-tests",
"type":"boolean",
"default":false,
"description":"Do not create \"spec.ts\" test files for the new guard."
}
],
"aliases":[
"g"
],
"deprecated":false
},
{
"name":"interceptor",
"command":"interceptor [name]",
"shortDescription":"Creates a new, generic interceptor definition in the given project.",
"options":[
{
"name":"flat",
"type":"boolean",
"default":true,
"description":"When true (the default), creates files at the top level of the project."
},
{
"name":"functional",
"type":"boolean",
"default":false,
"description":"Creates the interceptor as a `HttpInterceptorFn`."
},
{
"name":"name",
"type":"string",
"description":"The name of the interceptor.",
"positional":0
},
{
"name":"project",
"type":"string",
"description":"The name of the project."
},
{
"name":"skip-tests",
"type":"boolean",
"default":false,
"description":"Do not create \"spec.ts\" test files for the new interceptor."
}
],
"aliases":[],
"deprecated":false
},
{
"name":"interface",
"command":"interface [name] [type]",
"shortDescription":"Creates a new, generic interface definition in the given project.",
"options":[
{
"name":"name",
"type":"string",
"description":"The name of the interface.",
"positional":0
},
{
"name":"prefix",
"type":"string",
"description":"A prefix to apply to generated selectors."
},
{
"name":"project",
"type":"string",
"description":"The name of the project."
},
{
"name":"type",
"type":"string",
"description":"Adds a developer-defined type to the filename, in the format \"name.type.ts\".",
"positional":1
}
],
"aliases":[
"i"
],
"deprecated":false
},
{
"name":"library",
"command":"library [name]",
"shortDescription":"Creates a new, generic library project in the current workspace.",
"options":[
{
"name":"entry-file",
"type":"string",
"default":"public-api",
"description":"The path at which to create the library's public API file, relative to the workspace root."
},
{
"name":"name",
"type":"string",
"description":"The name of the library.",
"positional":0
},
{
"name":"prefix",
"type":"string",
"aliases":[
"p"
],
"default":"lib",
"description":"A prefix to apply to generated selectors."
},
{
"name":"project-root",
"type":"string",
"description":"The root directory of the new library."
},
{
"name":"skip-install",
"type":"boolean",
"default":false,
"description":"Do not install dependency packages."
},
{
"name":"skip-package-json",
"type":"boolean",
"default":false,
"description":"Do not add dependencies to the \"package.json\" file. "
},
{
"name":"skip-ts-config",
"type":"boolean",
"default":false,
"description":"Do not update \"tsconfig.json\" to add a path mapping for the new library. The path mapping is needed to use the library in an app, but can be disabled here to simplify development."
},
{
"name":"standalone",
"type":"boolean",
"default":false,
"description":"Creates a library based upon the standalone API, without NgModules."
}
],
"aliases":[
"lib"
],
"deprecated":false
},
{
"name":"module",
"command":"module [name]",
"shortDescription":"Creates a new, generic NgModule definition in the given project.",
"options":[
{
"name":"flat",
"type":"boolean",
"default":false,
"description":"Create the new files at the top level of the current project root. "
},
{
"name":"module",
"type":"string",
"aliases":[
"m"
],
"description":"The declaring NgModule."
},
{
"name":"name",
"type":"string",
"description":"The name of the NgModule.",
"positional":0
},
{
"name":"project",
"type":"string",
"description":"The name of the project."
},
{
"name":"route",
"type":"string",
"description":"The route path for a lazy-loaded module. When supplied, creates a component in the new module, and adds the route to that component in the `Routes` array declared in the module provided in the `--module` option."
},
{
"name":"routing",
"type":"boolean",
"default":false,
"description":"Create a routing module."
},
{
"name":"routing-scope",
"type":"string",
"default":"Child",
"enum":[
"Child",
"Root"
],
"description":"The scope for the new routing module."
}
],
"aliases":[
"m"
],
"deprecated":false
},
{
"name":"pipe",
"command":"pipe [name]",
"shortDescription":"Creates a new, generic pipe definition in the given project.",
"options":[
{
"name":"export",
"type":"boolean",
"default":false,
"description":"The declaring NgModule exports this pipe."
},
{
"name":"flat",
"type":"boolean",
"default":true,
"description":"When true (the default) creates files at the top level of the project."
},
{
"name":"module",
"type":"string",
"aliases":[
"m"
],
"description":"The declaring NgModule."
},
{
"name":"name",
"type":"string",
"description":"The name of the pipe.",
"positional":0
},
{
"name":"project",
"type":"string",
"description":"The name of the project."
},
{
"name":"skip-import",
"type":"boolean",
"default":false,
"description":"Do not import this pipe into the owning NgModule."
},
{
"name":"skip-tests",
"type":"boolean",
"default":false,
"description":"Do not create \"spec.ts\" test files for the new pipe."
},
{
"name":"standalone",
"type":"boolean",
"default":false,
"description":"Whether the generated pipe is standalone."
}
],
"aliases":[
"p"
],
"deprecated":false
},
{
"name":"resolver",
"command":"resolver [name]",
"shortDescription":"Generates a new, generic resolver definition in the given project.",
"options":[
{
"name":"flat",
"type":"boolean",
"default":true,
"description":"When true (the default), creates the new files at the top level of the current project."
},
{
"name":"functional",
"type":"boolean",
"default":true,
"description":"Creates the resolver as a `ResolveFn`."
},
{
"name":"name",
"type":"string",
"description":"The name of the new resolver.",
"positional":0
},
{
"name":"project",
"type":"string",
"description":"The name of the project."
},
{
"name":"skip-tests",
"type":"boolean",
"default":false,
"description":"Do not create \"spec.ts\" test files for the new resolver."
}
],
"aliases":[
"r"
],
"deprecated":false
},
{
"name":"service",
"command":"service [name]",
"shortDescription":"Creates a new, generic service definition in the given project.",
"options":[
{
"name":"flat",
"type":"boolean",
"default":true,
"description":"When true (the default), creates files at the top level of the project."
},
{
"name":"name",
"type":"string",
"description":"The name of the service.",
"positional":0
},
{
"name":"project",
"type":"string",
"description":"The name of the project."
},
{
"name":"skip-tests",
"type":"boolean",
"default":false,
"description":"Do not create \"spec.ts\" test files for the new service."
}
],
"aliases":[
"s"
],
"deprecated":false
},
{
"name":"service-worker",
"command":"service-worker",
"shortDescription":"Pass this schematic to the \"run\" command to create a service worker",
"options":[
{
"name":"project",
"type":"string",
"description":"The name of the project."
},
{
"name":"target",
"type":"string",
"default":"build",
"description":"The target to apply service worker to."
}
],
"aliases":[],
"deprecated":false
},
{
"name":"web-worker",
"command":"web-worker [name]",
"shortDescription":"Creates a new, generic web worker definition in the given project.",
"options":[
{
"name":"name",
"type":"string",
"description":"The name of the worker.",
"positional":0
},
{
"name":"project",
"type":"string",
"description":"The name of the project."
},
{
"name":"snippet",
"type":"boolean",
"default":true,
"description":"Add a worker creation snippet in a sibling file of the same name."
"longDescription":"The command takes an optional project name, as specified in the `projects` section of the `angular.json` workspace configuration file.\nWhen a project name is not supplied, executes the `lint` builder for all projects.\n\nTo use the `ng lint` command, use `ng add` to add a package that implements linting capabilities. Adding the package automatically updates your workspace configuration, adding a lint [CLI builder](guide/cli-builder).\nFor example:\n\n```json\n\"projects\": {\n \"my-project\": {\n ...\n \"architect\": {\n ...\n \"lint\": {\n \"builder\": \"@angular-eslint/builder:lint\",\n \"options\": {}\n }\n }\n }\n}\n```\n",
"aliases":[],
"deprecated":false,
"options":[
{
"name":"configuration",
"type":"string",
"aliases":[
"c"
],
"description":"One or more named builder configurations as a comma-separated list as specified in the \"configurations\" section in angular.json.\nThe builder uses the named configurations to run the given target.\nFor more information, see https://angular.io/guide/workspace-config#alternate-build-configurations."
},
{
"name":"help",
"type":"boolean",
"description":"Shows a help message for this command in the console."
},
{
"name":"project",
"type":"string",
"description":"The name of the project to build. Can be an application or a library.",
"longDescription":"Creates and initializes a new Angular application that is the default project for a new workspace.\n\nProvides interactive prompts for optional configuration, such as adding routing support.\nAll prompts can safely be allowed to default.\n\n- The new workspace folder is given the specified project name, and contains configuration files at the top level.\n\n- By default, the files for a new initial application (with the same name as the workspace) are placed in the `src/` subfolder.\n- The new application's configuration appears in the `projects` section of the `angular.json` workspace configuration file, under its project name.\n\n- Subsequent applications that you generate in the workspace reside in the `projects/` subfolder.\n\nIf you plan to have multiple applications in the workspace, you can create an empty workspace by using the `--no-create-application` option.\nYou can then use `ng generate application` to create an initial application.\nThis allows a workspace name different from the initial app name, and ensures that all applications reside in the `/projects` subfolder, matching the structure of the configuration file.\n",
"aliases":[
"n"
],
"deprecated":false,
"options":[
{
"name":"collection",
"type":"string",
"aliases":[
"c"
],
"description":"A collection of schematics to use in generating the initial application."
"description":"Create a new initial application project in the 'src' folder of the new workspace. When false, creates an empty workspace with no initial application. You can then use the generate application command so that all applications are created in the projects folder."
},
{
"name":"defaults",
"type":"boolean",
"default":false,
"description":"Disable interactive input prompts for options with a default."
},
{
"name":"directory",
"type":"string",
"description":"The directory name to create the workspace in."
},
{
"name":"dry-run",
"type":"boolean",
"default":false,
"description":"Run through and reports activity without writing out results."
},
{
"name":"force",
"type":"boolean",
"default":false,
"description":"Force overwriting of existing files."
},
{
"name":"help",
"type":"boolean",
"description":"Shows a help message for this command in the console."
},
{
"name":"inline-style",
"type":"boolean",
"aliases":[
"s"
],
"description":"Include styles inline in the component TS file. By default, an external styles file is created and referenced in the component TypeScript file."
},
{
"name":"inline-template",
"type":"boolean",
"aliases":[
"t"
],
"description":"Include template inline in the component TS file. By default, an external template file is created and referenced in the component TypeScript file."
},
{
"name":"interactive",
"type":"boolean",
"default":true,
"description":"Enable interactive input prompts."
},
{
"name":"minimal",
"type":"boolean",
"default":false,
"description":"Create a workspace without any testing frameworks. (Use for learning purposes only.)"
},
{
"name":"name",
"type":"string",
"description":"The name of the new workspace and initial project.",
"positional":0
},
{
"name":"new-project-root",
"type":"string",
"default":"projects",
"description":"The path where new projects will be created, relative to the new workspace root."
},
{
"name":"package-manager",
"type":"string",
"enum":[
"npm",
"yarn",
"pnpm",
"cnpm"
],
"description":"The package manager used to install dependencies."
},
{
"name":"prefix",
"type":"string",
"aliases":[
"p"
],
"default":"app",
"description":"The prefix to apply to generated selectors for the initial project."
},
{
"name":"routing",
"type":"boolean",
"description":"Generate a routing module for the initial project."
},
{
"name":"skip-git",
"type":"boolean",
"aliases":[
"g"
],
"default":false,
"description":"Do not initialize a git repository."
},
{
"name":"skip-install",
"type":"boolean",
"default":false,
"description":"Do not install dependency packages."
},
{
"name":"skip-tests",
"type":"boolean",
"aliases":[
"S"
],
"default":false,
"description":"Do not generate \"spec.ts\" test files for the new project."
},
{
"name":"standalone",
"type":"boolean",
"default":false,
"description":"Creates an application based upon the standalone API, without NgModules."
},
{
"name":"strict",
"type":"boolean",
"default":true,
"description":"Creates a workspace with stricter type checking and stricter bundle budgets settings. This setting helps improve maintainability and catch bugs ahead of time. For more information, see https://angular.io/guide/strict-mode"
},
{
"name":"style",
"type":"string",
"enum":[
"css",
"scss",
"sass",
"less"
],
"description":"The file extension or preprocessor to use for style files."
},
{
"name":"view-encapsulation",
"type":"string",
"enum":[
"Emulated",
"None",
"ShadowDom"
],
"description":"The view encapsulation strategy to use in the initial project."
"longDescription":"Architect is the tool that the CLI uses to perform complex tasks such as compilation, according to provided configurations.\nThe CLI commands run Architect targets such as `build`, `serve`, `test`, and `lint`.\nEach named target has a default configuration, specified by an `options` object,\nand an optional set of named alternate configurations in the `configurations` object.\n\nFor example, the `serve` target for a newly generated app has a predefined\nalternate configuration named `production`.\n\nYou can define new targets and their configuration options in the `architect` section\nof the `angular.json` file which you can run them from the command line using the `ng run` command.\n",
"aliases":[],
"deprecated":false,
"options":[
{
"name":"help",
"type":"boolean",
"description":"Shows a help message for this command in the console."
},
{
"name":"target",
"type":"string",
"description":"The Architect target to run provided in the following format `project:target[:configuration]`.",
"shortDescription":"Builds and serves your application, rebuilding on file changes.",
"aliases":[
"s"
],
"deprecated":false,
"options":[
{
"name":"allowed-hosts",
"type":"array",
"description":"List of hosts that are allowed to access the dev server."
},
{
"name":"browser-target",
"type":"string",
"description":"A browser builder target to serve in the format of `project:target[:configuration]`. You can also pass in more than one configuration name as a comma-separated list. Example: `project:target:production,staging`."
},
{
"name":"configuration",
"type":"string",
"aliases":[
"c"
],
"description":"One or more named builder configurations as a comma-separated list as specified in the \"configurations\" section in angular.json.\nThe builder uses the named configurations to run the given target.\nFor more information, see https://angular.io/guide/workspace-config#alternate-build-configurations."
},
{
"name":"disable-host-check",
"type":"boolean",
"default":false,
"description":"Don't verify connected clients are part of allowed hosts."
},
{
"name":"force-esbuild",
"type":"boolean",
"default":false,
"description":"Force the development server to use the 'browser-esbuild' builder when building. This is a developer preview option for the esbuild-based build system."
},
{
"name":"help",
"type":"boolean",
"description":"Shows a help message for this command in the console."
},
{
"name":"hmr",
"type":"boolean",
"default":false,
"description":"Enable hot module replacement."
},
{
"name":"host",
"type":"string",
"default":"localhost",
"description":"Host to listen on."
},
{
"name":"live-reload",
"type":"boolean",
"default":true,
"description":"Whether to reload the page on change, using live-reload."
},
{
"name":"open",
"type":"boolean",
"aliases":[
"o"
],
"default":false,
"description":"Opens the url in default browser."
},
{
"name":"poll",
"type":"number",
"description":"Enable and define the file watching poll time period in milliseconds."
},
{
"name":"port",
"type":"number",
"default":4200,
"description":"Port to listen on."
},
{
"name":"project",
"type":"string",
"description":"The name of the project to build. Can be an application or a library.",
"positional":0
},
{
"name":"proxy-config",
"type":"string",
"description":"Proxy configuration file. For more information, see https://angular.io/guide/build#proxying-to-a-backend-server."
},
{
"name":"public-host",
"type":"string",
"description":"The URL that the browser client (or live-reload client, if enabled) should use to connect to the development server. Use for a complex dev server setup, such as one with reverse proxies."
},
{
"name":"serve-path",
"type":"string",
"description":"The pathname where the application will be served."
},
{
"name":"ssl",
"type":"boolean",
"default":false,
"description":"Serve using HTTPS."
},
{
"name":"ssl-cert",
"type":"string",
"description":"SSL certificate to use for serving HTTPS."
},
{
"name":"ssl-key",
"type":"string",
"description":"SSL key to use for serving HTTPS."
},
{
"name":"verbose",
"type":"boolean",
"description":"Adds more details to output logging."
"longDescription":"Takes the name of the project, as specified in the `projects` section of the `angular.json` workspace configuration file.\nWhen a project name is not supplied, it will execute for all projects.\n",
"aliases":[
"t"
],
"deprecated":false,
"options":[
{
"name":"browsers",
"type":"string",
"description":"Override which browsers tests are run against."
},
{
"name":"code-coverage",
"type":"boolean",
"default":false,
"description":"Output a code coverage report."
},
{
"name":"code-coverage-exclude",
"type":"array",
"description":"Globs to exclude from code coverage."
},
{
"name":"configuration",
"type":"string",
"aliases":[
"c"
],
"description":"One or more named builder configurations as a comma-separated list as specified in the \"configurations\" section in angular.json.\nThe builder uses the named configurations to run the given target.\nFor more information, see https://angular.io/guide/workspace-config#alternate-build-configurations."
},
{
"name":"exclude",
"type":"array",
"description":"Globs of files to exclude, relative to the project root."
},
{
"name":"help",
"type":"boolean",
"description":"Shows a help message for this command in the console."
},
{
"name":"include",
"type":"array",
"description":"Globs of files to include, relative to project root. \nThere are 2 special cases:\n - when a path to directory is provided, all spec files ending \".spec.@(ts|tsx)\" will be included\n - when a path to a file is provided, and a matching spec file exists it will be included instead."
},
{
"name":"inline-style-language",
"type":"string",
"default":"css",
"enum":[
"css",
"less",
"sass",
"scss"
],
"description":"The stylesheet language to use for the application's inline component styles."
},
{
"name":"karma-config",
"type":"string",
"description":"The name of the Karma configuration file."
},
{
"name":"main",
"type":"string",
"description":"The name of the main entry-point file."
},
{
"name":"poll",
"type":"number",
"description":"Enable and define the file watching poll time period in milliseconds."
},
{
"name":"polyfills",
"type":"string",
"description":"Polyfills to be included in the build."
},
{
"name":"preserve-symlinks",
"type":"boolean",
"description":"Do not use the real path when resolving modules. If unset then will default to `true` if NodeJS option --preserve-symlinks is set."
},
{
"name":"progress",
"type":"boolean",
"default":true,
"description":"Log progress to the console while building."
},
{
"name":"project",
"type":"string",
"description":"The name of the project to build. Can be an application or a library.",
"positional":0
},
{
"name":"reporters",
"type":"array",
"description":"Karma reporters to use. Directly passed to the karma runner."
},
{
"name":"source-map",
"type":"boolean",
"default":true,
"description":"Output source maps for scripts and styles. For more information, see https://angular.io/guide/workspace-config#source-map-configuration."
},
{
"name":"ts-config",
"type":"string",
"description":"The name of the TypeScript configuration file."
},
{
"name":"watch",
"type":"boolean",
"description":"Run build when files change."
},
{
"name":"web-worker-ts-config",
"type":"string",
"description":"TypeScript configuration for Web Worker modules."
"longDescription":"Perform a basic update to the current stable release of the core framework and CLI by running the following command.\n\n```\nng update @angular/cli @angular/core\n```\n\nTo update to the next beta or pre-release version, use the `--next` option.\n\nTo update from one major version to another, use the format\n\n```\nng update @angular/cli@^<major_version> @angular/core@^<major_version>\n```\n\nWe recommend that you always update to the latest patch version, as it contains fixes we released since the initial major release.\nFor example, use the following command to take the latest 10.x.x version and use that to update.\n\n```\nng update @angular/cli@^10 @angular/core@^10\n```\n\nFor detailed information and guidance on updating your application, see the interactive [Angular Update Guide](https://update.angular.io/).\n",
"aliases":[],
"deprecated":false,
"options":[
{
"name":"allow-dirty",
"type":"boolean",
"default":false,
"description":"Whether to allow updating when the repository contains modified or untracked files."
},
{
"name":"create-commits",
"type":"boolean",
"aliases":[
"C"
],
"default":false,
"description":"Create source control commits for updates and migrations."
},
{
"name":"force",
"type":"boolean",
"default":false,
"description":"Ignore peer dependency version mismatches."
},
{
"name":"from",
"type":"string",
"description":"Version from which to migrate from. Only available with a single package being updated, and only with 'migrate-only'."
},
{
"name":"help",
"type":"boolean",
"description":"Shows a help message for this command in the console."
},
{
"name":"migrate-only",
"type":"boolean",
"description":"Only perform a migration, do not update the installed version."
},
{
"name":"name",
"type":"string",
"description":"The name of the migration to run. Only available with a single package being updated, and only with 'migrate-only' option."
},
{
"name":"next",
"type":"boolean",
"default":false,
"description":"Use the prerelease version, including beta and RCs."
},
{
"name":"packages",
"type":"array",
"default":[],
"description":"The names of package(s) to update.",
"positional":0
},
{
"name":"packages",
"type":"string",
"default":[],
"description":"The names of package(s) to update.",
"positional":0
},
{
"name":"to",
"type":"string",
"description":"Version up to which to apply migrations. Only available with a single package being updated, and only with 'migrate-only' option. Requires 'from' to be specified. Default to the installed version detected."
},
{
"name":"verbose",
"type":"boolean",
"default":false,
"description":"Display additional details about internal operations during execution."
@name`inject()` must be called from an injection context
@category runtime
@shortDescription`inject()` must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`.
@shortDescription`inject()` must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `EnvironmentInjector#runInContext`.
@description
You see this error when you try to use the [`inject`](api/core/inject) function outside of the allowed [injection context](guide/dependency-injection-context). The injection context is available during the class creation and initialization. It is also available to functions
used with `runInInjectionContext`.
You see this error when you try to use the `inject()` function outside of the allowed injection context. The injection context is available during the class creation and initialization. It is also available to functions
used with `EnvironmentInjector#runInContext`.
In practice the `inject()` calls are allowed in a constructor, a constructor parameter and a field initializer:
@@ -23,7 +23,7 @@ export class Car {
}
```
It is also legal to call [`inject`](api/core/inject) from a provider's factory:
It is also legal to call `inject` from a provider's factory:
```typescript
providers: [
@@ -35,7 +35,7 @@ providers: [
]
```
Calls to the [`inject`](api/core/inject) function outside of the class creation or `runInInjectionContext` will result in error. Most notably, calls to `inject()` are disallowed after a class instance was created, in methods (including lifecycle hooks):
Calls to the `inject()` function outside of the class creation or `runInContext` will result in error. Most notably, calls to `inject()` are disallowed after a class instance was created, in methods (including lifecycle hooks):
```typescript
@Component({ ... })
@@ -52,15 +52,7 @@ export class CarComponent {
Work backwards from the stack trace of the error to identify a place where the disallowed call to `inject()` is located.
To fix the error move the [`inject`](api/core/inject) call to an allowed place (usually a class constructor or a field initializer).
**Note:** If you are running in a test context, `TestBed.runInInjectionContext` will enable `inject()` to succeed.
```typescript
TestBed.runInInjectionContext(() => {
// ...
});
```
To fix the error move the `inject()` call to an allowed place (usually a class constructor or a field initializer).
@shortDescription Missing JSONP support in HttpClient configuration
@description
Angular produces this error when you attempt a `JSONP` request without providing the necessary support for it in the `HttpClient` configuration.
To enable `JSONP` support, you can do one of the following:
- add the `withJsonpSupport()` as an argument during the `provideHttpClient` function call (e.g. `provideHttpClient(withJsonpSupport())`) when `bootstrapApplication` is used
- import the `HttpClientJsonpModule` in your root AppModule, when NgModule-based bootstrap is used.
@debugging
Make sure that the JSONP support is added into your application either by calling the `withJsonpSupport()` function (when the `provideHttpClient()` is used) or importing the `HttpClientJsonpModule` module as described above.
See [Make a JSONP request](/guide/http-make-jsonp-request) for more info.
@shortDescription During hydration, Angular expected a DOM node, but either the actual DOM was different or was not found.
@description
This error means that during the hydration process, Angular expected a DOM structure as rendered and annotated during server side rendering. However, on the client, the DOM tree was different than the server rendered DOM tree.
This error typically happens due to direct DOM manipulation using native browser APIs that alter the DOM structure outside of what Angular produced. It will also occur if you use `innerHTML` or `outerHTML` to set HTML content, which similarly alters the DOM structure outside of what Angular produced. You can resolve this by refactoring the component to use native Angular APIs instead of native APIs. If that's not possible, you can add the `ngSkipHydration` attribute to your component's host node, which will disable hydration for the component and its children. `ngSkipHydration` should only be used as a last resort and should be considered a bug that needs to be fixed.
More information about hydration can be found in [this guide](guide/hydration).
The following example will trigger the error.
```typescript
@Component({
standalone: true,
selector: 'example-cmp',
template: '<div><span>world</span></div>',
})
export class ExampleCmp {
hostElement = inject(ElementRef).nativeElement;
ngOnInit() {
// Create a new <p> element with the `Hello` text inside
const newNode = document.createElement('p');
newNode.innerHTML = 'Hello';
// Insert the <p> before the first element. Since Angular has no information
// about the <p> element, it will be looking for the <div> element at the first
// element position instead. As a result, a hydration mismatch error would be
// thrown. Instead, update component's template to create the <p> element.
The error message in the developer console should contain information on a specific part of the application's DOM structure that is causing the problem. Review that part of the application for hydration-related errors, such as direct DOM manipulation using native APIs.
Check that your template has valid HTML structure. See more information in the [hydration guide](guide/hydration#valid-html-structure).
You can add the `ngSkipHydration` attribute to your component host node as a possible workaround.
If your application works in development environment, but you see hydration errors in production builds, make sure that the generated HTML that is delivered to a browser contains comment nodes produced by Angular during the rendering on the server. Those comment nodes are used by Angular runtime as anchors for view containers (with and without hydration) and hydration process expects them to be present at their original locations. If you have a custom logic to remove comment nodes from the HTML generated by the server-side rendering or you've configured your CDN to remove them before serving the content - disable the comment nodes removal and check if hydration errors are gone.
@shortDescription During hydration, Angular expected more sibling DOM nodes to be present than what was found.
@description
This error is similar to the [error NG0500](errors/NG0500), but it indicates that Angular hydration process expected more siblings present in the DOM structure at a particular location. Please refer to the [error NG0500](errors/NG0500) page for additional information.
@debugging
See the [error NG0500](errors/NG0500) for more information on how to debug this error.
@shortDescription During hydration, Angular expected to find a DOM node, but it did not exist.
@description
This error is similar to the [error NG0500](errors/NG0500), but it indicates that Angular hydration process expected a node to be present in the DOM structure at a particular location and none was found. Please refer to the [error NG0500](errors/NG0500) page for additional information.
@debugging
See the [error NG0500](errors/NG0500) for more information on how to debug this error.
@name Hydration Unsupported Projection of DOM Nodes
@category runtime
@shortDescription During serialization, Angular detected DOM nodes that were created outside of Angular's context and used for content projection.
@description
This error means that during the server side serialization process, Angular encountered nodes that were created outside of Angular's context (i.e. using native DOM APIs) and found those nodes were provided as projectible nodes. They were likely provided using `ViewContainerRef.createComponent` or `createComponent` APIs. Angular hydration does not support this use case.
More information about hydration can be found in [this guide](guide/hydration).
The error message in the developer console should contain information on a specific part of the application's DOM structure that is causing the problem. Review that part of the application for hydration-related errors, such as direct DOM manipulation using native APIs.
You can add the `ngSkipHydration` attribute to your component host node as a possible workaround.
@name Skip hydration flag is applied to an invalid node
@category runtime
@shortDescription The ngSkipHydration attribute was added to an element that is not a component host.
@description
This error occurs when the `ngSkipHydration` attribute was added to an inappropriate DOM node. The `ngSkipHydration` attribute can only be applied to component host nodes either directly in the template or via a host binding. It cannot be applied to other DOM nodes and will have no effect if done so other than causing this error.
More information about hydration can be found in [this guide](guide/hydration).
The following examples will trigger the error.
**Example 1**
In this example, the `ngSkipHydration` attribute is applied to a `<div>` using host bindings of a directive. Since the `<div>` doesn't act as a component host node, Angular will throw an error.
```typescript
@Directive({
standalone: true,
selector: '[dir]',
host: {ngSkipHydration: 'true'},
})
class Dir {
}
@Component({
standalone: true,
selector: 'app',
imports: [Dir],
template: `
<div dir></div>
`,
})
class SimpleComponent {
}
```
**Example 2**
In this example, the `ngSkipHydration` is applied to a `<div>` as an attribute via a template.
Since the `<div>` doesn't act as a component host node, Angular will throw an error.
```typescript
@Component({
standalone: true,
selector: 'app',
template: `
<div ngSkipHydration></div>
`,
})
class SimpleComponent {
}
```
@debugging
Remove the `ngSkipHydration` attribute from any invalid DOM nodes. Alternatively, move the `ngSkipHydration` attribute to the component host node either in a template or via a host binding.
@shortDescription NgZone remains unstable after a long period of time
@description
This warning occurs when hydration is enabled on the client but the NgZone remains unstable for a long period of time.
The {@link ApplicationRef#isStable} API uses NgZone to report when an application becomes `stable` and `unstable`. An application is considered stable when there are no pending microtasks or macrotasks.
Angular Hydration relies on a signal from Zone.js when it becomes stable inside an application:
* during the server-side rendering (SSR) to start the serialization process
* in a browser this signal is used to start the post-hydration cleanup to remove DOM nodes that remained unclaimed
This warning is displayed when the `ApplicationRef.isStable()` doesn't emit `true` within 10 seconds. If this is intentional and your application becomes stable later, you can ignore this warning.
**Macrotasks**
Macrotasks include functions like `setInterval`, `setTimeout`, `requestAnimationFrame` etc.
If one of these functions is called in the initialization phase of the app or the bootstrapped components, the application will remain unstable.
```typescript
@Component({
standalone: true,
selector: 'app',
template: ``,
})
class SimpleComponent {
constructor() {
setInterval(() => { ... }, 1000)
// or
setTimeout(() => { ... }, 10_000)
}
}
```
If these functions need to be called in the initialization phase, invoking them outside the angular zone solves the issue.
```typescript
class SimpleComponent {
constructor() {
inject(NgZone).runOutsideAngular(() => {
setInterval(() => {}, 1000);
})
}
}
```
@debugging
Verify that you don't have any long standing microtask or macrotasks.
@shortDescription Root element was not found during bootstrap.
@description
Boostraped components are defined in the `bootstrap` property of an `@NgModule` decorator or as the first parameter of `boopstrapApplication` for standalone components.
This error happens when Angular tries to boostrap one of these components but cannot find its corresponing node in the DOM.
@debugging
This issue occurs when the selector mismatches the tag
```typescript
@Component({
selector: 'my-app',
...
})
class AppComponent {}
```
```html
<html>
<app-root></app-root> <!-- Doesn't match the selector -->
@shortDescription Component ID generation collision detected
@description
When creating components, Angular generates a unique component ID for each component. This is generated using the Angular component metadata, including but not limited: selectors, the number of host bindings, class property names, view and content queries. When two components metadata are identical (often times sharing the same selector), an ID generation collision will occur.
Component IDs are used in Angular internally:
- for extra annotations of DOM nodes for style encapsulation
- during [hydration](guide/hydration) to restore an application state after [server-side rendering](guide/universal).
To avoid issues that might be caused by the component ID collision, it's recommended to resolve them as described below.
** Example of a Component ID collision **
```typescript
@Component({
selector: 'my-component',
template: 'complex-template',
})
class SomeComponent {}
@Component({
selector: 'my-component',
template: 'empty-template',
})
class SomeMockedComponent {}
```
Having these two components defined will trigger an ID generation collision and during development a warning will be displayed.
@debugging
The warning message includes the class name of the two components whose IDs are colliding.
The problem can be resolved using one of the solutions below:
1. Change the selector of one of the two components. For example by using a pseudo-selector with no effect like `:not()` and a different tag name.
```typescript
@Component({
selector: 'my-component:not(p)',
template: 'empty-template',
})
class SomeMockedComponent {}
```
2. Add an extra host attribute to one of the components.
@name Hydration with unsupported Zone.js instance.
@category runtime
@shortDescription Hydration was enabled with unsupported Zone.js instance.
@description
This warning means that the hydration was enabled for an application that was configured to use an unsupported version of Zone.js: either a custom or a "noop" one (see more info [here](api/core/BootstrapOptions#ngZone)).
Hydration relies on a signal from Zone.js when it becomes stable inside an application, so that Angular can start the serialization process on the server or post-hydration cleanup on the client (to remove DOM nodes that remained unclaimed).
Providing a custom or a "noop" Zone.js implementation may lead to a different timing of the "stable" event, thus triggering the serialization or the cleanup too early or too late. This is not yet a fully supported configuration.
If you use a custom Zone.js implementation, make sure that the "onStable" event is emitted at the right time and does not result in incorrect application behavior with hydration.
More information about hydration can be found in the [hydration guide](guide/hydration).
@@ -30,6 +32,5 @@ export class CountdownTimerComponent implements OnDestroy {
this.message=`T-${this.seconds} seconds and counting`;
}
},1000);
this.clearTimer=()=>clearInterval(interval);
}
}
Some files were not shown because too many files have changed in this diff
Show More
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Paul Gschwendtner
