GithubHelp home page GithubHelp logo

jvandemo / generator-angular2-library Goto Github PK

View Code? Open in Web Editor NEW
751.0 34.0 122.0 279 KB

Yeoman generator to create an Angular library

License: MIT License

JavaScript 84.90% TypeScript 12.58% HTML 2.52%

generator-angular2-library's People

Contributors

andrewmcwatters avatar artemsky avatar beeman avatar bersling avatar caroso1222 avatar danielgeri avatar dbfannin avatar deblockt avatar gabwh avatar iamartyom avatar izifortune avatar jdjuan avatar jvandemo avatar kktam avatar lamstutz avatar manfredsteyer avatar markpieszak avatar msarsha avatar nathanwalker avatar p1p3 avatar patrickjs avatar rsginer avatar rtrompier avatar samverschueren avatar splaktar avatar tonysamperi avatar wittlock avatar zgabievi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

generator-angular2-library's Issues

AOT

Will it create metadata.json also so that AOT compilation does not fail.

Error 404 / systemjs

I try to add a generated library to Angular 2's hero projet.
https://github.com/angular/quickstart

When i run my server, (npm start) i've got an 404 error :
[1] 17.01.27 17:15:00 404 GET my-lib

I try to add :
my-lib': 'npm:my-lib
or
my-lib': 'npm:my-lib/dist

to systemjs.config.js

Getting error when TSC is run

I am following the directions, however, when it runs tsc I see node_modules/@types/jasmine/index.d.ts(39,52): error TS1005: '=' expected.. Is it using an older version of the type or something?

Remove @types/protractor

Per my npm install...

npm WARN deprecated @types/[email protected]: This is a stub types definition for Protractor (https://github.com/angular/protractor). Protractor provides its own type definitions, so you don't need @types/protractor installed!

I can look into it later but it may involve some other upgrades too. Anyone know if the tsLint issues that prevent people from upgrading have been resolved?

Removing of typings

I think it would be a good idea to get rid of the usage of typings in favour of the more modern approach with node_modules/@types and e.g. a lib entry in tsconfig.json.

Provide build process for standalone bundle

A library can easily be imported using import statements.

But how can we bundle a library as a standalone file that we can e.g. include from a CDN using a <script> element?

E.g. Angular publishes:
https://code.angularjs.org/2.0.0-alpha.46/angular2.js

When looking at the source code, the last few lines in the file automatically register the library:

System.register("angular2/angular2", ["angular2/common", "angular2/core", "angular2/profile", "angular2/lifecycle_hooks", "angular2/bootstrap", "angular2/upgrade"], true, function(require, exports, module) {
  var global = System.global,
      __define = global.define;
  global.define = undefined;
  function __export(m) {
    for (var p in m)
      if (!exports.hasOwnProperty(p))
        exports[p] = m[p];
  }
  __export(require("angular2/common"));
  __export(require("angular2/core"));
  __export(require("angular2/profile"));
  __export(require("angular2/lifecycle_hooks"));
  __export(require("angular2/bootstrap"));
  __export(require("angular2/upgrade"));
  global.define = __define;
  return module.exports;
});

What is the best way to publish such a distributable library file?

Should we still use forRoot?

The index.ts that gets generated includes a forRoot function...

export class SampleModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SampleModule,
      providers: [SampleService]
    };
  }
}

These seem to have been deprecated in most libraries (off the top of my head D3 and AngularMaterial). Do we still want to have this be the template?

add --dry-run option to skip npm install

At times it is very useful to just generate the codebase without installing the NPM modules (since it could take a lot of time). The angular CLI has this option available.

Do you consider this feature useful for the project? If so, I could add a PR.

--dry-run (alias: -d) default value: false

Error when using npm link into an angular-cli project

Currently a freshly generated project causes the following error when using npm link to test the library within a local angular-cli project;

ERROR in Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol NgModule in /path/to/project/node_modules/library-name/node_modules/@angular/core/core.d.ts, resolving symbol SampleModule in /path/to/project/node_modules/library-name/index.ts, resolving symbol SampleModule in /path/to/project/node_modules/library-name/index.ts

