4

I am trying to migrate this library https://github.com/flauc/angular2-notifications from Angular 2+ to Angular 9.

The original error was about the ModuleWithProviders that has become a generic type, so I fixed it. I also had an error described here https://github.com/angular/angular/issues/32352 which i fixed with require('@angular/compiler-cli'); and now I'm facing another error:

../node_modules/@angular/common/common.d.ts:115:22 - error NG6002: Appears in the NgModule.imports of SimpleNotificationsModule, but could not be resolved to an NgModule class

It's pretty hard for me to understand what's going on since I've never built a library before, and the build with gulp appears to be kinda hacky, since this line ngc = require('@angular/compiler-cli/src/main').main refers to a function that does not belong to the public API.

Edit:

Following the idea in the comments (and my own feeling), I tried to build without gulp:

  • Created a angular.json file
  • Separated index.ts into public_api.ts and simple-notifications.module.ts
  • Did some changes in the files and folders structure

But I still have the same exact error...

My attempt: https://github.com/youkouleley/angular2-notifications I try to build this with ng build, the scripts in package.json have not been updated

Guerric P
  • 30,447
  • 6
  • 48
  • 86
  • 2
    you might want to stop using gulp all together and move it to `ng-cli`... it will give you less headaches. the gulp file is just compiling the library. ng-cli can do the same – The Fabio Oct 20 '19 at 13:48
  • @TheFabio do you see anything that might explain the gulp choice over ng-cli? – Guerric P Oct 20 '19 at 14:14
  • I would suggest the age... gulp was at the pinnacle of its usage when angular started to have cli (angular 2). it might be that the development was done by someone with good enough gulp knowledge – The Fabio Oct 22 '19 at 07:56
  • Would echo @TheFabio. Use the angular CLI instead. It's now no longer possible to even eject from the angular CLI – C.OG Oct 22 '19 at 19:18
  • @C_Ogoo understood, I tried but it didn't solve my problem – Guerric P Oct 22 '19 at 19:37
  • are you able to share any of the code you tried with the angular cli .. is there a WIP branch in your repo? – C.OG Oct 22 '19 at 19:40
  • Is this related to how you're trying to import the angular common module? – C.OG Oct 22 '19 at 19:41
  • I added a link to my attempt in the question – Guerric P Oct 22 '19 at 20:12

2 Answers2

6

EDIT 2

Now that Angular 9 is released:

https://angular.io/guide/creating-libraries#publishing-your-library

It is not recommended to publish Ivy libraries to NPM repositories. Before publishing a library to NPM, build it using the --prod flag which will use the older compiler and runtime known as View Engine instead of Ivy.

EDIT

https://next.angular.io/guide/ivy

If you are a library author, you should keep using the View Engine compiler as of version 9. By having all libraries continue to use View Engine, you will maintain compatibility with default v9 applications that use Ivy, as well as with applications that have opted to continue using View Engine.

See the Creating Libraries guide for more on how to compile or bundle your Angular library. When you use the tools integrated into the Angular CLI or ng-packagr, your library will always be built the right way automatically.

I managed to get this working by making some alterations from the repo you posted of your attempt. Screenshot below:

terminal output

The changes made were as follows: enter image description here

The changes in package.json are irrelevant.

enableIvy:false means that your library will not be built with the Ivy Rendering engine (this is currently recommended for libraries), but doesn't prevent your library from being used in an Ivy enabled app.

Word of note that IVY is still in somewhat of an experimental mode

annotateClosureCompiler: false: Is related to this issue https://github.com/angular/angular/pull/26738

C.OG
  • 6,236
  • 3
  • 20
  • 38
  • Thanks for this. Can you elaborate on what are these options, what they do, and why they solve my problem? Also, will `"enableIvy": false` prevent me from importing the lib into an Ivy app? – Guerric P Oct 23 '19 at 07:44
  • @Guerric P no. enableIvy:false means it built with the old view engine, and it works with IVY – maxisam Feb 13 '20 at 04:12
0

I figured out what going wrong, I had a Angular 8 project (containing a library project) that I have upgraded to Angular 9 (with a lib also: ng generate library core, I created at first a new angular 9 project to compare the differences with my project made with ng 8, i figure out that there is some things missing, here is the steps I followed: - Delete node_modules - Delete dist folder - In the Angular 9 project lib there is a new file called: tsconfig.lib.prod.json 

{
  "extends": "./tsconfig.lib.json",
  "angularCompilerOptions": {
    "enableIvy": false
  }
}
  • In your angular.json add the following:
{
  ...
  "projects": {
     ...
     "configurations": {
            "production": {
              "tsConfig": "projects/core/tsconfig.lib.prod.json"
             }
      }
  ...
  }
}
  • run ng build --prod, and everything will work :D

PS: in this case the library is called "core"

Youness Houdass
  • 204
  • 4
  • 15