Use rollup to create a UMD bundle.

I have now an error when I try to prepublish because it search \src\app\components\sample.scss.js:

Logger service not logging errors as its missing arguments

To provide an easy to use, productive and dev friendly seed here are some suggested refactoring.
Each suggestion has an issue attached, this issue is used for managing the issues:

• Move to Webpack 2 (#6)

• Add DEMO application (#9)

• Support AoT friendly package (#8)

• Output a UMD bundle (#7)

  Distributed package structure

  The end result of the package should contain 2 versions of the package

  • ES5 bundle, 1 file, UMD format
  • ES6 bundle, modular. (ESM)

The ES5 version will be used when importing the package, this is done by setting

    "main": "path-to-es5-bundle.js`

in package.json

The ES6 version is a modular option that a developer need to opt-in to use, however it also plays a part in the ES5 UMD bundle.

When developing, user will usually:

import { Something } from 'my-lib'

The UMD bundle is used, it has no type information but the ES6 version does. The ES6 version comes with d.ts files and they are referenced inside package.json

  "typings": "esm/index.d.ts",

The ES6 version also hold *.metadata.json files so it provides support for AoT compilation.
Since main property references the UMD bundle we use the module property to make sure ES6 module syntax code get the modular ES6 version and not the UMD bundle (so AoT can work)

Hi @NathanWalker,

I've been constantly publishing new version to npm.
I was wondering if there is a better way other than editing the package.json and tsconfig.json and then reverting to the old versions.

Thanks!

Alex

While developing a library it is always helpful to use an application that consumes that library within the same project.

The most obvious reasons are:

• Speeds up developments in a large factor
• Easy debugging
• Provides examples to end user
• A github.io site for presentation (script to upload can be easily integrated)

Suggested Structure:

src
---lib
---demo-app

Webpack is used for development and for bundling the output for the github.io site.
Rollup is used for NPM package creation.

Hey, great project!

Any plans to upgrade to RC soon?

Alex

I'm trying to test the publish of a library. When I use 'npm pack', the ng2-your-library-0.0.0.tgz file doesn't contain any javascript or d.ts files

Can you explain to me what I should put inside the package.json? I tried:
...
"main": "ng2-your-library",
"typings": "index.d.ts",
...
What are the files the tgz file will have, the contain of the dist folder?

Thanks,
Stephane

What I did:

1. Build and publish/pack angular-library-seed npm
2. Clone https://github.com/angular/quickstart as library consumer project.
3. Integrate published library via npm into consumer project
4. "npm run build" consumer project

Getting loads of typescript errors regarding typings/core-js. Seems like a core-js dependency conflicts with Es6 definitions distributed with typescript.
As a workaround, I downgraded es2015 lib to es5 lib within tsconfig.json:

"lib": [ "es5", "dom" ],

instead of:

"lib": [ "es2015", "dom" ],

This worked for me.

This is not a problem with the angular-library-seed itself, but consuming the library from within an angular 2 quickstart clone should be a common scenario.
This information might be an interesting addition to README.md or some other troubleshooting doc :)

The library seed need to move to Webpack 2.0 to support recent feature and of course align with Angular CLI which uses Webpack 2.0 as well.

When I build project with npm start or npm build, I have this error :

I was hoping to have a typescript declaration file to be generated and included with the /dist. When a consuming angular 2 typescript app uses this library we need the declaration files for development of the hosting app.

Hi!

Your angular-library-seed sounds very promising, but unfortunately after unzipping, 'npm install' and 'npm start' I got the message that at-loader had 273 errors. It resulted in a console log fully colored red.

Some of the errors (the rest looks the same, but in different files);
ERROR in [at-loader] ./node_modules/@types/jasmine/index.d.ts:40:52 TS1005: '=' expected.

ERROR in [at-loader] ./node_modules/@angular/common/src/pipes/async_pipe.d.ts:44:38 TS2304: Cannot find name 'Promise'.

ERROR in [at-loader] ./node_modules/@types/core-js/index.d.ts:350:48 TS2304: Cannot find name 'PropertyKey'.

ERROR in [at-loader] ./node_modules/@types/core-js/index.d.ts:1320:43 TS2339: Property 'toPrimitive' does not exist on type 'SymbolConstructor'.

ERROR in [at-loader] ./node_modules/@types/lodash/index.d.ts:5630:44 TS2503: Cannot find namespace '_'.

Details:
npm v 4.1.2
node v 6.9.5

What am I doing wrong?

Thanks in advance!!

Hey @NathanWalker!

Thanks for upgrading your library seed to Angular RC.
As promised, here's the library I built using your seed:

https://github.com/alexcastillo/ng2-notifications
https://www.npmjs.com/package/ng2-notifications

Do you have any feedback?

Thanks!

A published library should support AoT compilation out of the box so users can build their application using AoT..

Compilation is managed by ngc instead of tsc and the NPM package is publish with *.metadata.json files.