I've dealt with this same problem in a separate library component I have (that does not use this generator) and the solution was to move the @angular/* dependencies from dependencies to peerDependencies in package.json (as here) as it causes some bizarre errors (I believe in TypeScript). I don't know if this is something you want to deal with?

Minor Typo in Readme

Hi,
Thanks a lot for the generator!
There's a minor typo in your readme:

$ yo angular-library

should be:

$ yo angular2-library

Cheers

How can I use the use the compiled js files instead of the src files?

Hey @jvandemo , this is a great and probably the best generator for Angular 2 libraries out there. You have done a great job. So thanks.

Second, I created a package and installed in my Angular 2 web application. Now when I import it, it seems like it is loading the .ts files instead of the .js generated bundle. I guess we actually want to used the compiled files instead? Or did you meant to export the .ts files to allow the user to create one unique bundle at the end?

PS: I didn't know if I should publish the question here or in StackOverflow, if needed I can delete this issue and migrate the question there.

various ts errors

I got various ts errors during tsc
what am i doing wrong?

node_modules/angular2/src/core/application_ref.d.ts(83,60): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/application_ref.d.ts(83,146): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/application_ref.d.ts(96,51): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/application_ref.d.ts(96,147): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/application_ref.d.ts(133,90): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/application_ref.d.ts(171,81): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/change_detection/differs/default_keyvalue_differ.d.ts(23,15): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/change_detection/differs/default_keyvalue_differ.d.ts(25,16): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/change_detection/parser/locals.d.ts(3,14): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/change_detection/parser/locals.d.ts(4,42): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/debug/debug_node.d.ts(14,13): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/debug/debug_node.d.ts(24,17): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/debug/debug_node.d.ts(25,17): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/di/provider.d.ts(436,103): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/di/provider.d.ts(436,135): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/linker/compiler.d.ts(12,50): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/linker/compiler.d.ts(16,41): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/linker/dynamic_component_loader.d.ts(108,136): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/linker/dynamic_component_loader.d.ts(156,150): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/linker/dynamic_component_loader.d.ts(197,128): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/linker/dynamic_component_loader.d.ts(203,127): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/linker/dynamic_component_loader.d.ts(204,141): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/linker/dynamic_component_loader.d.ts(205,119): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/render/api.d.ts(13,13): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/render/api.d.ts(14,84): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/facade/async.d.ts(27,33): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/facade/async.d.ts(28,45): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/facade/collection.d.ts(1,25): error TS2304: Cannot find name 'MapConstructor'.
node_modules/angular2/src/facade/collection.d.ts(2,25): error TS2304: Cannot find name 'SetConstructor'.
node_modules/angular2/src/facade/collection.d.ts(4,27): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/facade/collection.d.ts(4,39): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/facade/collection.d.ts(7,9): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/facade/collection.d.ts(8,30): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/facade/collection.d.ts(11,43): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/facade/collection.d.ts(12,27): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/facade/collection.d.ts(14,23): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/facade/collection.d.ts(15,25): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/facade/collection.d.ts(100,41): error TS2304: Cannot find name 'Set'.
node_modules/angular2/src/facade/collection.d.ts(101,22): error TS2304: Cannot find name 'Set'.
node_modules/angular2/src/facade/collection.d.ts(102,25): error TS2304: Cannot find name 'Set'.
node_modules/angular2/src/facade/lang.d.ts(4,17): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/facade/lang.d.ts(5,17): error TS2304: Cannot find name 'Set'.
node_modules/angular2/src/facade/lang.d.ts(70,59): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/facade/promise.d.ts(2,14): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/facade/promise.d.ts(8,32): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/facade/promise.d.ts(9,38): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/facade/promise.d.ts(10,35): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/facade/promise.d.ts(10,93): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/facade/promise.d.ts(11,34): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/facade/promise.d.ts(11,50): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/facade/promise.d.ts(12,32): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/facade/promise.d.ts(12,149): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/facade/promise.d.ts(13,43): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/CoreOperators.d.ts(35,67): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/CoreOperators.d.ts(50,66): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/CoreOperators.d.ts(89,67): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/CoreOperators.d.ts(94,38): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/CoreOperators.d.ts(94,50): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(46,62): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(47,42): error TS2304: Cannot find name 'Iterator'.
node_modules/rxjs/Observable.d.ts(103,74): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(103,84): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(143,66): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(158,65): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(201,66): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(206,38): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(206,50): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/observable/ForkJoinObservable.d.ts(6,50): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/observable/ForkJoinObservable.d.ts(7,58): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/observable/FromObservable.d.ts(7,38): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/observable/FromObservable.d.ts(7,51): error TS2304: Cannot find name 'Iterator'.
node_modules/rxjs/observable/PromiseObservable.d.ts(9,31): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/observable/PromiseObservable.d.ts(10,26): error TS2304: Cannot find name 'Promise'.

