For questions regarding Angular specific to version 14. Please include all relevant tags on your question; e.g., [Angular], [TypeScript], etc.
Questions tagged [angular14]
536 questions
26
votes
7 answers
Angular 14 strictly typed reactive forms - How to type FormGroup model using existing interface
I'm just playing around with new angular typed forms api and couldn't figure out how to type FormGroup without declaring specific "FormInterface" witch has to match the original one.
Maybe I'm missing something or it's just impossible to do so.
I…
hawlikus
- 311
- 1
- 3
- 9
26
votes
3 answers
How to add BrowserAnimationsModule or NoopAnimationsModule to Standalone Component?
When I add either a BrowserAnimationsModule or a NoopAnimationsModule to the imports array of my Standalone AppComponent, it breaks the application.
@Component({
standalone: true,
imports: [
CommonModule,
NoopAnimationsModule,
/* ...…
H3AR7B3A7
- 4,366
- 2
- 14
- 37
21
votes
3 answers
Typescript target warnings after Angular 15 update
I updated my angular app to Angular 15.
It builds ok - unless some warnings like:
TypeScript compiler options "target" and "useDefineForClassFields" are
set to "ES2022" and "false" respectively by the Angular CLI.
My tsconfig.json sets the target…
Konrad
- 4,329
- 10
- 54
- 88
17
votes
6 answers
Cannot update a project from Angular 13 to 14
I have a project which uses Angular 13 and I want to update it to Angular 14.
When I try to update with:
ng update @angular/core@14 @angular/cli@14
I get:
Package "@angular-eslint/schematics" has an incompatible peer dependency to "@angular/cli"…
Wain2021
- 299
- 1
- 4
- 12
13
votes
1 answer
How to indicate that all fields are not optional in typed form group
As of Angular 14, reactive forms are strictly typed by default (Typed Forms). This is great. I have implemented a simple login form like below
form = this.fb.group({
username: ['', [Validators.required]],
password: ['',…
Owen Kelvin
- 14,054
- 10
- 41
- 74
13
votes
2 answers
How to import standalone components from a lib in Angular 14?
Angular 14 introduced new standalone components, which doesn't require any module to be used. How can such components be used if provided in a library? In standard, non-standalone components, we first had to import a given module. How Angular will…
Karol
- 223
- 1
- 3
- 8
12
votes
5 answers
Emit attempted before Angular Webpack plugin initialization after webpack5 build
I'm using Angular 14 and Webpack version: ^5.58.1.
Below is the config:
webpack.congif.js
const webpackPlugin = require('@ngtools/webpack').AngularWebpackPlugin;
module.exports = {
mode: 'development',
devtool: "source-map",
entry: {
main:…
Rohit More
- 121
- 1
- 1
- 4
10
votes
3 answers
FormBuilder with strongly typed form in ng14
I have the following form:
const enum Fields {
FirstName = 'firstName',
LastName = 'lastName'
}
interface FormType {
[Fields.FirstName]: FormControl;
[Fields.LastName]: FormControl;
}
public form!:…
ssougnez
- 5,315
- 11
- 46
- 79
8
votes
6 answers
Angular 14 typed forms - initial value for number controls
Typed forms are great but I wonder how to initially display a form control with type 'number' as empty input field. I would like to keep my controls as nonNullable as they are required in my form but it excludes using null as initial value which was…
Miłosz Rutkowski
- 91
- 1
- 5
8
votes
3 answers
Module not found: Error: Can't resolve 'url' in webpack 5/Angular 14
While running a project with [deepstream.io-client-js][1] installed in angular 14, getting following error.
[1]: https://www.npmjs.com/package/deepstream.io-client-js
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by…
Prashant Singh
- 611
- 1
- 5
- 14
8
votes
3 answers
Component imports must be standalone components, directives, pipes, or must be NgModules
I want to use ngx-avatar in angular standalone component v14.
I use it in the template and I was imported it in the component imports.
But I got error message:
Component imports must be standalone components, directives, pipes, or must be…
Jon Sud
- 10,211
- 17
- 76
- 174
7
votes
1 answer
Angular14: What is the official way to support older browsers?
What is the "Angular way" of supporting old browsers?
By default an Angular 14 app (built with angular-cli) supports only 20% of the browsers (browsersl.ist).
Despite reading the relevant documentation, it is not clear to me how to enable support…
Nikoletta Petrou
- 129
- 2
- 8
7
votes
1 answer
Angular 14 - How to specify a form control is not undefined
Say I have a form:-
searchForm = new FormGroup({
SearchBox = new FormControl('', {nonNullable: true});
)}
And I try to do this:-
this.Query = this.searchForm.SearchBox.value;
The type of the Query property is a string, I get the…
orangejuice
- 183
- 1
- 13
7
votes
2 answers
Upgrade from Angular 13 to 14 - routing problem -Error: NG04014
I get this error Error: NG04014: Invalid configuration of route 'inspect//': redirectTo and canActivate cannot be used together. Redirects happen before activation so canActivate will never be executed. after upgrading angular 13 to 14. Anyone can…
Zina El Nahel
- 71
- 1
- 2
6
votes
1 answer
How to import not standalone components to a standalone component in Angular 14+
I would like to know how to import a non-standalone component into a standalone component, given that the non-standalone component is being declared in an ngModule.
Lucas Andrade
- 71
- 1
- 5