filipesilva / angular-quickstart-lib Goto Github PK

Hi, sorry for bothering again.
I cloned the project and did not make any changes. After I run npm install, I am trying to run npm run integration to do an e2e test.
But it failed. I looked into it and found bundle.js under integration/dist is not generated.
Why?
I found there is a warning during rollup:

(node:34922) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: 'Subject' is not exported by ../node_modules/rxjs/Subject.js
(node:34922) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I am not sure if it's preventing the code being packaged.
I am wondering are you guys using this seed can run it successfully?

After upgrading to Angular 5 I wanted to follow this recommendation from the upgrade guide:

For each RxJS Operator you import, you should now import from 'rxjs/operators' and use the pipe operator. Read more

In my case, that meant making a couple changes like this:

// import 'rxjs/add/operator/take';
import { take } from 'rxjs/operators';

// this.$.take(1).subscribe((v) => { value = v; });
this.$.pipe(take(1)).subscribe((v) => { value = v; });

I'm not sure how to modify my Karma config to support this change. I'm currently getting a 404 when the browser tries to load a file /base/node_modules/rxjs/operators.js:

02 11 2017 21:46:42.016:WARN [web-server]: 404: /base/node_modules/rxjs/operators.js

Any help would be appreciated - and probably worth updating in this repo.

Even though inlining succeeds and both out-tsc and dist folders contain properly inlined CSS, the server that's run with npm run start command is not actually inlined.

I'm not sure if this is by design, but this causes problems with my setup of SCSS, since I cannot see the proper version of the lib in the demo app. The SCSS gets imported into browser, Angular runs it through parser, and spits out a mutant monster which ain't valid CSS.

So technically it doesn't cause problems in this demo and everything works if you use CSS, but I believe this is not expected behavior -- developers expect to see their bundled lib loaded as it's bundled, not as it was written.

I've used this project as a model for my own library, using Angular 5.0.5. But, it appears as though I've done something wrong. When I run the build script, I get an error stating that @angular/core could not be resolved.

Error: Error: Could not resolve module @angular/core at StaticSymbolResolver.getSymbolByModule (...\node_modules\@angular\compiler\bundles\compiler.umd.js:31884:30) at StaticReflector.findDeclaration (...\node_modules\@angular\compiler\bundles\compiler.umd.js:30371:63) at StaticReflector.initializeConversionMap (...\node_modules\@angular\compiler\bundles\compiler.umd.js:30636:36) at new StaticReflector (...\node_modules\@angular\compiler\bundles\compiler.umd.js:30317:14) at Object.createAotCompiler (...\node_modules\@angular\compiler\bundles\compiler.umd.js:32125:44) at AngularCompilerProgram._createCompiler (...\node_modules\@angular\compiler-cli\src\transformers\program.js:404:37) at AngularCompilerProgram.get [as hostAdapter] (...\node_modules\@angular\compiler-cli\src\transformers\program.js:323:22) at AngularCompilerProgram._createProgramWithBasicStubs (...\node_modules\@angular\compiler-cli\src\transformers\program.js:435:73) at AngularCompilerProgram.initSync (...\node_modules\@angular\compiler-cli\src\transformers\program.js:377:27) at AngularCompilerProgram.get [as tsProgram] (...\node_modules\@angular\compiler-cli\src\transformers\program.js:353:22)

Digging a little further into "node_modules@angular\compiler\bundles\compiler.umd.js", the error seems to come from "this.host.moduleNameToFileName".

Deploy SystemJS to gh-pages in state is little heavy (copy node_modules), but normally all node packages can be accessed by https://unpkg.com/... so may be best way is to create script which copy /src/demo in temp folder replace path for 'npm' from 'node_modules/' to 'https://unpkg.com/' and deploy temp folder as gh-pages.

What do you think about this ? I'm wrong ?
(and optionally this script can be integrate to travis process for success build)

¿How can I include js libraries like jquery?

We need an ability to create re-usable packages from Angular CLI projects

I think we need to switch from SystemJs to webpack because:

1. It is not possible to deploy demo to Github Pages. I can copy src/demo folder, but then I need to also copy all node_modules in order to make it work.
2. On windows demo page development experience is just terrible. On each change lite-server is fetching all libraries again. It takes ~5s to reload demo page.

In conclusion with webpack we will get faster development speed and much easier demo page deployments .

I can contribute to this one :)

I see two demo applications in the project, one src/demo, and another integration/src?

Whats the use case?

Hi, thanks for great quickstart :)

I missed ability to load demo app component html from templateUrl. Maybe you can add system-angular-loader.js to system.js meta section or I can create PR, because I already have this setup and it works fine.

Hi,

I am trying to build a library wit a component that contains .scss file.

It seems that sass files doesn't compile.

How could I compile .scss?

Thanks!

hi, @filipesilva . I am learning how to package angular module by rollup, I have a question that why the repo has no rollup.config.js file?

Hi,

I'm using applicationinsights as a dependency for an angular library I'm creating.

I'm using applicationinsights 1.0.4 and the typings v1.0.4.

I'm using applicationinsights in a service like this (typescript file):
import { AppInsights } from 'applicationinsights-js';

However when the compiler converts it to an es2015 module, the import becomes:
import { AppInsights } from 'applicationinsights-js/index';
(note the extra: /index at the end)

which is obviously wrong and breaks. Any ideas why this is occuring? I feel like it's something to do with the way the @types works but can't work out why.

Here's a sample of the tsconfig I'm using (tsconfig.es5.json)

{
  "extends": "./tsconfig.lib.json",
  "compilerOptions": {
    "target": "es5",
    "outDir": "../../out-tsc/lib-es5/",
    "baseUrl": "",
    "typeRoots": [

      "../../node_modules/@types/"
    ],
    "types": ["applicationinsights-js"]
  },
  "files": [
    "./index.ts",
    "./typings.d.ts"
  ],
  "angularCompilerOptions": {
    "annotateForClosureCompiler": true,
    "strictMetadataEmit": true,
    "skipTemplateCodegen": true,
    "flatModuleOutFile": "logging-ng.js",
    "flatModuleId": "logging-ng",
    "genDir": "../../out-tsc/lib-gen-dir/"
  }
}

Note that I added types and typeroots but it doesn't seem to make any difference.

Thanks for your time
Leander