how to add a sass/css compiler with generator-angular2-library?

I'm using your angular app to create a library of components.
I would like to develop some components with *.sass or *.scss files and compile them in css in the "dist" folder.
I imagine the best way should be adding this option on the command line "npm run tsc".
Is it already included ?
Can I do it easily ?

Creating an angular2 library seed project

@jvandemo I wanted to get your thoughts on this...

I'm planning on creating an angular2 library seed project. The advantage to a seed project over a generator is you get the project tooling, build pipeline, testing support, and an out of box setup to demo the library. It also prepares the developer for publishing their library to npm with all the necessary .gitignore and .npmignore files to keep things tidy.

How does that sound? Does one already exist that you know of? Anything in particular that you think needs to be in there?

version 5 is not published to NPM

I was having issues with npm install on generated library related to 'postinstall typings'.
I saw there was a pull request related and noticed version 5 was released, but on npm the latest version is 4.
"4.0.0 is the latest of 18 releases"

I will install from GitHub, but I spent some time figuring our this was my issue - so if someone is having issues with post install typings that's the reason.

Issue with npm link

I am experiencing an issue with a generated ng2-library when attempting to npm link into a project using webpack. I created an ng2-library-test from the generator, and did not change any of the boilerplate code. I published the library to npm at ng2-library-test and installed it in a boilerplate project here. When I run the project all works as expected. However, when I npm link the library locally, I get errors when trying to run the project:

ERROR in ../ng2-library-test/ng2-library-test.js
Module not found: Error: Cannot resolve module 'awesome-typescript-loader' in /Users/ng2-library-test
 @ ../ng2-library-test/ng2-library-test.js 5:19-46 8:9-36

ERROR in ../ng2-library-test/ng2-library-test.js
Module not found: Error: Cannot resolve module 'awesome-typescript-loader' in /Users/ng2-library-test
 @ ../ng2-library-test/ng2-library-test.js 6:14-36 10:9-31

ERROR in ../ng2-library-test/ng2-library-test.js
Module not found: Error: Cannot resolve module 'awesome-typescript-loader' in /Users/ng2-library-test
 @ ../ng2-library-test/ng2-library-test.js 7:17-42 9:9-34

ERROR in ../ng2-library-test/ng2-library-test.ts
Module not found: Error: Cannot resolve module 'awesome-typescript-loader' in /Users/ng2-library-test
 @ ../ng2-library-test/ng2-library-test.ts 5:19-46 8:9-36

ERROR in ../ng2-library-test/ng2-library-test.ts
Module not found: Error: Cannot resolve module 'awesome-typescript-loader' in /Users/ng2-library-test
 @ ../ng2-library-test/ng2-library-test.ts 6:14-36 10:9-31

ERROR in ../ng2-library-test/ng2-library-test.ts
Module not found: Error: Cannot resolve module 'awesome-typescript-loader' in /Users/ng2-library-test
 @ ../ng2-library-test/ng2-library-test.ts 7:17-42 9:9-34

Any ideas? Have you been able to npm link with a generated library successfully?

[proposal] Remove "2" from the generated Angular[2] <- library created names

Since going forward Angular2 is just going to be called Angular, it might be best to make sure people call their libraries by that (angular-libraryname), or the other common shortcut ngx-libraryname.

