ErrorComponent in Standalone Project Failed with "async" pipe not found

[IanTaite]

Checklist

• I have looked into the Readme (Quickstart sample/Standalone sample) and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

The ErrorComponent in the Standalone project folder appears to be missing an import for CommonModule in its Component decorator.

I'm recommending that the following:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '@auth0/auth0-angular';
import { Observable, timer } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-error',
  templateUrl: './error.component.html',
  standalone: true
})

be changed to

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router } from '@angular/router';
import { AuthService } from '@auth0/auth0-angular';
import { Observable, timer } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-error',
  templateUrl: './error.component.html',
  imports: [CommonModule],
  standalone: true
})

I found that if you directly import AsyncPipe and re-run the app, it fails with a different error saying ngIf is not found. I took this as a sign that CommonModule should be imported not the individual Angular components and directives that ErrorComponent uses.

Reproduction

Assumptions

• you have created a SPA application in Auth0
• have the domain and client-id available,
• have set the Allowed Callback Urls, Allowed Logout Urls and the Allowed Web Origins fields to http://localhost:4200

Step 1.

Copy auth.config.json.example to auth.config.json

Step 2.

In your auth.config.json file:

• Replace the {DOMAIN} token
• Replace the {CLIENT_ID} token
• Leave the {API_IDENTIFIER} token unchanged. (What the heck is it anyway? the notes don't say.)

Step 3.

npm run start -- --open

Step 4:

Open the browser dev tools and go to the Console tab.

Step 5.

Click the blue Login button in the head of the Angular app page.

Observe the console now has the following error:

"ERROR Error: NG0302: The pipe 'async' could not be found in the 'ErrorComponent' component. Verify that it is included in the '@Component.imports' of this component.

Step 6.

Make the changes I've suggested to ErrorComponent.ts

Step 7.

Repeat step 5.

Step 8.

Observe

• the console is free of errors
• The Angular UI shows a pink box with the message: "Service not found: {API_IDENTIFIER}"

Whilst it is still not clear to me what I should replace the API_IDENTIFIER token with in auth.config.json, with the changes I've suggested, at least Angular does not crash and the app presents an error.

Additional context

Node 18.13.0
NPM 8.19.3
Angular CLI 17.0.5
Git repo: https://github.com/auth0-samples/auth0-angular-samples.git
Git branch: main

Sample

Standalone

Which browsers have you tested in?

Chrome

[frederikprijck]

I found that if you directly import AsyncPipe and re-run the app, it fails with a different error saying ngIf is not found. I took this as a sign that CommonModule should be imported not the individual Angular components and directives that ErrorComponent uses.

Thanks, this is something we must have missed.
Importing CommonModule is something you can do, but isn't recommended I would say. Instead, we should import what we need explicitly.

Will open a PR to fix, thanks!