I am facing an issue and can't seem to see where it comes from.
When I import the package created with the build script from angular-quickstart-lib inside my angular-cli project, I get an error when building the app in production mode (with uglifyj.js)

Uglify js complains about an "Unexpected token operator «=», expected punc «,»" which comes from the es2015 js file and is an es2015 feature.

My package has all the "main", "es2015" and "module" pointing to the good corresponding file, but for some reason the angular cli build keeps on loading my es2015 version (and thus breaks the uglify.js that expect an es5 apparently).

I would appreciate some help on how to target the good ES version for angular-cli. cheers!

[Edit] I do have my tsconfig.json with "target": "es5"

Coming from an angular CLI background, I'm used to only see the development files during development. I've started trying to build a lib with this project (thanks for the work!) and the generated .js and .map files show up among others. I assume that when I start using sass that the generated css files show up as well. This makes development more complicated, ideally I'd only see the development files during development. Is this feasible?

(btw I know I can hide file/folder patterns in my IDE)

Thanks!

Hi Filipesilva

Do you have intension to support scss support for @import from nodule_modules?

The syntax looks like below.
@import "~bootstrap-sass/assets/stylesheets/bootstrap/variables";

I think that having demo application inside seed project, only creates confusion. Seed should be bare-bone library.
It is trivial to create demo app manually with angular-cli and add the library with npm link.
My preference is to always have minimalistyc approach when I have to try new things.
My proposal: delete "demo" folder and merge "src/lib"->"lib".

Hi,
Thanks for building such a great quick-start library repo. It includes almost every aspects I can think of. I ran into a problem and struggled for a couple of days. Hope someone can help.
I follow the guide and

npm run build

then I want consume it in my another project by

npm install --save my/local/path/to/angular-quickstart-lib/dist

then in app.module.ts, I do:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LibModule } from 'quickstart-lib';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    LibModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

then I use
<my-lib></my-lib>
in app.component.html

Run my project, in the browser console it shows:

Uncaught Error: Unexpected value 'LibModule' imported by the module 'AppModule'. Please add a @NgModule annotation.
    at syntaxError (compiler.es5.js:1689)
    at compiler.es5.js:15373
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15356)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules (compiler.es5.js:26679)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26652)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26581)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone (core.es5.js:4595)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule (core.es5.js:4581)
    at Object.../../../../../src/main.ts (main.ts:11)

I am using the same version of Angular (4.2.5) to avoid potential failure (but I do not think it is the root cause). Do you have any ideas?
Actually I tried to build a library without using any seeds previously, following the steps of ngc, rollup, etc. and it ends up with this same problem.

Node version: 8.0.0
Npm version: 5.0.1
Typescript version: 2.3.4

In my library I am creating I am using some dependant libraries to provide some parts.
But these dependant (JS) libraries do not have typescript typings and/or have broken typings (in definitely typed @types). I am going to go through the process of making pull requests to these to improve these BUT for some of these it will not be feasible.
Is there are way to create my own local custom typings for modules I am using in the process of building a module ?
I tried in index.d.ts, but couldn't get it working it seemed to be parsing those definitions after the index.ts which meant that type errors stopped my build in the index.ts.

Any help or pointers or suggestions would be much appreciated ?

I was looking to create a custom "auth" service that would apply some custom headers when http calls are made. I've done this before within an angular-cli project, but haven't had much success trying to implement within the quickstart-lib, likely due to myself not fully understanding how compilation works for libraries.

I've created a fork of this quickstart-lib here: https://github.com/danwulff/angular-quickstart-lib

Issue:
ERROR Error: No provider for XHRBackend! is seen when trying to consume the service.

Reproduce:
git clone https://github.com/danwulff/angular-quickstart-lib
cd angular-quickstart-lib
npm install
npm run start

Notice the console errors.

Note: I was able to consume the LibService just fine after importing HttpModule into the Demo app.module: https://github.com/danwulff/angular-quickstart-lib/commit/eb8b0dd152e95d5483eb54d29e0394497d118252

But is there a way to have the library provide the XHRBackend dependency properly to not require the user to import HttpModule alongside a service?

Uncaught Error: Unexpected value 'LibModule' imported by the module 'SharedModule'. Please add a @NgModule annotation. I get this error when I import the libModule... any solution?

So it seems that since npm 5 you can now install dependencies via Github and it'll install devDependencies and run a prepare script.

This would mean we don't need to publish packages via npm and it makes it easier to fork and install from forks etc.

So then you can do:

npm i https://github.com/filipesilva/angular-quickstart-lib

And it'll work out of the box without a publish

Would you accept a PR that uses a separate outDir to compile source, instead of putting them next to the .ts files? I realize this is just a matter of personal preference, but mine is to have them separate. :) I find it makes navigation & cleanup easier.

Node v 8.9.4
npm v 5.6.0
Failing on simple
npm i
npm run integration

I have created a shared service and it built successfully. But when I tried to import it into my project and it throws error in the browser.

@filipesilva I'm still getting the same error Uncaught Error: Unexpected value 'ShareServiceModule' imported by the module 'AppModule'. Please add a @NgModule annotation.. My shared module is just a service with no ui component.

Shared Service Module

import { ShareService } from './service/share.service';
@NgModule({
  declarations: [],
  providers: [
    ShareService
  ],
  imports: [],
  exports: []
})
export class ShareServiceModule { }

Local Module

import { ShareServiceModule} from 'share-service';
@NgModule({
  imports: [ShareServiceModule]
})
export class AppModule { }

importing js based libraries has always been tricky. With the latest rollup 0.50 things are not improving much.

It would be helpful to get an example in this seed on how to import lodash (or one of its methods, since most never use the entire library) and something like localforage.

Additionally, since we are talking about code that uses Typescript we will encounter references to this. With the setup as I have it now (see configs and package.json below) it get these warnings:

The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten

So rollup rewrites this to undefined, which does not seem as helpful?

Issues surrounding localforage look like this:

setItem' is not exported by 'node_modules/localforage/dist/localforage.js'
Issues with lodash.isempty like so:

Error: 'isEmpty' is not exported by node_modules/lodash.isempty/index.js

Here is my setup:

package.json

