javascript - What is the meaning of error NG02100 in Angular? - Stack Overflow

admin管理员组

文章数量:1446756

Problem

Since some time we get an Error: NG02100 in our app. My problem is that I have no idea what is going and everything is working except one item in the navbar, but which has the identical code to the other components.

I tried checking the docs, but the error is not documented there. Did anybody else have this error and can help out?

We use these Angular packages in our app for reference:

"@angular/animations": "^13.2.1",
"@angular/common": "^13.2.1",
"@angular/compiler": "^13.2.1",
"@angular/core": "^13.2.1",
"@angular/forms": "^13.2.1",
"@angular/localize": "^13.2.1",
"@angular/platform-browser": "^13.2.1",
"@angular/platform-browser-dynamic": "^13.2.1",
"@angular/router": "^13.2.1",
"@angular/service-worker": "^13.2.1",
"@angular-devkit/architect": "^0.1302.2",
"@angular-devkit/build-angular": "^13.2.2",
"@angular-devkit/core": "^13.2.2",
"@angular-devkit/schematics": "^13.2.2",
"@angular-eslint/eslint-plugin": "~1.0.0",
"@angular-eslint/eslint-plugin-template": "~1.0.0",
"@angular-eslint/template-parser": "~1.0.0",
"@angular/cli": "^13.2.2",
"@angular/compiler-cli": "^13.2.1",
"@angular/language-service": "^13.2.1",

Problem

Since some time we get an Error: NG02100 in our app. My problem is that I have no idea what is going and everything is working except one item in the navbar, but which has the identical code to the other components.

I tried checking the docs, but the error is not documented there. Did anybody else have this error and can help out?

We use these Angular packages in our app for reference:

"@angular/animations": "^13.2.1",
"@angular/common": "^13.2.1",
"@angular/compiler": "^13.2.1",
"@angular/core": "^13.2.1",
"@angular/forms": "^13.2.1",
"@angular/localize": "^13.2.1",
"@angular/platform-browser": "^13.2.1",
"@angular/platform-browser-dynamic": "^13.2.1",
"@angular/router": "^13.2.1",
"@angular/service-worker": "^13.2.1",
"@angular-devkit/architect": "^0.1302.2",
"@angular-devkit/build-angular": "^13.2.2",
"@angular-devkit/core": "^13.2.2",
"@angular-devkit/schematics": "^13.2.2",
"@angular-eslint/eslint-plugin": "~1.0.0",
"@angular-eslint/eslint-plugin-template": "~1.0.0",
"@angular-eslint/template-parser": "~1.0.0",
"@angular/cli": "^13.2.2",
"@angular/compiler-cli": "^13.2.1",
"@angular/language-service": "^13.2.1",

• javascript
• angular

Share Improve this question Follow asked Jun 24, 2022 at 10:10 Gh05dGh05d 8,9521111 gold badges3838 silver badges8181 bronze badges 2

• is this the ng02100 you have ? => error: ng02100: invalidpipeargument: 'unable to convert "invalid date" into a date' – jeremy-denis Commented Jun 24, 2022 at 10:13
• No, I also found the post describing this error. Unfortunately, it only says ERROR Error: NG02100 – Gh05d Commented Jun 24, 2022 at 10:50

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 14

This is something related to the DatePipe of Angular.

https://github.com/angular/angular/blob/606d94299ac929243e8fa10fe7e00dee6d40064b/goldens/public-api/common/errors.md

https://github.com/angular/angular/search?q=INVALID_PIPE_ARGUMENT

This might be helpful as well. https://github.com/angular/angular/issues/20286

Solution

Our problem was that a service returned an incorrect object which the component could not pass. That caused the error for us. So basically the component received undefined.

I got this error when I used a number pipe on a string

{{someStr | number: '1.0-2'}} // Error: NG02100

An NG02100 error might also be masking an NG0701 error which is a "missing locale data" error. You can confirm this using the Developer Tools of your browser, by putting a breakpoint in the transform call near the end of the stacktrace, and by running the offending line outside of its try block. If an NG0701 error is raised, try one of these solutions:

• Either you forgot --localize in ng build --localize
• or you can see this question for other solutions

If this doesn't help, take another look at all the steps taken in the Angular i18n docs.

NG02100 means that one of Angular's built-in pipes was used with invalid arguments.

Generally, try to reproduce the error in dev mode, it will give you a proper stack trace and the name of the affected pipe.

In my case the problem was that I used the async pipe on a string:

{{ 'someString' | async }}

When you try to extend pipe (Extends DecimalPipe) you will call super() with locale string name, for example:

super('en')

本文标签： javascriptWhat is the meaning of error NG02100 in AngularStack Overflow