angular2-library | How to create a library in Angular2 | Build Tool library

I'm building an Angular (2+) component library using jvandemo/generator-angular2-library as a starter, which uses Rollup as a module builder. The component I am creating in the library uses MomentJS.

I've had various build issues with the inclusion of MomentJS.

I first used import moment from 'moment'; to import moment into the component, but that produces the following error at build;

I recently upgraded an existing Angular 6 App to Angular 7. Most of my App was built on Angular 6 and then I upgraded it.

Here's my package.json:

I'm following the Angular CLI 6 instructions for creating a library here. I was able to make my library, and build it successfully. The library consists of a Component I am using for the UI and has an HTML selector.

Hi guys I need a bit of help, as I can't seem to get it to work. I think I might be using the incorrect syntax or something.

I am currently building Angular 4 libraries using YO https://github.com/jvandemo/generator-angular2-library

So everything is working except for the @Input decorators.

Some simple code here

I generate my angular 2 lib with yeoman generator and added to main angular project. If i compile app in dev mode i haven't error, but if i run prod mode, i get many errors:

I am currently building an Angular library, and I wanted to be able to run some tests. After following these instructions I managed to set up everything properly and actually be able to run my tests.

Main question

Although everything runs properly something awkward happens. When I run npm test next to every .ts file a .js file is generated. Normally all the d.ts and the one big .js files go inside a dist folder that projects using the library use. So does anyone know from where could these javascript files are generated, and if they are indeed needed, since all this code already exists so to speak in the dist folder.

Bonus question

Not as important as the above, all the test results are displayed in the terminal, whereas the browser displays only:

Karma v1.4.1 - connected Chrome 61.0.3163 (Mac OS X 10.12.6) is idle

So is there a nice fix to display my test as nicely as the angular-cli does out of the box?

Note that after doing my homework I did not find something relative online, and I don't want to upload a bunch of unpleasant jsons. If anyone has an idea on the direction of the problem I will be happy to include code.

The basic structure of my library was generated by this

Edit: karma.config.js

I red this article about creating Angular 2 component library, and it uses inline styles. Is there a way to create a lib without inline styles in Angular 2?

Also I saw this, but there is no word about styles, css.

My problem is, I want to create a complex component with multiple components in it and I use SASS also.

I am trying to create an Angular 2 library for services, components, and models I want to share between 3-4 different interfaces/apps that are frontends to the same database.

I am using the very helpful Angular 2 generator library here.

My services in the library are based around Apollo client and GraphQL.

However, when I symlink the library build to import into my main project, the Apollo dependencies don't seem to resolve.

I get the following two errors from my app build: Can't resolve 'apollo-angular/index' and Can't resolve 'graphql-tag/index'. This is in spite of the fact that both these libraries are installed to my node_modules in my app, however, they don't seem to transferred by the Gulp build into my dist directory of my library but I am not even sure they are meant to be.

I have also tried to setup peer dependencies in my library's package.json as follows:

I have created an angular componet (datetime-popup) found here

I want to be able to use it in my projects, but i cannot get it to work. I believe i need to make it a umd library or something with webpack, but i have had a look on this internet and i cannot find how to do this, as whatever i do, it errors.

Can someone help me to sort this out? I would like to be able to reference the project in the demo, and also use it via an external project using npm.

EDIT:

I have tried to duplicate this project but for some reason, when i build my example project, it get an exception in a script

bundle.js:39725 Uncaught SyntaxError: Unexpected token export

Here is the exception. This isnt my code and works fine when the ngx-bootstrap project is in the project