http://angularjs.blogspot.com/2016/12/ok-let-me-explain-its-going-to-be.html

Should we make some quick updates to the generator so we make sure people start going that route?
Maybe even just a note to let people know about new naming conventions?

Just trying to help! :)

Cannot find name 'Iterable' while using angular 4.

> npm run tsc

node_modules/@angular/core/src/change_detection/differs/iterable_differs.d.ts(15,48): error TS2304: Cannot find name 'Iterable'.

npm ERR! Darwin 16.4.0
npm ERR! argv "/Users/username/.nvm/versions/node/v7.7.3/bin/node" "/Users/username/.nvm/versions/node/v7.7.3/bin/npm" "install"
npm ERR! node v7.7.3
npm ERR! npm  v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] prepublish: `tsc`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] prepublish script 'tsc'.
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 myservice-api package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     tsc
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugsmyservice-api
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls myservice-api
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/username/work-place/myservice-api/npm-debug.log

How to serve?

Hi,

I'm getting this error. How to do the development from this project?

Using ng serve cause the error. Any other alternative way?

bash-3.2$ ng serve
You have to be inside an angular-cli project in order to use the serve command.

Solution wont works with html file template

I change sample componente to read HTML file template, but dist wont works. Given error

Unhandled Promise rejection: Failed to load sample.component.html

Do you have any solve?

Look the change:

@Component({ selector: 'sample-component', templateUrl: './sample.component.html' }) export class SampleComponent {}

Unexpected value 'SamplePipe' declared by the module 'AppModule'

When working on new Angular2.0 project (check project's package.json), it gives the error:

Unexpected value 'SamplePipe' declared by the module 'AppModule'

Project's dependencies:

"dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "angular-cli": "1.0.0-beta.15",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.5",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2"
  }

App Module's code:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { PROVIDERS, PIPES } from 'new-library';
@NgModule({
  declarations: [
    AppComponent,
    PIPES
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [PROVIDERS],
  bootstrap: [AppComponent]
})
export class AppModule { }

I didn't change anything in the files that were generated using the generators. Just used "npm link" to register locally, and then linked to the test project to test the library in development environment.

Libraries depending on libraries and template inlining not working?

First off, thank you for the generator. It has been pretty tough figuring out exactly what the Angular community is aiming for with project configuration of libraries vs. applications.

I created two libraries (call them A and B) using this generator and an application using the angular-cli. Library A depends on B, and the library A has templateUrl specified in a number of components. When the app is built (npm run build), the templates are not included. Also, the library that depends on the other can't run through npm run build.

I'm not sure exactly which errors are caused by what problems, so I'm just going to walk through this here to see if I can get my libraries working (they've been fine up until now, but I've been using tsc and not been worrying about AoT).

Taking a step back to just Library A, if I run npm run prepublish, nothing gets inlined.
For example, one of the components in A that has a templateUrl specified, the corresponding js still says templateUrl: 'the.component.template.name.html' -- it was never in-lined.

Not knowing if this is tied to running npm run build, I tried it, but I get the following error:

Error: ENOENT: no such file or directory, open '/projects/ui-development/library-a/dist/node_modules/library-b/src/shared/base.service.metadata.json'
    at Error (native)
    at Object.fs.openSync (fs.js:640:18)
    at Object.fs.writeFileSync (fs.js:1333:33)
    at MetadataWriterHost.writeMetadata (/projects/ui-development/library-a/node_modules/@angular/tsc-wrapped/src/compiler_host.js:115:22)
    at MetadataWriterHost._this.writeFile (/projects/ui-development/library-a/node_modules/@angular/tsc-wrapped/src/compiler_host.js:92:23)
    at Object.writeFile (/projects/ui-development/library-a/node_modules/typescript/lib/typescript.js:64240:132)
    at Object.writeFile (/projects/ui-development/library-a/node_modules/typescript/lib/typescript.js:9020:14)
    at printSourceFileOrBundle (/projects/ui-development/library-a/node_modules/typescript/lib/typescript.js:61204:16)
    at emitSourceFileOrBundle (/projects/ui-development/library-a/node_modules/typescript/lib/typescript.js:61155:21)
    at Object.forEachEmittedFile (/projects/ui-development/library-a/node_modules/typescript/lib/typescript.js:8986:17)
Compilation failed

It seems to be trying to open library B's base service metadata file in library-a/dist/node_modules/library-b/src/... (vs. library-a/node_modules/library-b/dist/src/...).

As for my project setup, this project's README suggests using npm link. The libraries cannot be linked because there seem to be many closed (and unresolved) issues related to the angular-cli generating applications that ultimately emit obscure errors about makeDecorator not being statically analyzable, etc. (here's one). Therefore my only solution so far has been to make my package.json dependency for the libraries point to a file path relative to the application or library:

