Dynamic create NgModule component facing ng serve compile error

[keatkeat87]

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

compiler-cli

Is this a regression?

No

Description

I'm trying createComponent function.
The Docs says it also works with NgModule components, but I got a compile error.

reproduction steps:

1. ng new dynamic-create-ng-module-component-bug --skip-tests --routing=false --ssr=false
2. cd dynamic-create-ng-module-component-bug\src\app
3. create Test module, Test1 and Test2 components.
   ng g m test & ng g c test/test1 --standalone=false -m=test & ng g c test/test2 --standalone=false -m=test
4. use <app-test1 /> in test2.component.html

<p>test2 works!</p>
<app-test1 />

5. create Test2Component in App by createComponent function

export class AppComponent {
  title = 'dynamic-create-ng-module-component-bug';
  constructor() {
    createComponent(Test2Component, {
      environmentInjector: inject(EnvironmentInjector),
    });
  }
}

6. run ng serve. now will get a error: [ERROR] NG8001: 'app-test1' is not a known element
7. import TestModule in app.component.ts but without add it into App @Component.imports

import { Component, EnvironmentInjector, createComponent, inject } from '@angular/core';
import { Test2Component } from './test/test2/test2.component';
import { TestModule } from './test/test.module'; // import TestModule

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
  imports: [] // no need put TestModule into imports array
})
export class AppComponent {
  title = 'dynamic-create-ng-module-component-bug';
  constructor() {
    createComponent(Test2Component, {
      environmentInjector: inject(EnvironmentInjector),
    });
  }
}

8. run ng serve again, now it works!

I am not 100% sure it is a bug, but it looks not so logical and the Docs said

Note: the example uses standalone components, but the function can also be used for non-standalone components (declared in an NgModule) as well.

so I made this bug report.

Please provide a link to a minimal reproduction of the bug

https://github.com/keatkeat87/dynamic-create-ng-module-component-bug

Please provide the exception or error you saw

X [ERROR] NG8001: 'app-test1' is not a known element:
1. If 'app-test1' is an Angular component, then verify that it is part of this module.
2. If 'app-test1' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. [plugin angular-compiler]

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

Angular CLI: 17.2.0-next.1
Node: 18.17.0
Package Manager: yarn 1.22.19
OS: win32 x64

Angular: 17.2.0-next.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1702.0-next.1
@angular-devkit/build-angular   17.2.0-next.1
@angular-devkit/core            17.2.0-next.1
@angular-devkit/schematics      17.2.0-next.1
@schematics/angular             17.2.0-next.1
rxjs                            7.8.1
typescript                      5.3.3
zone.js                         0.14.3

Anything else?

No response

[JeanMeche]

Your TestModule is not imported. Adding it to your AppComponent fixe the issue.

[keatkeat87]

Thank you for your quick reply. I know how to fix the issue, as demonstrated in step 7.
but I wonder why Angular docs does not specifically highlight this.
And it is not so logical to import TestModule but never used it can make the compiler work properly.
it made sense if we need to import TestModule and put into the App @Component.imports array.

can you explain to me in more detail or give me a direction to learn about this part?
the Angular learning curve is steep🙁

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}