jhades / angular2-library-example

An example repository for building your own Angular 2 library

Learn how to create an Angular 2 Library

An example repository for learning how to build your own Angular 2 library. Learn how to:

• setup the library public API
• build the library
• version it
• publish it to npm
• package the CSS
• consume the library with SystemJs or Webpack

See further details in this blog post: How to create an Angular 2 component library, and how to consume it using SystemJs or Webpack

Installation

Clone the repository and do:

npm install

Building the library

npm run build

Install the SystemJs Example

cd examples/systemjs
npm install
npm run build
npm start

Then access http://localhost:8080

Install the Webpack Example

cd examples/webpack
npm install
npm start

Then access http://localhost:8080

angular2-library-example's Issues

Error on build - 'rm' is not recognized

here is the npm-debug.log on a Windows 10 environment.

0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Users\danise\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build',
1 verbose cli '--color=always' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]prebuild: [email protected]
6 silly lifecycle [email protected]prebuild: no script for prebuild, continuing
7 info lifecycle [email protected]build: [email protected]
8 verbose lifecycle [email protected]build: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]build: PATH: C:\Users\danise\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin;C:\Dev\ApplicationPlatform-CoreUI\TypeScriptHTMLApp1\node_modules.bin;C:\Program Files\nodejs;.\node_modules.bin;C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files\Microsoft SQL Server\120\Tools\Binn;C:\Program Files\Microsoft SQL Server\130\Tools\Binn;C:\Program Files (x86)\nodejs;C:\Program Files\Git\cmd;C:\Program Files (x86)\Windows Kits\10\Windows Performance Toolkit;C:\Program Files\TortoiseSVN\bin;C:\Program Files\Seq;C:\Program Files\Redis;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\110\Tools\Binn;C:\Program Files (x86)\Microsoft SQL Server\120\Tools\Binn;C:\Program Files\Microsoft SQL Server\120\DTS\Binn;C:\Program Files (x86)\Microsoft SQL Server\120\Tools\Binn\ManagementStudio;C:\Program Files (x86)\Microsoft SQL Server\120\DTS\Binn;C:\Program Files\dotnet;C:\Program Files\nodejs;C:\Users\danise\AppData\Roaming\npm;C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External\git
10 verbose lifecycle [email protected]build: CWD: C:\Dev\ApplicationPlatform-CoreUI\TypeScriptHTMLApp1
11 silly lifecycle [email protected]build: Args: [ '/d /s /c', 'rm -rf lib && tsc -p src' ]
12 silly lifecycle [email protected]build: Returned: code: 1 signal: null
13 info lifecycle [email protected]~build: Failed to exec build script
14 verbose stack Error: [email protected] build: rm -rf lib && tsc -p src
14 verbose stack Exit status 1
14 verbose stack at EventEmitter. (C:\Users\danise\AppData\Roaming\npm\node_modules\npm\lib\utils\lifecycle.js:255:16)
14 verbose stack at emitTwo (events.js:87:13)
14 verbose stack at EventEmitter.emit (events.js:172:7)
14 verbose stack at ChildProcess. (C:\Users\danise\AppData\Roaming\npm\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack at emitTwo (events.js:87:13)
14 verbose stack at ChildProcess.emit (events.js:172:7)
14 verbose stack at maybeClose (internal/child_process.js:829:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
15 verbose pkgid [email protected]
16 verbose cwd C:\Dev\ApplicationPlatform-CoreUI\TypeScriptHTMLApp1
17 error Windows_NT 10.0.10586
18 error argv "C:\Program Files\nodejs\node.exe" "C:\Users\danise\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "build" "--color=always"
19 error node v4.6.0
20 error npm v3.10.8
21 error code ELIFECYCLE
22 error [email protected] build: rm -rf lib && tsc -p src
22 error Exit status 1
23 error Failed at the [email protected] build script 'rm -rf lib && tsc -p src'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the angular2-library-example package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error rm -rf lib && tsc -p src
23 error You can get information on how to open an issue for this project with:
23 error npm bugs angular2-library-example
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls angular2-library-example
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

EXCEMPTION: No Directive annotation found on HelloWorld

When trying to run the webpack example:

browser_adapter.js:76Error: No Directive annotation found on HelloWorld
    at new BaseException (http://localhost:8080/bundle.js:11843:24)
    at DirectiveResolver.resolve (http://localhost:8080/bundle.js:26067:16)
    at RuntimeMetadataResolver.getMetadata (http://localhost:8080/bundle.js:39340:52)
    at http://localhost:8080/bundle.js:39383:63
    at Array.map (native)
    at RuntimeMetadataResolver.getViewDirectivesMetadata (http://localhost:8080/bundle.js:39383:28)
    at RuntimeCommandFactory.componentTemplateFactory (http://localhost:8080/bundle.js:34801:71)
    at RuntimeCommandFactory.createBeginComponent (http://localhost:8080/bundle.js:36900:44)
    at CommandBuilderVisitor.visitElement (http://localhost:8080/bundle.js:37007:51)
    at ElementAst.visit (http://localhost:8080/bundle.js:36043:25)

{Feature request} any chance you could update it to the latest angular? EOM

Publish Library to CDN and consume with angular 2 webpack?

Following the steps (http://blog.angular-university.io/how-to-create-an-angular-2-library-and-how-to-consume-it-jspm-vs-webpack/) I have created the library.
|____components.d.ts
|____components.js
|____lib
| |____HelloWorld.d.ts
| |____HelloWorld.js
| |____HelloWorld.js.map
|____package.json

I want to share the library with multiple projects and do not want it published with npm. So I have hosted the library at an internal CDN., such as - "http://my-local-cdn-website/cdn/dist/a2-libraries/component"

How do I consume the library in other projects having angular 2 with webpack.

Promise.d.ts breaking - How to fix?

XXX:angular2-library-example xxx $ npm run build

> [email protected] build /Users/xxxx/Documents/workspace/angular2-library-example
> rm -rf lib && tsc -p src

node_modules/angular2/src/facade/promise.d.ts(1,10): error TS2661: Cannot re-export name that is not defined in the module.

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v4.4.7
npm ERR! npm  v3.10.7
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `rm -rf lib && tsc -p src`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] build script 'rm -rf lib && tsc -p src'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2-library-example package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     rm -rf lib && tsc -p src
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs angular2-library-example
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls angular2-library-example
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/xxxxx/Documents/workspace/angular2-library-example/npm-debug.log

EXCEPTION: No Directive annotation found on HelloWorld

I get this error

EXCEPTION: No Directive annotation found on HelloWorld