question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Importing material module in cli lib with Ivy enabled doesn't work

See original GitHub issue

Not sure if this is a material bug or a cli one but it wasn’t happening with other libraries afaik.

What is the expected behavior?

You should be able to import a module like MatProgressSpinnerModule from within an NgModule in an angular cli library with the ivy renderer enabled using angular v8 beta.

What is the current behavior?

It works with ivy disabled but when you enable ivy it breaks with the following error.

Appears in the NgModule.imports of LoadingModule, but could not be resolved to an NgModule class LoadingModule is my module name within the cli library.

Building Angular Package
Building entry point '@greatcloak/utils'
Compiling TypeScript sources through ngc

BUILD ERROR
node_modules/@angular/common/common.d.ts(115,22): error TS-996002: Appears in the NgModule.imports of LoadingModule, but could not be resolved to an NgModule class
node_modules/@angular/material/progress-spinner/typings/progress-spinner-module.d.ts(1,15): error TS-996002: Appears in the NgModule.imports of LoadingModule, but could not be resolved to an NgModule class
node_modules/@angular/flex-layout/typings/module.d.ts(16,22): error TS-996002: Appears in the NgModule.imports of LoadingModule, but could not be resolved to an NgModule class

Error: node_modules/@angular/common/common.d.ts(115,22): error TS-996002: Appears in the NgModule.imports of LoadingModule, but could not be resolved to an NgModule class
node_modules/@angular/material/progress-spinner/typings/progress-spinner-module.d.ts(1,15): error TS-996002: Appears in the NgModule.imports of LoadingModule, but could not be resolved to an NgModule class
node_modules/@angular/flex-layout/typings/module.d.ts(16,22): error TS-996002: Appears in the NgModule.imports of LoadingModule, but could not be resolved to an NgModule class

    at Object.<anonymous> (/myprojectdir/_web/node_modules/ng-packagr/lib/ngc/compile-source-files.js:65:19)
    at Generator.next (<anonymous>)
    at fulfilled (/myprojectdir/_web/node_modules/ng-packagr/lib/ngc/compile-source-files.js:4:58)

node_modules/@angular/common/common.d.ts(115,22): error TS-996002: Appears in the NgModule.imports of LoadingModule, but could not be resolved to an NgModule class
node_modules/@angular/material/progress-spinner/typings/progress-spinner-module.d.ts(1,15): error TS-996002: Appears in the NgModule.imports of LoadingModule, but could not be resolved to an NgModule class
node_modules/@angular/flex-layout/typings/module.d.ts(16,22): error TS-996002: Appears in the NgModule.imports of LoadingModule, but could not be resolved to an NgModule class

Error: node_modules/@angular/common/common.d.ts(115,22): error TS-996002: Appears in the NgModule.imports of LoadingModule, but could not be resolved to an NgModule class
node_modules/@angular/material/progress-spinner/typings/progress-spinner-module.d.ts(1,15): error TS-996002: Appears in the NgModule.imports of LoadingModule, but could not be resolved to an NgModule class
node_modules/@angular/flex-layout/typings/module.d.ts(16,22): error TS-996002: Appears in the NgModule.imports of LoadingModule, but could not be resolved to an NgModule class

    at Object.<anonymous> (/myprojectdir/_web/node_modules/ng-packagr/lib/ngc/compile-source-files.js:65:19)
    at Generator.next (<anonymous>)
    at fulfilled (/myprojectdir/_web/node_modules/ng-packagr/lib/ngc/compile-source-files.js:4:58)

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV

Create a cli library with an ng module that imports a material module, enable ivy, then try and build it.

Enabled ivy renderer in your tsconfig.json

  "angularCompilerOptions": {
    "enableIvy": "ngtsc"
  }

Also doesn’t work with true which uses different mixed pipeline iirc.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/cdk": "7.3.4",
"@angular/material": "7.3.4",

"@angular/animations": "8.0.0-beta.8",
"@angular/common": "8.0.0-beta.8",
"@angular/compiler": "8.0.0-beta.8",
"@angular/core": "8.0.0-beta.8",
"@angular/flex-layout": "7.0.0-beta.23",
"@angular/forms": "8.0.0-beta.8",
"@angular/http": "8.0.0-beta.8",
"@angular/platform-browser": "8.0.0-beta.8",
"@angular/platform-browser-dynamic": "8.0.0-beta.8",
"@angular/pwa": "^0.13.5",
"@angular/router": "8.0.0-beta.8",
"@angular/service-worker": "8.0.0-beta.8",
"@angular/cli": "^8.0.0-beta.5",
"@angular/compiler-cli": "8.0.0-beta.8",
"@angular/language-service": "8.0.0-beta.8",

Is there anything else we should know?

Works fine using angular v8 beta with ivy disabled(also worked on 7.x).

It works if you import material libraries in a regular app project for some reason with ivy enabled.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:17 (3 by maintainers)

github_iconTop GitHub Comments

8reactions
mtuzinskiycommented, Jul 4, 2019

Same error with "@angular/core": "^8.2.0-next.0". This issue should be reopened @crisbeto

3reactions
jmesa-sistelcommented, Jun 18, 2019

@tcozzens Known issue. You can see it this angular doc Issue: 30565 Primeng team should change the way they build the library

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular Library with Ivy enabled fails to load - Stack Overflow
1 Answer 1 · npm uninstall -g @angular/cli · npm install -g @angular/cli@8.3.19 --check your project CLI version 3.ng_Modules delete from the ...
Read more >
Creating libraries - Angular
Angular CLI uses a tool called ng-packagr to create packages from your compiled code that can be published to npm. See Building libraries...
Read more >
What's new in Angular v12 - This Dot Labs
import { APP_INITIALIZER } from '@angular/core'; function observableInitializer() { // Before Angular v12, you have to return a Promise.
Read more >
Three Ways to Configure Modules in Your Angular App
Configuration data is information your app needs to run and may include tokens for third-party systems or settings you pass into libraries.
Read more >
Complete beginner guide to publishing an Angular library to ...
The example library used in this blog is Ivy Compatible and has been ... module for this and added it to each of...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found