Useful or not, from you.
angular Issue after migrating to ANgular 9 - error NG6001: Cannot declare 'Button' in an NgModule as it's not a part of the current compilation.

Hi,

I am facing an issue after migrating to Angular 9 - error NG6001: Cannot declare 'Button' in an NgModule as it's not a part of the current compilation.

Is this a regression?

Yes, with Angular 8 we were able to load Angular library and import only components which are needed, not the entire module.

Description

I have an Angular 9 application (Ivy Compiled) which uses Angular 9 Library (View Engine/ Non Ivy compiled). When importing the module I am able to use the components and directives inside the library. But when I tried to import the component or directive directly then I am getting an error.

error NG6001: Cannot declare 'Button' in an NgModule as it's not a part of the current compilation.

Before migrating to Angular 9 I was able to import individual components and controls from Angular Library(v8).

Why we need to import individual components? We would like to reduce the types imported to support tree shaking. Assumption is the library consumers will get the package size according to the number of components used from the Angular Library.

What we observed is when we import module we will end up adding the contents of the entire module.

🔥 Exception or Error

<pre><code> Warning: Entry point '@ourlibrary/angular' contains deep imports into 'D:/ourlibrary/temp10/node_modules/@ourlibrary/core/button'. This is probably not a problem, but may cause the compilation of entry points to be out of order.

ERROR in src/app/app.module.ts:10:5 - error NG6001: Cannot declare 'Button' in an NgModule as it's not a part of the current compilation.

10 Button ~~~~~~

node_modules/@ourlibrary/angular/lib/button.component.d.ts:5:22 5 export declare class Button { ~~~~~~ 'Button' is declared here. src/app/app.component.html:1:1 - error NG8001: 'our-button' is not a known element:

  1. If 'our-button' is an Angular component, then verify that it is part of this module.
  2. If 'our-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

1 <our-button label="Jaba"></our-button>


src/app/app.component.ts:5:16
  5   templateUrl: './app.component.html',
                   ~~~~~~~~~~~~~~~~~~~~~~
  Error occurs in the template of component AppComponent.

** Angular Live Development Server is listening on localhost:4200, open
your browser on http://localhost:4200/ **
</code></pre>


## 🌍  Your Environment

**Angular Version:**
<pre><code>
Angular CLI: 9.1.4
Node: 12.13.1
OS: win32 x64

Angular: 9.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.4
@angular-devkit/build-angular     0.901.4
@angular-devkit/build-optimizer   0.901.4
@angular-devkit/build-webpack     0.901.4
@angular-devkit/core              9.1.4
@angular-devkit/schematics        9.1.4
@ngtools/webpack                  9.1.4
@schematics/angular               9.1.4
@schematics/update                0.901.4
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

</code></pre>

Thanks
Basanth
That's a useful answer
Without any help

Thanks @alxhub for detailing.

As you said my worry was about tree shaking with Ivy. If it works with importing whole NgModule and Angular 9 (Ivy) production build will take care of optimization it's great.

Thanks Basanth