0

What about official documentation for creating angular2 library?

I don't understand. Why do we need to compile for creating library?

I'd like to have only source (some common modules) that could be reused in multiple projects without to have to compile it.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Jimmy Pannier
  • 261
  • 1
  • 2
  • 16

3 Answers3

1

I am not sure to completely understand your problem, but as far as I know an Angular 2 library is nothing more but an Angular 2 application you import in another as a module using npm. For example ngx-translate.

These kind of modules have to be added to your app.module.ts file.

Angular 2 accepts non-specific Angular 2 modules as well, and you can require them in your app. For example if you want to use MomentJS, you can do :

npm i --save moment

And in your component or service or whatever:

import moment = require("moment");

So to create a library you can follow one of these schemes and nothing should run well.

If you use Webpack and want a library to be globally available (JQuery for example), you can require it in the vendor.ts file.

Cédric Rémond
  • 954
  • 1
  • 8
  • 20
  • ngx-translate, has some line codes that i don't want to write : example : export * from "./src/translate.loader" in index.ts. Is it mandatory ? – Jimmy Pannier May 17 '17 at 09:33
1

I think I understand what you are trying to say. Angular libraries should be AOT (ahead of time) compatible, meaning that when another project imports your library and they want to have their project AOT compiled, it will throw the error if your library (that they imported) is not ready for AOT compilation. There are a lot of requirements to fulfil for reusable angular library, and not a lot of documentation on it.

VLE
  • 21
  • 2
  • So, do you think, create a simple app (via ng new command of angular-cli), positionnate false to private in package.json) and publish it without to compile it will be importable in a another project ? – Jimmy Pannier May 17 '17 at 09:45
1

There are few things you need to do.

The first thing is to create a single module that will be exported from your library and then can be imported into another application. This module can import or re-import other modules of your library.

Then, you need to create a declaration file with typings for your application. You can do that using declaration: true option of tsc. It can even be compiled into one file by using outDir option.

The last thing is that you should tell webpack not no bundle @angular/... dependencies into your bundle. This can be done using externals property. Read more here.

Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488
  • ok, but is the step "creation of declaration file" optional ? ( Isn'it used for angularJs only ? I know that my module will be used only in angular2 projects. it's a enterprise non public module deployed in private registry ) – Jimmy Pannier May 17 '17 at 10:01
  • 2
    @JimmyPannier, no, it's not optional. If you create a class, for example, as a service, and other app will import it and call some method , the `tsc` will complain that it can't resolve that method on that class/service without declaration file – Max Koretskyi May 17 '17 at 10:32
  • @JimmyPannier, please consider accepting the answer if it helped – Max Koretskyi May 18 '17 at 15:29
  • do you know how to configure externals property using angular-cli ? I don't see such property in package.json or tsconfig – Jimmy Pannier May 22 '17 at 14:16
  • 1
    @JimmyPannier, you have to eject `webpack.config.js`, see [this](http://www.dzurico.com/angular-cli-with-the-super-powers/) for more information. I wouldn't say it's trivial and it has some [limitations](https://stackoverflow.com/a/42406194/2545680) – Max Koretskyi May 22 '17 at 15:28