"peerDependencies": {
    "@angular/common": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@ngrx/effects": "github:ngrx/effects-builds",
    "@ngrx/router-store": "github:ngrx/router-store-builds",
    "@ngrx/store": "github:ngrx/store-builds"
  },
  "devDependencies": {
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@compodoc/compodoc": "^1.0.0-beta.10",
    "@ngrx/effects": "github:ngrx/effects-builds",
    "@ngrx/entity": "github:ngrx/entity-builds",
    "@ngrx/router-store": "github:ngrx/router-store-builds",
    "@ngrx/store": "github:ngrx/store-builds",
    "@types/jasmine": "2.5.36",
    "@types/jwt-decode": "^2.2.1",
    "@types/node": "^6.0.46",
    "camelcase": "^4.0.0",
    "concurrently": "3.4.0",
    "core-js": "^2.4.1",
    "glob": "^7.1.1",
    "jasmine-core": "^2.5.2",
    "jwt-decode": "^2.2.0",
    "karma": "^1.5.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-coverage": "^1.1.1",
    "karma-html-reporter": "^0.2.7",
    "karma-jasmine": "^1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-remap-coverage": "^0.1.4",
    "localforage": "^1.5.2",
    "lodash.isempty": "^4.4.0",
    "rimraf": "^2.6.1",
    "rollup": "^0.50.0",
    "rollup-plugin-commonjs": "^8.0.2",
    "rollup-plugin-node-resolve": "^3.0.0",
    "rollup-plugin-sourcemaps": "^0.4.1",
    "rollup-plugin-uglify": "^2.0.1",
    "rxjs": "^5.5.0",
    "standard-version": "^4.0.0",
    "tslint": "^4.4.2",
    "typescript": "~2.5.3",
    "zone.js": "^0.8.10"
  }

build.js (fixed up for rollup 0.50.x)
see the file here

The imports in the TS files look like this:
lodash
import { isEmpty } from 'lodash.isempty';
localforage
import * as localForage from 'localforage';
jwt-decode (even worse)

import * as jwt_decode_ from 'jwt-decode';
const jwt_decode = jwt_decode_;

Since there seems so much confusion and issues about these imports and bundling with rollup, it would be great to have that as part of such a seed project.

(i have spent too much time this morning trying to get this working)

Hello,

This repo is very interesting, thx !

As many people, I would like to setup a repo (monorepo) with shared libraries:

• Angular 2 modules/components/services
• Simple Typescript libs
• Configurations/tools
• ...

What do you think of having more than one lib in your repo ? And a build script for building these librairies with cross-dependencies, shared configuration, etc.. Also usable on a CI environment.