Application's package.json

"dependencies": {
    "library-a": "../library-a"

Library A's package.json

"dependencies": {
    "library-b": "../library-b"
}

In each case, I then use npm install ... to install/refresh changes up-stream to the application.

I apologize for the rather wide net of errors, but I've been at this all day trying to unpack all these little obscure error messages. At this point I'm not sure what errors are related and which are not since all of my code runs through tsc just fine.

add /dist to .gitignore

Was wondering whether or not /dist should be ignored. I've gone through material, ngbootstrap and Ionic, which I consider some of the most relevant ng libraries out there, and all of them add /dist to the gitignore.

I don't mind opening a PR for this, just wanted to open an issue and discuss this first.

Package typings file cannot contain tripleslash references

So I got my custom library wired up but I have an issue with the Reference Path.. When i compile the Typescript in the app that imports the library I get...

error TS2654: Exported external package typings file cannot contain tripleslash references. Please contact the package author to update the package definition.

if I delete the /// from the main Typescript file (import entry point) the error goes away but I cannot compile the Typescript in my library anymore.

How can I resolve this and keep both sides happy?

ES5 ts build index.js keep import

Hi,

The current build of the generator is currently keeping the import inclusion (es6) in the index.js but the webpack of my angular 4 project is not converting the libraries into es5 and if I change the tsconfig.es5.json module to commonjs I don't have all the .ts files into the index.js.

Do you have a solution for that ?

Regards,

Gaetan SENN

Generate tests for each generated piece

To make testing libs easier, we should add testing infrastructure and have the generator automatically generate generic tests for the various generated pieces.

Problem finding angular2 module

Hello,
When I run npm install, during the tsc execution I get this error:

TS2307: Cannot find module 'angular2/angular2'

What is the cause of this?
Sorry for open an issue for this, but I don't found nothing that works.

Thanks,
Renan.

[ts] Experimental support for decorators error

Repro steps:

  1. Scaffold an app running yo angular2-library
  2. Open it in vscode
  3. Add file hello.component.ts
  4. Add this into the file:
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: `<h1>Hello World</h1>`
})
export class HelloComponent {
  title = 'app works!';
}

Error
At this point, TypeScript will underline HelloComponent complaining about this:

[ts] Experimental support for decorators is a feature that is subject to change in future release. Set the 'experimentalDecorators' option to remove this warning

The "experimentalDecorators" flag is set to true in tsconfig.json, but the error is still showing up. Any idea on how to fix this?

<package-name> has no exported member SampleModule

First of all thanks for creating this project!

I'm trying to create a library that has a few components. Using version 3.0.4 of this generator I've created my library. When I try to include the library in my application I get an error:

Module '"/path/to/angular-sample-app/node_modules/angular-sample-module/dist/index"' 
has no exported member 'SampleModule'.

The fix for this is quite simple, changing export default class SampleModule to export class SampleModule makes it work.

I was wondering if this is expected behavior or if the generator should actually export the class without it being default?

If the latter is the case, please consider my PR. Thanks!

I can not install lib

I did librely, than I published it, but I can not install what i did.
Does generator work?

npm install hope --save

> [email protected] install S:\Sources\Applications\prototype\platform\resource-management\app\node_modules\node-zopfli
> node-pre-gyp install --fallback-to-build

