Publish library as a JS package on NPM

[TwanoO67]

Hello Guys!

For the moment the package is published as a TS module.
So it is compiled with your typescript settings when you use it.

But this mode of using is not allowed with the new angular/cli versions.
So I would like to publish the package as a JS lib.

I already tried that on develop (i did a "yarn build" function, that produce a dist folder, and use that on the package.json).
But then when I use it on a project, it compile right, but it fail on loading, with errors like so:
Uncaught ReferenceError: UserService is not defined at eval (can-activate-guard.service.js:33) at eval (can-activate-guard.service.js:36) at Object../node_modules/ngx-admin-lte/dist/src/services/can-activate-guard.service.js (vendor.bundle.js:317)

It seems that the internal service aren't able to load each other anymore.

Does any of you already create a JS package on NPM and have some example to help me with that ?

Any idea would be much appreciated!

[fabioformosa]

I don't understand. Have you followed those steps to build and publish on npm registry?
https://codeburst.io/https-chidume-nnamdi-com-npm-module-in-typescript-12b3b22f0724

Have you searched/opened a stackoverflow issue for the error message you get?

[TwanoO67]

Hello @fabioformosa

Yes its exactly the tutorial that I followed. And I achieve to have a working compilation and get it published on npm. The problem is only after when I try to install.

I tried searching on stackoverflow but the error seems to common and I didn't found answer that was matching the case

[TwanoO67]

Hello guys!

The library as beed made compatible with angular >4
(tested with angular 6.0.0.beta-7)

If you want to try in a angular 6 project, then:
yarn add [email protected]

and in your angular-cli.json

  "assets": [
    { "glob": "**/*", "input": "../node_modules/ngx-admin-lte/public/assets", "output": "./assets" }
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../node_modules/admin-lte/dist/js/app.min.js"
  ],

and in your style.css

  @import "../node_modules/angular2-toaster/toaster.css";
  @import "../node_modules/admin-lte/dist/css/AdminLTE.min.css";
  @import "../node_modules/admin-lte/dist/css/skins/_all-skins.min.css";
  @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
  @import "../node_modules/font-awesome/css/font-awesome.min.css";
  @import "../node_modules/ionicons/dist/css/ionicons.min.css";

[fabioformosa]

Great! I will test ASAP with angular 5.
What was the problem with npm release?

[TwanoO67]

It was related to peerDependencies, now i builded with ng-packagr and it fixed =)

[catull]

@TwanoO67 This issue is done now, am I missing anything ?

[TwanoO67]

Jquery was missing on beta-9, but it seems ok now on beta-10.

[catull]

I disagree with jquery being a direct dependency, see issue #52.
I am fine with this issue closed, though.