For the moment I am mixing a lot of JS/shell scripts, dependencies, etc... to achieve this goal...:(

I successfully updated all dependencies to Angular 5+. I'll add PR

this code in module.ts, once imported into Angular CLI based app works fine:

export class LibService {}
export function libProvider() { return LibService; }

@NgModule({
  imports: [
    CommonModule
  ],
  providers: [
    { provide: LibService, useFactory: libProvider() }
  ]
})
export class FeatureModule { }

but this one:

export class LibService {}
export const libProvider = () => LibService;

@NgModule({
  imports: [
    CommonModule
  ],
  providers: [
    { provide: LibService, useFactory: libProvider() }
  ]
})
export class FeatureModule { }

breaks on ng start with:

ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function

My understanding is that second snippet, using "export const libProvider = () => LibService;", is not AOT compliant. However, both snippets build fine with angular-quickstart-lib. Questions is, can build of angular-quickstart-lib be setup in a way to break for code that is not AOT compliant?

Repro steps

1. Clone the repo
2. Run npm i && npm run integration

Result

Chrome opens, and I see the "connected to BS" badge, but it just says "Loading...". Console logs that it Could not find Angular on page http://localhost:8080/ : retries looking for angular exceeded twice, and then fails both tests.

Also check out the complete output I get.

I'm on node v7.6.0 and npm 5.4.1 on Ubuntu. Will get my hands on a Mac in ~12 hours and will post the results from there as well.

Can you give some guidance as to how to include other assets within a library? I'm specifically thinking about .pngs, .svgs etc. For instance, I have a header component that I'd like to have an image within. Of course, there's the option of using a data URI but I'd like to be able to include raw files within the lib.

Can you think of what would make the most sense for including raw assets and using them within library components? Do you know of any libraries that already exist that have a logical way of including assets? Is including raw images in a library a dumb idea? Any help would be great.

Thanks for the quickstart lib, it's been great help getting started creating a library for our dev team.

I'd like to use your seed to write an Angular lib that in turn depends on another angular lib.
In my case this compiles, but the Angular sources are included in the UMD bundle of my lib. How I can prevent this from happening?

My build config is this:

'use strict';

const fs = require('fs');
const path = require('path');
const glob = require('glob');
const camelCase = require('camelcase');
const ngc = require('@angular/compiler-cli/src/main').main;
const rollup = require('rollup');
const uglify = require('rollup-plugin-uglify');
const sourcemaps = require('rollup-plugin-sourcemaps');
const nodeResolve = require('rollup-plugin-node-resolve');
const commonjs = require('rollup-plugin-commonjs');

const inlineResources = require('./inline-resources');

const libName = require('./package.json').name;
const rootFolder = path.join(__dirname);
const compilationFolder = path.join(rootFolder, 'out-tsc');
const srcFolder = path.join(rootFolder, 'src/lib');
const distFolder = path.join(rootFolder, 'dist');
const tempLibFolder = path.join(compilationFolder, 'lib');
const es5OutputFolder = path.join(compilationFolder, 'lib-es5');
const es2015OutputFolder = path.join(compilationFolder, 'lib-es2015');

return Promise.resolve()
  // Copy library to temporary folder and inline html/css.
  .then(() => _relativeCopy(`**/*`, srcFolder, tempLibFolder)
    .then(() => inlineResources(tempLibFolder))
    .then(() => console.log('Inlining succeeded.'))
  )
  // Compile to ES2015.
  .then(() => ngc({ project: `${tempLibFolder}/tsconfig.lib.json` })
    .then(exitCode => exitCode === 0 ? Promise.resolve() : Promise.reject())
    .then(() => console.log('ES2015 compilation succeeded.'))
  )
  // Compile to ES5.
  .then(() => ngc({ project: `${tempLibFolder}/tsconfig.es5.json` })
    .then(exitCode => exitCode === 0 ? Promise.resolve() : Promise.reject())
    .then(() => console.log('ES5 compilation succeeded.'))
  )
  // Copy typings and metadata to `dist/` folder.
  .then(() => Promise.resolve()
    .then(() => _relativeCopy('**/*.d.ts', es2015OutputFolder, distFolder))
    .then(() => _relativeCopy('**/*.metadata.json', es2015OutputFolder, distFolder))
    .then(() => console.log('Typings and metadata copy succeeded.'))
  )
  // Bundle lib.
  .then(() => {
    // Base configuration.
    const es5Entry = path.join(es5OutputFolder, `${libName}.js`);
    const es2015Entry = path.join(es2015OutputFolder, `${libName}.js`);
    const rollupBaseConfig = {
      moduleName: camelCase(libName),
      sourceMap: true,
      // ATTENTION:
      // Add any dependency or peer dependency your library to `globals` and `external`.
      // This is required for UMD bundle users.
      globals: {
        // The key here is library name, and the value is the the name of the global variable name
        // the window object.
        // See https://github.com/rollup/rollup/wiki/JavaScript-API#globals for more.
        '@angular/core': 'ng.core',
        'prod-wch-sdk-ng4': 'prodWchSdkNg4',
        'rxjs/Subject': 'Rx.Subject'
      },
      external: [
        // List of dependencies
        // See https://github.com/rollup/rollup/wiki/JavaScript-API#external for more.
        '@angular/core',
        '@angular/http',
        '@angular/router',
        '@ng-bootstrap/ng-bootstrap',
        'prod-wch-sdk-ng4',
        'handlebars/dist/handlebars',
        'jquery/dist/jquery.slim',
        'rxjs',
        'rxjs/add/operator/takeUntil',
        'rxjs/add/operator/catch',
        'rxjs/add/operator/delay',
        'rxjs/add/operator/first',
        'rxjs/add/observable/of',
        'rxjs/add/operator/publishReplay',
        'rxjs/add/operator/mergeMap',
        'rxjs/add/operator/startWith',
        'rxjs/add/observable/concat',
        'rxjs/add/observable/merge',
        'rxjs/add/operator/switchMap',
        'rxjs/add/operator/share',
        'rxjs/add/operator/timeInterval',
        'rxjs/add/operator/merge',
        'rxjs/add/operator/retry',
        'rxjs/add/operator/retryWhen',
        'rxjs/add/operator/delayWhen',
        'rxjs/add/operator/multicast',
        'rxjs/add/operator/distinct',
        'rxjs/add/operator/distinctUntilChanged',
        'rxjs/add/operator/filter',
        'rxjs/add/operator/shareReplay',
        'rxjs/add/observable/interval',
        'rxjs/add/observable/empty',
        'rxjs/add/observable/combineLatest',
        'rxjs/add/observable/from',
        'rxjs/Observable',
        'rxjs/Subject',
        'rxjs/ReplaySubject',
        'rxjs/BehaviorSubject',
        'rxjs/add/operator/do',
        'rxjs/add/operator/map',
        'rxjs/add/observable/timer'
      ],
      plugins: [
        commonjs({
          //include: ['node_modules/rxjs/**']
        }),
        sourcemaps(),
        nodeResolve({ jsnext: true, module: true })
      ]
    };

    // UMD bundle.
    const umdConfig = Object.assign({}, rollupBaseConfig, {
      entry: es5Entry,
      dest: path.join(distFolder, `bundles`, `${libName}.umd.js`),
      format: 'umd',
    });

    // Minified UMD bundle.
    const minifiedUmdConfig = Object.assign({}, rollupBaseConfig, {
      entry: es5Entry,
      dest: path.join(distFolder, `bundles`, `${libName}.umd.min.js`),
      format: 'umd',
      plugins: rollupBaseConfig.plugins.concat([uglify({})])
    });

    // ESM+ES5 flat module bundle.
    const fesm5config = Object.assign({}, rollupBaseConfig, {
      entry: es5Entry,
      dest: path.join(distFolder, `${libName}.es5.js`),
      format: 'es'
    });

    // ESM+ES2015 flat module bundle.
    const fesm2015config = Object.assign({}, rollupBaseConfig, {
      entry: es2015Entry,
      dest: path.join(distFolder, `${libName}.js`),
      format: 'es'
    });

    const allBundles = [
      umdConfig,
      minifiedUmdConfig,
      fesm5config,
      fesm2015config
    ].map(cfg => rollup.rollup(cfg).then(bundle => bundle.write(cfg)));

    return Promise.all(allBundles)
      .then(() => console.log('All bundles generated successfully.'))
  })
  // Copy package files
  .then(() => Promise.resolve()
    .then(() => _relativeCopy('LICENSE', rootFolder, distFolder))
    .then(() => _relativeCopy('package.json', rootFolder, distFolder))
    .then(() => _relativeCopy('README.md', rootFolder, distFolder))
    .then(() => console.log('Package files copy succeeded.'))
  )
  .catch(e => {
    console.error('\Build failed. See below for errors.\n');
    console.error(e);
    process.exit(1);
  });


// Copy files maintaining relative paths.
function _relativeCopy(fileGlob, from, to) {
  return new Promise((resolve, reject) => {
    glob(fileGlob, { cwd: from, nodir: true }, (err, files) => {
      if (err) reject(err);
      files.forEach(file => {
        const origin = path.join(from, file);
        const dest = path.join(to, file);
        const data = fs.readFileSync(origin, 'utf-8');
        _recursiveMkDir(path.dirname(dest));
        fs.writeFileSync(dest, data);
        resolve();
      })
    })
  });
}

// Recursively create a dir.
function _recursiveMkDir(dir) {
  if (!fs.existsSync(dir)) {
    _recursiveMkDir(path.dirname(dir));
    fs.mkdirSync(dir);
  }
}

Hi,

I have use your repo as base for my ngx-tree-select package, on my local environment all run correctly, but on travis I take :

`

karma start karma.conf.js --single-run
25 06 2017 20:25:33.336:WARN [watcher]: Pattern "/home/travis/build/Crazyht/ngx-tree-select/src/demo/systemjs-angular-loader.js" does not match any file.
25 06 2017 20:25:33.706:INFO [karma]: Karma v1.7.0 server started at http://0.0.0.0:9876/
25 06 2017 20:25:33.708:INFO [launcher]: Launching browser Chrome with unlimited concurrency
25 06 2017 20:25:33.714:INFO [launcher]: Starting browser Chrome
25 06 2017 20:25:35.004:INFO [Chrome 59.0.3071 (Linux 0.0.0)]: Connected on socket pk0b_Q8V37KLLylpAAAA with id 95296274
25 06 2017 20:25:35.765:WARN [web-server]: 404: /base/src/demo/systemjs-angular-loader.js
Chrome 59.0.3071 (Linux 0.0.0) ERROR
`

You can see full travis result : here
Problem is on https://github.com/Crazyht/ngx-tree-select [dev branch].

Where I m wrong or miss something ?

Thanks,
Crazyht

First of all thank you for exposing this repo for vetting Angular-based library projects. Based on this configuration, I have been able to successfully author, test and publish a few assets for use within my organization. Although you state in the README that this is for simple libraries, what is the evolving thought/guidance for encapsulating and exposing various component types in NgModules, i.e. ChartsModule, MultiMediaModule, etc. Thanks!

I have build a component library based on angular-quickstart-lib and consumed it with app build with angular-cli.
Everything works fine except when I try to create MenuComponent that has Router injected in it, or some other directive from RouterModule (library module has @NgModule({ imports: [RouterModule],
Everything works fine if MenuComponent is placed inside application code.
I think that routerModule works with single instance application wide. My library package does not use the same instance. Maybe it is somehow related to the packaging of the library module or the metadata.
I don't know how to solve this issue.

Everything uses angular 4.3.0 & angular-cli 1.2.1 (also have tried it with 4.2.6 and cli 1.2.0 before)

Hi,
I am building a lib based on VMware's Clarity, which is also a Angular library. After the config, my component in lib, containing Clarity directives and components, works properly (the code under src/lib is used in the demo). However, after I successfully packaged it with rollup, the Clarity directive wrapped in my exported component does not work in another application (consuming application). I do not want Clarity and Angular included in my lib. Instead, that application will import Angular, Clarity and my lib. I believe this is the correct way.

My rollup config:

const rollupBaseConfig = {
      // ......
      globals: {
        '@angular/core': 'ng.core',
        '@angular/common': 'ng.common', // I am using "ngIf" and other angular directives in my lib
        'clarity-angular/index': 'ng.clarity' // I am sure the global name is ng.clarity
      },
      external: [
        '@angular/core',
        '@angular/common',
        'clarity-angular/index' // This name should be ok
      ],
      // ......
    };

-------------------------------------------Separator-------------------------------------------

In the Angular-Cli based application, I npm link the dist directory of my lib (the solution before I publish the lib to npm repository).
According to the instruction of Angular-Cli, I config the tsconfig.app.json as:

{
  // ......
  "compilerOptions": {
    // ......
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
      ]
      // Not sure if I should include clarity-angular here. I tried `"clarity-angular": ["../node_modules/clarity-angular/clarity-angular.umd.js"]` or `"clarity-angular": ["../node_modules/clarity-angular"]` but the error is still there
    }
  }
  // ......
}

And the usage is like: (app.module.ts)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ClarityModule } from 'clarity-angular';
import { MyLibModule } from 'my-lib'; // This is my lib, the name has no problem

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    MyLibModule,
    ClarityModule.forRoot()
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Then I consume my component in app.component.html. The browser console reports error:

Uncaught Error: Template parse errors:
Can't bind to 'clrMenuPosition' since it isn't a known property of 'clr-dropdown'.
......

because the component I consume (i.e. in my lib) contains Clarity directive clr-dropdown.
I find the directive is not initialized in my consuming application by setting breakpoint in the directive constructor. Then of course the error is occurring.

Did I miss something? Any possible ideas are all welcome. Thanks!
It's may related to #21 but kind of different. I read through that thread but did not find the answer.

Steps to reproduce:

1. clone the repo, and npm install
2. npm install --save-dev util
3. update the /src/lib/src/component/lib.component.ts file with:

import {isNullOrUndefined} from 'util';

and give the component a constructor as follows:

  constructor() {
    let bool = (isNullOrUndefined(name));
  }

4. run the demo app: npm start

The app doesn't load, and the console gives errors about not being able to find util.

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3002/util
	Error: XHR error (404 Not Found) loading http://localhost:3002/util
	    at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3002/node_modules/zone.js/dist/zone.js:1075:39)
	    at ZoneDelegate.invokeTask (http://localhost:3002/node_modules/zone.js/dist/zone.js:424:31)
	    at Zone.runTask (http://localhost:3002/node_modules/zone.js/dist/zone.js:191:47)
	    at ZoneTask.invokeTask [as invoke] (http://localhost:3002/node_modules/zone.js/dist/zone.js:498:34)
	    at invokeTask (http://localhost:3002/node_modules/zone.js/dist/zone.js:1370:14)
	    at XMLHttpRequest.globalZoneAwareCallback (http://localhost:3002/node_modules/zone.js/dist/zone.js:1388:17)
	Error loading http://localhost:3002/util as "util" from http://localhost:3002/quickstart-lib/src/component/lib.component.js
	    at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3002/node_modules/zone.js/dist/zone.js:1075:39)
	    at ZoneDelegate.invokeTask (http://localhost:3002/node_modules/zone.js/dist/zone.js:424:31)
	    at Zone.runTask (http://localhost:3002/node_modules/zone.js/dist/zone.js:191:47)
	    at ZoneTask.invokeTask [as invoke] (http://localhost:3002/node_modules/zone.js/dist/zone.js:498:34)
	    at invokeTask (http://localhost:3002/node_modules/zone.js/dist/zone.js:1370:14)
	    at XMLHttpRequest.globalZoneAwareCallback (http://localhost:3002/node_modules/zone.js/dist/zone.js:1388:17)
	Error loading http://localhost:3002/util as "util" from http://localhost:3002/quickstart-lib/src/component/lib.component.js

How can we use 'util' with the demo project?

I don't know how to properly configure build.js to include leaflet (https://github.com/Leaflet/Leaflet).
It seams that leaflet has a module definition, as I was able to use it inside angular cli project, without configuring anything (exept css), so there must be a way to use it inside rollup bundle.

Currently I have configure it by adding 'leaflet': 'L', in globals (build.js).
Then when I use it in project with ng-cli I receive the following error: Module not found: Error: Can't resolve 'leaflet/index'.

Note:
I have leaflet & types/leaflet in my project.
I am importing leaflet inside a component with import * as L from 'leaflet';
Then when I build the library project I receive the following warning:
'leaflet/index' is imported by out-tsc\lib-es2015\src\components\map\map.component.js, but could not be resolved – treating it as an external dependency
'leaflet/index' is imported by out-tsc\lib-es5\src\components\map\map.component.js, but could not be resolved – treating it as an external dependency
No name was provided for external module 'leaflet/index' in options.globals – guessing 'L'
No name was provided for external module 'leaflet/index' in options.globals – guessing 'L'

Is there a standard way of package images, fonts in a library.
Do these need to be copied into the library ? Do you have a suggestion for a method/pattern for this?

This config https://github.com/filipesilva/angular-quickstart-lib/blob/master/src/lib/tsconfig.json#L10 causes problems for IDE to understand experimental decorators in spec files. I was able to fix it by making similar configuration as in angular-cli by not having files array at all and adding

"types": ["jasmine"]

With these few changes I'm not getting any errors in any ts files anymore in both VsCode and WebStorm. If it makes sense I can create PR with my few changes.

npm run build
cd .\dist
npm link

From @angular/[email protected] project add:
src/tsconfig.app.json

  "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
      ]
    }

src/app/app.module.ts

import { LibModule } from 'quickstart-lib';
...
  imports: [
    BrowserModule,
    LibModule
  ],
...

npm link quickstart-lib
npm start or ng serve --preserve-symlinks

Unexpected value 'LibModule' imported by the module 'AppModule'. Please add a @NgModule annotation.

Upgrading to angular 5.0 seems to break build.js. It fails on this expression:

ngc({ project: `${tempLibFolder}/tsconfig.lib.json` })

It looks like main.js has changed quite a bit for ngc. It used to parse that argument using

new tsc.NgcCliOptions(args)

Now it uses

require('minimist')(args)

I'm getting a 404 message while running unit tests when importing the NoopAnimationsModule (or, BrowserAnimationsModule) thus error-ing out the tests. The karma unit test config utilizes the demo app systemjs.config.js, but I think the error could be emerging due to the strange nature of how the the required animation files exist in @angular/animations and @angular/platform-browser (the later importing the former?), while also using some rewrite rules in systemjs-angular-loader.js.

Error message:

> karma start karma.conf.js --single-run

16 06 2017 13:21:54.214:INFO [karma]: Karma v1.7.0 server started at http://0.0.0.0:9876/
16 06 2017 13:21:54.216:INFO [launcher]: Launching browser Chrome with unlimited concurrency
16 06 2017 13:21:54.225:INFO [launcher]: Starting browser Chrome
16 06 2017 13:21:55.725:INFO [Chrome 59.0.3071 (Windows 10 0.0.0)]: Connected on socket WKWg2WWEy082ElvkAAAA with id 29592409
16 06 2017 13:21:58.448:WARN [web-server]: 404: /base/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/animations                                             .js
Chrome 59.0.3071 (Windows 10 0.0.0) ERROR
  {
    "originalErr": {
      "__zone_symbol__currentTask": {
        "type": "microTask",
        "state": "notScheduled",
        "source": "Promise.then",
        "zone": "<root>",
        "cancelFn": null,
        "runCount": 0
      }
    },
    "__zone_symbol__currentTask": {
      "type": "microTask",
      "state": "notScheduled",
      "source": "Promise.then",
      "zone": "<root>",
      "cancelFn": null,
      "runCount": 0
    }
  }

Chrome 59.0.3071 (Windows 10 0.0.0) ERROR
  {
    "originalErr": {
      "__zone_symbol__currentTask": {
        "type": "microTask",
        "state": "notScheduled",
        "source": "Promise.then",
        "zone": "<root>",
        "cancelFn": null,
        "runCount": 0
      }
    },
    "__zone_symbol__currentTask": {
      "type": "microTask",
      "state": "notScheduled",
      "source": "Promise.then",
      "zone": "<root>",
      "cancelFn": null,
      "runCount": 0
    }
  }

Here's an example repo: https://github.com/danwulff/angular-quickstart-lib-animations-error
-you can npm run start to see the animation added is working within the demo app
-npm run test:once you will see the 404 error.

There's a chance I'm not doing something correctly. This has been working just fine for most @angular imports, but I have a hunch that the strangeness is particular to the @angular/animations reliance on @angular/platform-browser

I wish I had a little more experience using systemjs to create a workaround. Maybe @anjmao could give some guidance enough for me to put up a PR, since he introduced the systemjs-angular-loader.js functionality (I think).

Could you please add node-sass and revert to scss files

This issue is basically a request of help, because I'm new to AOT compilation and I'd love to use your seed for my lib.

I'm trying to understand how to include an external js module into the library.
In the details, I'm trying to add a NumericTextBoxComponent in the application, based on inputmask.

I did these steps:

• added my component:

import * as Inputmask from 'inputmask';
import 'inputmask.numeric.extensions';
import { Component, OnInit, ViewChild, ElementRef, OnChanges, Input } from '@angular/core';
@Component({
  moduleId: module.id,
  selector: 'et-numeric-text-box',
  templateUrl: './numeric_text_box.html'
})
export class NumericTextBoxComponent implements OnInit {
  @Input() value: number;
  @ViewChild('inputmask') inputmask: ElementRef;

  ngOnInit() {
    let mask = new Inputmask({
      'alias': 'numeric',
      'allowPlus': false,
      'unmaskAsNumber': true,
      'radixPoint': ',',
      'groupSeparator': '.',
      'autoGroup': true,
      'showMaskOnHover': false,
      'digits': 4,
      'digitsOptional': false,
      'clearMaskOnLostFocus': false,
      'placeholder': '0',
      'integerDigits': 4,
      'positionCaretOnClick': 'none',
    });
    mask.mask(this.input);
  }

  protected get input(): HTMLInputElement {
    return this.inputmask.nativeElement;
  }
}

• installed inputmask as dependency;
• edited build.js adding to external and globals fields of rollupBaseConfig:

const rollupBaseConfig = {
      // ATTENTION:
      // Add any dependency or peer dependency your library to `globals` and `external`.
      // This is required for UMD bundle users.
      globals: {
        '@angular/core': 'ng.core',
        '@angular/forms': 'ng.forms',
        '@angular/common': 'ng.common',
        'inputmask': 'Inputmask'
      },
      external: [
        // List of dependencies
        // See https://github.com/rollup/rollup/wiki/JavaScript-API#external for more.
        '@angular/core',
        '@angular/common',
        '@angular/forms',
        'inputmask',
        'inputmask.numeric.extensions'
      ],
    ...
    };

• changed systemjs.config.js in src/demo/ & integration/src adding:

(function (global) {
  System.config({
    defaultJSExtensions: true,
    ...
    map: {
    ...
    // other libraries
    'rxjs': 'npm:rxjs',
    'inputmask': 'npm:inputmask/dist/inputmask/inputmask.js',
    'inputmask.numeric.extensions': 'npm:inputmask/dist/inputmask/inputmask.numeric.extensions.js'

• changed karma.conf.js adding:

    files: [
      ...
      // inputmask
      { pattern: 'node_modules/inputmask/**/*.js', included: false, watched: false },
      ...
    ],

Now: JIT demo is working nicely with livereload, tests are working, build:aot succeeds without errors but when i try to run aot bundle, i have a runtime error in bundle.js: ReferenceError: Inputmask is not defined. Of course, integration tests are not working.
Looks like that the import in the top line of my component is not properly working in AOT.
Am I missing something?

Thank you so much, and thank you for sharing this great seed.
PS: this is my fork --> https://github.com/andrea-spotsoftware/angular-quickstart-lib

Hello,

inside the build.js file you create the entry paths for es5 and es2015 modules in this way:

const es5Entry = path.join(es5OutputFolder, `${libName}.js`);

This resolves in the following path for scoped package names:

/libname/out-tsc/lib-es5/@scope/libname.js

But it should be:

/libname/out-tsc/lib-es5/libname.js

I am currently working on a fix, if you want i can make a PR for this.
Thank you.

Hi Filipe!
Thanks for providing this quickstart for building libs. I am build an ng lib following your quickstart.

How to properly consume the lib in another app?

I am doing the install the app as follows:

npm install ../lib4 --save

Then, in the main module, doing the import in this way:

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { LibModule } from 'lib4/dist/lib4';  // Import lib

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    LibModule  
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

This results in the following error on build stage:

ERROR in Error encountered resolving symbol values statically. Could not resolve lib4/dist/lib4 relative to C:/dev/appProject/src/app/app.module.ts., resolving symbol AppModule in C:/dev/appProject/src/app/app.module.ts, resolving symbol AppModule in C:/dev/appProject/src/app/app.module.ts

ERROR in C:/dev/appProject/src/app/app.module.ts (7,27): Cannot find module 'lib4/dist/lib4'.)

I tried importing the dist/ files and also the bundles/ versions having similar errors in either cases.

Environment used: the app is built using angular-cli based (v. 1.0.0.-rc.2) plus angular v.2.4.9, node 7.7.2 on Windows 10.

Thanks!

Hello,

Currently, the build is failing in travis while running integration tests: https://travis-ci.org/filipesilva/angular-quickstart-lib/builds/256144980

[17:53:37] E/direct - Error message: Could not find update-config.json. Run 'webdriver-manager update' to download binaries.
[1] [17:53:37] E/direct - Error: Could not find update-config.json. Run 'webdriver-manager update' to download binaries.
[1] at IError (/home/travis/build/filipesilva/angular-quickstart-

Below is a list of small issues and gotcha's that cost me a lot of time trying to built a non-trivial angular library using the starter template.
The plan was to extract a fully functioning ngrx store from our main application so we could reuse it in future applications.
This library has no visual components but does have external library dependencies.

I've written this text as a quick and dirty summary of my experiences and to hopefully save other people some time who are trying to do the same thing.

Everything as peerDependency

Only way to get my external dependencies to work is to add them all as both peerDependencies as devDepencies. This practice is discussed in the readme of the library seed but bears repeating.

Don't forget @types

Modules that don't expose their typings directly through their package.json need to be added.
So for lodash you would do: npm install --save-dev @types/lodash

Rollup index include

The rollup bundler will not understand any implicit include of an index.ts for a folder. So you will need to rewrite the following:

import { reducer } from './reducers';

to the following:

import { reducer } from './reducers/index';

Rollup warnings (externals)

You will be greeted by a wall of warning about globals and externals you use in your code. All the externals need to be defined in the build.js file. I ended up with the following list which will need to be updated again if I add new external code imports (ie. rxjs operators).

globals: {
  // The key here is library name, and the value is the the name of the global variable name
  // the window object.
  // See https://github.com/rollup/rollup/wiki/JavaScript-API#globals for more.
  '@angular/common':                  'ng.common',
  '@angular/core':                    'ng.core',
  '@angular/forms':                   'ng.forms',
  '@angular/platform-browser':        'ng.platform.browser',
  '@angular/router':                  'ng.router',
  '@ngrx/core':                       'ngrx.core',
  '@ngrx/core/index':                 'ngrx.core',
  '@ngrx/effects':                    'ngrx.effects',
  '@ngrx/effects/index':              'ngrx.effects',
  '@ngrx/router-store':               'ngrx.routerStore',
  '@ngrx/router-store/index':         'ngrx.routerStore',
  '@ngrx/store':                      'ngrx.store',
  '@ngrx/store/index':                'ngrx.store',
  'my-sdk-js':                        'MySDK',
  'lodash':                           '_',
  'lodash/index':                     '_',
  'ngx-cookie':                       'ngx-cookie',
  'ngx-cookie/index':                 'ngx-cookie',
  'reselect':                         'Reselect',
  'reselect/index':                   'Reselect',
  'rxjs':                             'Rx',
  'rxjs/add/operator/catch':          'Rx.Observable.prototype',
  'rxjs/add/operator/combineLatest':  'Rx.Observable.prototype',
  'rxjs/add/operator/debounceTime':   'Rx.Observable.prototype',
  'rxjs/add/operator/filter':         'Rx.Observable.prototype',
  'rxjs/add/operator/first':          'Rx.Observable.prototype',
  'rxjs/add/operator/map':            'Rx.Observable.prototype',
  'rxjs/add/operator/mergeMap':       'Rx.Observable.prototype',
  'rxjs/add/operator/pluck':          'Rx.Observable.prototype',
  'rxjs/add/operator/skip':           'Rx.Observable.prototype',
  'rxjs/add/operator/switchMap':      'Rx.Observable.prototype',
  'rxjs/add/operator/takeUntil':      'Rx.Observable.prototype',
  'rxjs/add/operator/throttleTime':   'Rx.Observable.prototype',
  'rxjs/add/operator/withLatestFrom': 'Rx.Observable.prototype',
  'rxjs/Observable':                  'Rx',
  'rxjs/observable/empty':            'Rx.Observable',
  'rxjs/observable/fromEvent':        'Rx.Observable',
  'rxjs/observable/fromPromise':      'Rx.Observable',
  'rxjs/observable/merge':            'Rx.Observable',
  'rxjs/observable/of':               'Rx.Observable',
  'rxjs/observable/of':               'Rx.Observable',
  'rxjs/observable/throw':            'Rx.Observable',
  'rxjs/ReplaySubject':               'Rx',
  'rxjs/Subject':                     'Rx',
},
external: [
  // List of dependencies
  // See https://github.com/rollup/rollup/wiki/JavaScript-API#external for more.
  '@angular/common',
  '@angular/core',
  '@angular/forms',
  '@angular/platform-browser',
  '@angular/router',
  '@ngrx/core',
  '@ngrx/core/index',
  '@ngrx/effects',
  '@ngrx/effects/index',
  '@ngrx/router-store',
  '@ngrx/router-store/index',
  '@ngrx/store',
  '@ngrx/store/index',
  'my-sdk-js',
  'lodash',
  'lodash/index',
  'ngx-cookie',
  'ngx-cookie/index',
  'reselect',
  'reselect/index',
  'rxjs',
  'rxjs/add/operator/catch',
  'rxjs/add/operator/combineLatest',
  'rxjs/add/operator/debounceTime',
  'rxjs/add/operator/filter',
  'rxjs/add/operator/first',
  'rxjs/add/operator/map',
  'rxjs/add/operator/mergeMap',
  'rxjs/add/operator/pluck',
  'rxjs/add/operator/skip',
  'rxjs/add/operator/switchMap',
  'rxjs/add/operator/takeUntil',
  'rxjs/add/operator/throttleTime',
  'rxjs/add/operator/withLatestFrom',
  'rxjs/Observable',
  'rxjs/observable/empty',
  'rxjs/observable/fromEvent',
  'rxjs/observable/fromPromise',
  'rxjs/observable/merge',
  'rxjs/observable/of',
  'rxjs/observable/of',
  'rxjs/observable/throw',
  'rxjs/ReplaySubject',
  'rxjs/Subject',
],

Also note the additional entries for the xxx/index variants of the same externals. All these occur based on exactly how modules are imported inside your code. Just keep adding them until all the warnings are gone.

I'm still drowning in a sea of warnings which read: The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten. Which apparently can be safely ignored. I found the following rollupjs issue with a code sample to hide the warnings which feels wrong to me. See Rollup Issue 794. I think mine are caused by the following ngrx effects code: fetch$: Observable<Action> = this.actions$ which I can't get around.

Casing matters

If you look closely you will see an uppercase Observable being referenced. This is not a typo. The observable in Rxjs itself is being exported that way while the operators use the lowercase folder name. It also cost me 30 minutes of my life to determine that reselects exported global has an uppercase R.

SystemJS setup

The included demo App uses systemjs to bundle externals. You will need to also declare externals there. I ended up with the following map:

// map tells the System loader where to look for things
map: {
  // our app is within the app folder
  app:                                 'app',

  // angular bundles
  '@angular/core':                     'npm:@angular/core/bundles/core.umd.js',
  '@angular/common':                   'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler':                 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser':         'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http':                     'npm:@angular/http/bundles/http.umd.js',
  '@angular/router':                   'npm:@angular/router/bundles/router.umd.js',
  '@angular/forms':                    'npm:@angular/forms/bundles/forms.umd.js',

  // other libraries
  'rxjs':                              'npm:rxjs',
  '@ngrx/core':                        'npm:@ngrx/core/bundles/core.umd.js',
  '@ngrx/effects':                     'npm:@ngrx/effects/bundles/effects.umd.js',
  '@ngrx/router-store':                'npm:@ngrx/router-store/bundles/router-store.umd.js',
  '@ngrx/store':                       'npm:@ngrx/store/bundles/store.umd.js',
  'my-sdk-js':                         'npm:my-sdk-js/dist/bundle.js',
  'ngx-cookie':                        'npm:ngx-cookie/bundles/ngx-cookie.umd.js',
  'reselect':                          'npm:reselect/dist/reselect.js',
  'lodash':                            'npm:lodash/lodash.js'
},

You pretty much need to look inside each node_module folder and package.json to figure out the entry points. More hilarity ensued when lodash still wouldn't work. Lodash could not be declared as npm:lodash/index.js because that in turn includes lodash.js which couldn't be resolved when running the demo app. So problems that arise will be completely dependant on the specific module(s) you require. Note that newer versions of modules may once again break this setup as they reorganise their internal file setup.

npm link

Simply does not work as a development setup. You start getting errors like this:

Type 'Observable<boolean>' is not assignable to type 'Observable<boolean>'. Two different types with this name exist, but they are unrelated

And more of the same for all the angular/xxx stuff because there are effectively two versions of the same code floating around. TypeScript issue 6496

After building you can npm install the dist/ folder which effectively copies the output module. Not a very viable development workflow. We ended up developing the entire module inside the main app and taking out the library code when it was stable enough.

Hidden exports

I ended up with a non compiling library that was complaining about a missing 'Reselect' namespace. Reselect is a module used inside our projects and helps with building selectors. By searching through the output typing file for the library I found that reselect itself was indeed missing but it's types were used on calls returned elsewhere. I had to manually export the following:

export { Selector,
         ParametricSelector,
         OutputSelector,
         OutputParametricSelector } from 'reselect';

So if you end up with missing namespace warnings start searching which one it is, where it's being used and what exactly is being used. Export the required types in your library code to ensure they end up in the final typings bundle.

Library initialisation

Our own code also needed a good once over to switch from the pattern of being embedded in the app code to being standalone. Some code previously done in constructors had to be moved to implicit init calls during the library setup. We also could not rely on the environment configuration from a CLI generated app. This was used to add the ngrx store-devtools which is now no longer possible. We will likely fork (or branch) the library to re-add the development tools and immutable support we dont want in production.