node-pre-gyp ERR! Tried to download(403): https://node-zopfli.s3.amazonaws.com/Release/zopfli-v1.4.0-node-v48-win32-x64.tar.gz
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v48 ABI) (falling back to source compile with node-gyp)
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack     at failNoPython (S:\Sources\Applications\prototype\platform\resource-management\app\node_modules\node-gyp\lib\configure.js:449:14)
gyp ERR! stack     at S:\Sources\Applications\prototype\platform\resource-management\app\node_modules\node-gyp\lib\configure.js:404:11
gyp ERR! stack     at S:\Sources\Applications\prototype\platform\resource-management\app\node_modules\node-gyp\node_modules\graceful-fs\polyfills.js:264:29
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:123:15)
gyp ERR! System Windows_NT 6.1.7601
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "S:\\Sources\\Applications\\prototype\\platform\\resource-management\\app\\node_modules\\node-gyp\\bin\\node-gyp.js" "configure" "--fallback-to-build" "--module=S:\\Sources\\Applications\\prototype\\platform\\resource-management\\app\\node_modules\\node-zopfli\\lib\\binding\\node-v48-win32-x64\\zopfli.node" "--module_name=zopfli" "--module_path=S:\\Sources\\Applications\\prototype\\platform\\resource-management\\app\\node_modules\\node-zopfli\\lib\\binding\\node-v48-win32-x64"
gyp ERR! cwd S:\Sources\Applications\prototype\platform\resource-management\app\node_modules\node-zopfli
gyp ERR! node -v v6.9.1
gyp ERR! node-gyp -v v3.4.0
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute 'C:\Program Files\nodejs\node.exe S:\Sources\Applications\prototype\platform\resource-management\app\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=S:\Sources\Applications\prototype\platform\resource-management\app\node_modules\node-zopfli\lib\binding\node-v48-win32-x64\zopfli.node --module_name=zopfli --module_path=S:\Sources\Applications\prototype\platform\resource-management\app\node_modules\node-zopfli\lib\binding\node-v48-win32-x64' (1)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (S:\Sources\Applications\prototype\platform\resource-management\app\node_modules\node-pre-gyp\lib\util\compile.js:83:29)
node-pre-gyp ERR! stack     at emitTwo (events.js:106:13)
node-pre-gyp ERR! stack     at ChildProcess.emit (events.js:191:7)
node-pre-gyp ERR! stack     at maybeClose (internal/child_process.js:877:16)
node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
node-pre-gyp ERR! System Windows_NT 6.1.7601
node-pre-gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "S:\\Sources\\Applications\\prototype\\platform\\resource-management\\app\\node_modules\\node-pre-gyp\\bin\\node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd S:\Sources\Applications\prototype\platform\resource-management\app\node_modules\node-zopfli
node-pre-gyp ERR! node -v v6.9.1
node-pre-gyp ERR! node-pre-gyp -v v0.6.31
node-pre-gyp ERR! not ok
Failed to execute 'C:\Program Files\nodejs\node.exe S:\Sources\Applications\prototype\platform\resource-management\app\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=S:\Sources\Applications\prototype\platform\resource-management\app\node_modules\node-zopfli\lib\binding\node-v48-win32-x64\zopfli.node --module_name=zopfli --module_path=S:\Sources\Applications\prototype\platform\resource-management\app\node_modules\node-zopfli\lib\binding\node-v48-win32-x64' (1)
[email protected] S:\Sources\Applications\prototype\platform\resource-management\app
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
`-- [email protected]

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\node-zopfli):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] install: `node-pre-gyp install --fallback-to-build`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

Adapting to the latest Angular Library Spec presented by Google

@jvandemo in the latest ng-conf Jason Aden from Google presented an approach to building Angular Libraries using Angular Compiler (NGC) and Rollup. More information can be found here. This is the favored way to create Angular libraries according to Stephen Fluin from the Angular Core team.

So I opened this issue to know if you have considered refactoring this generator a little bit to better align with those practices which make libraries AOT ready.

If so, we could use this issue to document the changes that need to be addressed and how contributors should be able to help. What are your thoughts?

Template files are not coppied to dist folder

The template files of components are not copied to the dist folder.

It would be possible to create them there directly but this does not seem like a clean solution.

@Component({
    moduleId: module.id,
    templateUrl: require('./abc.html'), // <<-----
})
export class AbcComponent implements OnInit {

Dash-Case vs. CamelCase

In the readme, you write

<h1>{{ title }}</h1>
<sampleComponent>
  This component is part of the shared library and will now work as expected.
</sampleComponent>

however, when I tried it out, I had to use

<h1>{{ title }}</h1>
<sample-component>
  This component is part of the shared library and will now work as expected.
</sample-component>

Is this an issue or just a misunderstanding of concepts from my side?

Error Building my library in Windows

Hi,

In Windows with a new library (only generated code) I'm getting (with npm run build):

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Users\\myuser\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build' ]
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\myuser\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin;D:\work\WorkspaceLabs\angular-library\node_modules\.bin;C:\ProgramData\Oracle\Java\javapath;C:\Program Files\Microsoft MPI\Bin\;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Skype\Phone\;C:\Program Files (x86)\Yarn\bin;C:\Users\myuser\.dnx\bin;C:\Program Files\Microsoft DNX\Dnvm\;C:\Program Files\Microsoft SQL Server\120\Tools\Binn\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files (x86)\Windows Kits\10\Windows Performance Toolkit\;C:\Program Files\PuTTY\;C:\Program Files\dotnet\;C:\ProgramData\chocolatey\bin;C:\Program Files\OpenVPN\bin;C:\Program Files\Git\cmd;C:\Program Files (x86)\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\130\DTS\Binn\;C:\Program Files\Microsoft SQL Server\130\DTS\Binn\;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\130\Tools\Binn\ManagementStudio\;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;C:\Program Files\nodejs\;C:\Users\myuser\AppData\Local\Microsoft\WindowsApps;C:\Program Files\Docker Toolbox;C:\Program Files (x86)\Microsoft VS Code\bin;C:\Users\myuser\AppData\Local\Yarn\.bin;C:\Users\myuser\AppData\Roaming\npm
10 verbose lifecycle [email protected]~build: CWD: D:\work\WorkspaceLabs\angular-library
11 silly lifecycle [email protected]~build: Args: [ '/d /s /c', './build.sh' ]
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: `./build.sh`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (C:\Users\myuser\AppData\Roaming\npm\node_modules\npm\lib\utils\lifecycle.js:279:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:194:7)
14 verbose stack     at ChildProcess.<anonymous> (C:\Users\myuser\AppData\Roaming\npm\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:194:7)
14 verbose stack     at maybeClose (internal/child_process.js:899:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid [email protected]
16 verbose cwd D:\work\WorkspaceLabs\angular-library
17 verbose Windows_NT 10.0.14393
18 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\myuser\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
19 verbose node v7.9.0
20 verbose npm  v4.5.0
21 error code ELIFECYCLE
22 error errno 1
23 error [email protected] build: `./build.sh`
23 error Exit status 1
24 error Failed at the [email protected] build script './build.sh'.
24 error Make sure you have the latest version of node.js and npm installed.
24 error If you do, this is most likely a problem with the angular-library package,
24 error not with npm itself.
24 error Tell the author that this fails on your system:
24 error     ./build.sh
24 error You can get information on how to open an issue for this project with:
24 error     npm bugs angular-library
24 error Or if that isn't available, you can get their info via:
24 error     npm owner ls angular-library
24 error There is likely additional logging output above.
25 verbose exit [ 1, true ]

I tried several versions of nodeJS and npm but the error always happens.

The same command with the same src in a Linux environment: Bash on Ubuntu on Windows works great.

Any idea/clue about what may be causing the error in Windows?

linting fails

Two problems occur when attempting to run lint:

  1. Codelyzer fails to parse the TypeScript version properly:
/Users/JohnBrecht/dev/ng2-lib-test/node_modules/codelyzer/util/syntaxKind.js:1480
                throw new Error('Unsupported TypeScript version: ' + ts.version);
                ^
Error: Unsupported TypeScript version: 2.0.2

This can be fixed my bumping the codelyzer version in package.json to ^0.0.28.

  1. One running properly, then there is a lint failure:
    src/sample.component.ts[4, 13]: The selector of the component "SampleComponent" should be named kebab-case (https://goo.gl/mBg67Z)

Which is easily fixed by changing line 4 of sample.component.ts to read:
selector: 'sample-component',

NPM START

I will apologize in advance, (I'm new to node/npm) this is not an issue and more than likely a user error!

But really want to run your generator.

So ran the generator answer the questions... etc.
But when I go to "npm start" this is what I get.

`0 info it worked if it ends with ok

