Limitations
How to fix this limitation:
Code:
<div>
<ng-content></ng-content>
<ng-content></ng-content>
</div>
Output:
<div>
<!-- Only displays one <ng-content> -->
</div>
The Solution: Angular does not support one component displaying multiple children. Idk, use another framework, or find a way you don't need to display multiple children if possible (and sometimes it won't be possible).
Code: <p *ngIf='example?.property'>{{example.property | date : 'MMM y'}}</p>
Error Message: Object is possibly 'null' or 'undefined'.
Context: The error is highlighting the example.property before the date pipe.
Solution: Assuming the property is a required property, we just need to check if example is defined. Apparently when adding the example?.property property, type safety stopped working.
How to fix this:
Code:
<p
[ngStyle]="{
'color': colorVariable,
'background-color': backgroundColorVariable,
}"
>
Hello World!
</p>
Error Message: Error: Errors during JIT compilation of template for TextComponent: Parser Error: Unexpected token }, expected identifier, keyword, or string at column 62 in [{
"color": true,
"background-color": true,
}] in ng:///TextComponent/template.html@8:13
Solution: Remove the trailing comma from the ngStyle object.
How to fix this build error:
Code:
@Component({
selector: "app-example",
template: `
<div></div>
`,
styles: [``],
})
export class ExampleComponent {}
Error Message:
./src/app/components/modals/example.component.ts.css?ngResource!=!./node_modules/.pnpm/@ngtools+webpack@14.1.1_@angular+compiler-cli@14.1.1_typescript@4.7.4_webpack@5.73.0/node_modules/@ngtools/webpack/src/loaders/inline-resource.js?data=!./src/app/components/modals/example.component.ts - Error: Module build failed (from ./node_modules/.pnpm/postcss-loader@7.0.1_postcss@8.4.14_webpack@5.73.0/node_modules/postcss-loader/dist/cjs.js):
Error: PostCSS received undefined instead of CSS string
Solution: Remove the string inside of the styles property. Angular does not accept an empty string for styles.
How to fix this error:
Context: You are accessing a constantly changing property from a web component in the HTML template directly. Although obvious in retrospect, the the HTML template is not displaying the current value from the web component. However, when you setInterval(() => console.log(yourWebComponent.nativeElement.yourWebComponent.value)) the HTML template updates live.
Solution: You can hook into events the web component supplies to trigger a changeDetectionRef.detectChanges().
How to fix this error:
Code:
<p>Look at this inline code:
<pre><code>hello.world()</code></pre>.
</p>
Error Message: Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags
Solution: Admit your loss and use <code style="white-space: nowrap"></code> instead. The pre tag doesn't work I guess.
How to fix this error:
Error Message:
Object is possibly 'null'.
HTML Code:
<input (click)='setValue($event.target.value)'/>
Solution:
Angular does not provide strong typescript support on the HTML side. You could wrap the input in a component with a strongly typed event emitter. Or you could ignore typescript hints with $any($event.target).value.
How to fix this error:
Context: You just created a new page and got it linked up with your router. An error appears when attempting to navigate to the page.
Code:
@Component({
selector: 'app-shop',
template: '<div></div>',
standalone: true,
})
export class ShopPage {}
Error Message: Uncaught (in promise): Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. Find more at https://angular.io/errors/NG0203
NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. Find more at https://angular.io/errors/NG0203
Solution: Delete the .angular folder and restart the Angular server.
How to fix this error:
Context: The entire temple string has a red underline.
Error Message: template must be a string. Value could not be determined statically.
Code:
@Component({
selector: 'app-example',
standalone: true,
template: `
<div>
${{price}}
</div>
`
})
export class exampleComponent {}
Solution: You must escape the dollar sign ($) with a backslash (\). This is what is should look like: \${{price}}.
Context: The app fails to initialize. The error doesn't provide a stack trace that references your code.
Error Message: FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore
Solution: Install firebase into the project.
How to fix this error:
Code:
@Component({
selector: 'app-example',
standalone: true,
imports: [CommonModule],
template: `
<div *ngFor='let value of example'>
{{value}}
</div>
`
})
export class exampleComponent {
public example: number[] | string[];
}
Error Message: Type 'string[] | number[]' is not assignable to type '(string[] & NgIterable<string>) | null | undefined'.
Solution: Union types do not work with Angular ngFor. You could try combining the types into one array, like this: (string | number)[], which may not be exactly what you want.
How to fix this error?
HTML Code:
<p>{{message | async}}</p>
JavaScript Code:
message: string | Promise<string> = '2';
Error Message:
Overload 1 of 3, '(obj: Promise<string> | Observable<string> | Subscribable<string>): string | null', gave the following error.
Solution: Honestly I never figured this out. The Angular async pipe does not support regular values. You might be forced to use RxJS run an *ngIf if possible (idk haven't tested it).
How to fix this error:
Context: We are generating a random ID on the ngAfterViewInit event.
Error Message:
ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'id': 'example-'. Current value: 'example-id123'. Expression location: ExampleComponent component. Find more at https://angular.io/errors/NG0100
Solution: Add a setTimeout to your function that generates a random ID.
How to fix this error, preferably while using single quotes for quotations:
Context: The entire div content has a red underline.
Code:
@Component({
selector: 'app-example',
standalone: true,
template: `
<div>
Look at these {{cats === 1 ? 'cat\'s' : 'cats\''}}
</div>
`
})
export class exampleComponent {}
Error Message:
Parser Error: Conditional expression cats === 1 ? 'cat' requires all 3 expressions at column 20 in [ Look at these {{cats === 1 ? 'cat's' : 'cats''}} claws ] in c:/file-path/to/the/example.component.ts@20:10
Solution: Your code will work fine if you add another backslash (\) to the cats string like this: 'cat\\'s', however that breaks the VSCode Angular language service extension. You need to add another backslash (\) to the cats string like this 'cat\\\'s'.
How to fix this error:
Context: @angular/fire and a utility folder with firebase is imported in the project. Doing a `pnpm list --depth=50 firebase` shows that only 1 version of Firebase.
Error Message: Error: ../node_modules/.pnpm/rxfire@6.0.5_firebase@9.23.0+rxjs@7.8.1/node_modules/rxfire/firestore/lite/interfaces.d.ts:8:29 - error TS2314: Generic type 'AggregateQuerySnapshot<T>' requires 1 type argument(s).
export type CountSnapshot = lite.AggregateQuerySnapshot<{
count: lite.AggregateField<number>;
10 }, any, DocumentData>;
Solution: rxfire is not compatible with the version off firebase? Fiddle with rxfire versions until it works even though @angular/fire is responsible for setting the rxfire version. Maybe this is rxfire's fault? The tsconfig `skipLibCheck` property is also a valid solution.
How to fix this problem:
Context:
You want to get the width of an element when an element is initialized. However, getting the width on the "afterViewInit" hook returns 0.
Code:
ngAfterViewInit() {
console.log(this.element.getBoundingClientRect().width) // 0
}
Solution:
The afterViewInit indicates when an element has been added to the DOM, but not when it has been styled. Angular does not have any hooks to indicate when an element is styled. You can make a custom "waitForElementStyled" promise. Another solution might be to use ResizeObserver, but that may not be wanted.
Who to fix this error:
HTML:
<div *ngIf='Array.isArray(users)'>Hi Users</div>
Error Message:
Property 'Array' does not exist on type 'ExamplePage'.
Solution:
The HTML only has access to the properties inside of the class it's defined in. Therefore you must add this to your TypeScript: isArray(arr) {Array.isArray(arr)}.
How to fix this error:
Code:
<div>
<h1>Header</h1>
<ng-content select="[slot='example-slot']"/>
</div>
Context:
Keep the select attribute. You also cannot change the order.
Error:
The header is visually displayed above the ng-content.
Solution: Changing the select attribute to "[header]" fixes it. Apparently you might not be able to use the slot attribute reliably when trying to display children.
How to fix this error:
Context: Firebase Functions is being injected in the modal that is opening.
Error Message:
Uncaught (in promise): NullInjectorError: R3InjectorError(Standalone[ThisComponentImportsFunction])[Functions -> Functions -> Functions -> Functions -> Functions]: NullInjectorError: No provider for Functions!
Solution: Add the following to your app.module.ts to allow Firebase Functions to be imported in your project: provideFunctions(() => getFunctions())
How to fix this error:
Error Message:
Type 'Observable<Promise<readonly string>>' is not assignable to type 'Observable<string>'.
Context:
Let's say we are doing something else that warrants an asynchronous pipe.
Code:
example: Observable<string>;
example = exampleSubscription.pipe(map(async (e) => {
await firstValueFrom(something[e])
}))
Solution: Use the mergeMap pipe. Yes, there's nothing inherently wrong besides:
- Lack of helpful web documentation for RxJS.
- No JSDoc.
- The problem itself stems from the fact that observable must be awaited for to be read in JavaScript.
- Something like this shouldn't be a concern.
How to fix this problem:
Error Message:
Parser Error: Unexpected token > at column 32 in [example.set(exampleList.find(e => e.itemId === $event))]
Code:
<app-example (outputEvent)='example.set(exampleList.find(e => e.itemId === $event))'/>
Solution:
I don't think Angular supports functions the best in the HTML? Apparently Angular was complaining about the use of the > symbol in the arrow function. I've fixed this by defining a function called "findByItemId" in the Typescript and consuming it in the HTML.
How to fix this error:
Context:
The type of the product is BehaviorSubject<Type | undefined>. Yes you can remove the ESLint rules, but by default Angular provided this rule.
Error Message:
Async pipe results should not be negated. Use `(observable | async) === false`, `(observable | async) === null`, or `(observable | async) === undefined` to check its value instead
Code:
<app-example [show]='!(data$ | async)'></example>
Solution:
RxJS or Angular Adds null to the type, despite being initially defined as undefined. So either change your HTML to: (data$ | async) !== undefined && (data$ | async) !== null. Or you could change your type to initialize as null so you won't need to deal with both.