"Value at position 4 in the NgModule.imports of MyCommonLibraryModule is not a reference" when importing an Angular 9 library

Viewed 11780

I have two Angular projects that share common code through an Angular library. I ran ng update in both projects and my Angular library to try to upgrade from Angular 8 to 9. The migration scripts changed my tsconfig.app.json file from

  "include": [
    "../src/**/*"
  ]

to

  "files": [
    "main.ts",
    "polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]

Angular's migration guide states

We have updated the tsconfig.app.json to limit the files compiled. If you rely on other files being included in the compilation, such as a typings.d.ts file, you need to manually add it to the compilation.

When I tried to run my app (ng serve from one of the projects that consumes the library), I got an error

ERROR in Failed to compile entry-point my-common-library (module as esm5) due to compilation errors:
node_modules/my-common-library/fesm5/my-common-library.js:5207:30 - error NG1010: Value at position 4 in the NgModule.imports of MyCommonLibraryModule is not a reference: [object Object]

5207                     imports: [
                                  ~
5208                         CommonModule,
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ...
5225                         MatAutocompleteModule
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
5226                     ],
     ~~~~~~~~~~~~~~~~~~~~~

If I replace my library's tsconfig.app.json back to

  "include": [
    "../src/**/*"
  ]

then everything works great. So I guess my questions are

  1. Is ng update not meant to work with libraries?
  2. Is this a bug?
  3. Is my "fix" OK or am I missing out on some Angular 9 optimizations? Is there a better way?
1 Answers

As per the documents https://update.angular.io/#8.0:9.0 we you should import deeply from the specific component

import {MatAutocompleteModule} from '@angular/material/autocomplete';
@NgModule({
imports: [
MatAutocompleteModule
]
Related