1 verbose cli [ '/usr/bin/nodejs', '/usr/bin/npm', 'start' ]

2 info using [email protected]
3 info using [email protected]
4 verbose stack Error: missing script: start
4 verbose stack at run (/usr/share/npm/lib/run-script.js:147:19)
4 verbose stack at /usr/share/npm/lib/run-script.js:57:5
4 verbose stack at /usr/share/npm/node_modules/read-package-json/read-json.js:345:5
4 verbose stack at checkBinReferences_ (/usr/share/npm/node_modules/read-package-json/read-json.js:309:45)
4 verbose stack at final (/usr/share/npm/node_modules/read-package-json/read-json.js:343:3)
4 verbose stack at then (/usr/share/npm/node_modules/read-package-json/read-json.js:113:5)
4 verbose stack at /usr/share/npm/node_modules/read-package-json/read-json.js:232:12
4 verbose stack at /usr/share/npm/node_modules/graceful-fs/graceful-fs.js:76:16
4 verbose stack at FSReqWrap.readFileAfterClose as oncomplete
5 verbose cwd /var/www/html/broncos
6 error Linux 4.4.0-31-generic
7 error argv "/usr/bin/nodejs" "/usr/bin/npm" "start"
8 error node v4.2.6
9 error npm v3.5.2
10 error missing script: start
11 error If you need help, you may report this error at:
11 error https://github.com/npm/npm/issues
12 verbose exit [ 1, true ]`

For the life of me I can't figure out where the start script is?

Update to `[email protected]`

I noticed you are still using [email protected]. Nothing wrong with that, but not a long time ago, Yeoman released version 1.x of yeoman-generator.

An example of a generator using that is generator-nm. Since that version, you can use a class instead of an object which usually gives cleaner code.

I'm open for doing a PR if you want. Just let me know.

Scoped package name and publishConfig not correct

Gday Jurgen,

thanks for this awesome generator!

We do have two small things that are currently not working as expected:

  • the publishConfig property in the package.json gets removed

it is not in the generated package.json in the dist folder, we need it to be able to publish the library in our internal sonatype nexus npm registry
{ "publishConfig": { "registry": "http://url-to-nexus-npm/" } }

  • scoped library names get replaced by kebab-case

we are currently using scopes for our libraries
"name": "@project/submodule"
In the generated package.json, the name gets transferred to kebabcase "project-submodule".
Would it be possible to leave it as it is defined in the package.json?

Thanks and kind regards
Joachim

Generator fails on typings install

typings install

typings ERR! message https://api.typings.org/entries/dt/es6-shim/tags/0.31.2%2B20160317120654 responded with 401, expected it to equal 200

typings ERR! cwd /Users/e041115/dev/ess-ux-components
typings ERR! system Darwin 14.5.0
typings ERR! command "/usr/local/Cellar/node5/5.11.1/bin/node" "/Users/e041115/dev/ess-ux-components/node_modules/.bin/typings" "install"
typings ERR! node -v v5.11.1
typings ERR! typings -v 1.3.0
typings ERR! code EINVALIDSTATUS

typings ERR! If you need help, you may report this error at:
typings ERR! https://github.com/typings/typings/issues

npm WARN @angular/[email protected] requires a peer of [email protected] but none was installed.
npm WARN @angular/[email protected] requires a peer of zone.js@^0.6.6 but none was installed.
npm ERR! Darwin 14.5.0
npm ERR! argv "/usr/local/Cellar/node5/5.11.1/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v5.11.1
npm ERR! npm v3.8.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] postinstall: typings install
npm ERR! Exit status 1

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.