X Tutup
The Wayback Machine - https://web.archive.org/web/20250605122845/https://github.com/angular/angular/issues/46007
Skip to content

Improve error message when using directives from CommonModule into @Component.imports #46007

Closed
@eneajaho

Description

@eneajaho

Which @angular/* package(s) are the source of the bug?

common

Is this a regression?

No

Description

Consider the following example:

This compiles fine. No errors are thrown by the compiler.

@Component({
	selector: 'app-root',
	template: `
		<ng-container *ngIf="true">
			<router-outlet></router-outlet>
		</ng-container>
	`,
	standalone: true,
	imports: [RouterModule],
})
export class AppComponent {

This one below throws:

@Component({
	selector: 'app-root',
	template: `
		<ng-container *ngIf="true">
			<router-outlet></router-outlet>
		</ng-container>

		<ng-container [ngTemplateOutlet]="null"></ng-container>
	`,
	standalone: true,
	imports: [RouterModule],
})
export class AppComponent {

the error:

Error: apps/test/src/app/app.component.ts:14:17 - error NG8002: Can't bind to 'ngTemplateOutlet' since it isn't a known property of 'ng-container'.
1. If 'ngTemplateOutlet' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

14   <ng-container [ngTemplateOutlet]="null"></ng-container>
                   ~~~~~~~~~~~~~~~~~~~~~~~~~

Because NgIf and NgTemplateOutlet are both directives exported by CommonModule, I thought it should also throw an error in the first example.


What we can also do here is improve the error thrown by the typechecker.

This message:
1. If 'ngTemplateOutlet' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.

Can be transformed to this (if the component is standalone):
1. If 'ngTemplateOutlet' is an Angular directive, then add 'CommonModule' to the '@Component.imports'.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 14.0.0-rc.0
Node: 16.13.1
Package Manager: npm 8.4.1 
OS: darwin arm64

Angular: 14.0.0-rc.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1400.0-rc.0
@angular-devkit/build-angular   14.0.0-rc.0
@angular-devkit/core            14.0.0-rc.0
@angular-devkit/schematics      14.0.0-rc.0
@schematics/angular             14.0.0-rc.0
rxjs                            7.5.5
typescript                      4.6.4

Anything else?

No response

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: coreIssues related to the framework runtimebugcore: directive matchingcross-cutting: standaloneIssues related to the NgModule-less worldhotlist: error messages

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions

    X Tutup