Version:: 1.0.0-pre.13

Description:
If I do not manually install Less ng-packagr complains that it cannot find the module even if I do not want to compile and less files

To Reproduce:
npm i --save-dev [email protected]
ng-packagr -p ng-package.json

Error Message:
Error: Cannot find module 'less'
at Function.Module._resolveFilename (module.js:485:15)
at Function.Module._load (module.js:437:25)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)
at Object. (/Users/dannyblue/Documents/projects/example-lib/node_modules/ng-packagr/lib/steps/assets.js:12:12)
at Module._compile (module.js:569:30)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)

Type of Issue

• Bug Report
• Feature Request

Description

Regression caused by rollup/rollup#1585

How To Reproduce

See above.

You may find that your library suddenly contains empty functions function foo() {} when switching to [email protected]

Expected Behaviour

See above.

We need to wait for a rollup patch. As a temporary solution you can pin ng-packagr to 1.0.0-pre.16

Will keep you updated once the issue is resolved.

Version Information

ng-packagr: v1.0.0-pre.17

Hi, David

I have some questions for you:

• How can I extend the rollup globals for 3rd-parties libraries?
• How can I setup ng-packagr for several libraries in one solution?

Thanks,
Alex

Type of Issue

• Bug Report
• Feature Request

Description

I have a module MapModule that is using openlayers 3 library, so in map.component.ts I have
import * as ol from 'openlayers';

When I run packagr, rollup compiles files with the following line:
import { Map, View, control, format, layer, proj, source } from 'openlayers/index';

i.e. it adds /index at the end, when it should be just openlayers

This issue is related to rollup.js, here is the url that is related to this problem:
angular/angular#16084

To fix this issue: I need access to "annotateForClosureCompiler" property so it can be set to false. At this moment it's part of tsconfig.ngc.json and it set to true by default. Would it be possible to extend packagr so that I can fiddle with tsconfig properties via ng-package.json file?

Thanks Alex

rxjs operators can be used by importing the operators directly instead the patch operators

import {map} from 'rxjs/operator/map';
map.call(exObservable, ...).subscribe(...);

Right now I get the following error:

BUILD ERROR
'map' is not exported by node_modules/rxjs/operator/map.js
Error: 'map' is not exported by node_modules/rxjs/operator/map.js

Type of Issue

• Bug Report
• Feature Request

Description

I currently have a convoluted build process for one of my component libraries. I've been able to almost completely replace with ng-packagr, but I have places where I manually create some core assets like images for these components as well as some scss.

I don't know if/how this fits into the ng-packagr story. I'd like the assets folder to be included in the build, but don't know if a current method exists for inclusion.

Type of Issue

• Bug Report
• Feature Request

Description

Angular Package Format "describes secondary entry points": https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview

We should add a possibility to compile and package such secondary entry points.

How To Reproduce

n/a

Expected Behaviour

TBD

Usage w/ ng-packagr must be further specified!

End result should be, say our already existing lib is @my/lib:

import { TestingStuff } from '@my/lib/testing';

Version Information

ng-packagr: v1.0.0-pre.14

see design doc:

tsc, ngc, rollup and friends all offer a lot of configuration options. only a few of them are benefitial to library authors (e.g. moduleName, flatModuleId). others are needed for build tools only (e.g. entry and format for rollup, target and module for ngc). some can be inferred by library name (e.g. outFile for rollup should be <name>.<format>.js w/ <name> the library name from package.json and <format> one of "umd", "es5", or empty "")

There are two options

1. allow users to provide a custom full configuration, then ng-packagr will need to overwrite certain values
2. allow users only to pass a limited set of configuration options, remaining options will be determined automatically by ng-packagr

Motivation

IMHO, source maps should go back all the way to the original sources w/ external templates and external stylesheets.

Issue

There are, however, various steps where sourcemap translations are lost:

1. processAssets(): styles and templates are inlined into *.ts sources. here, we do not have any sourcemap.
2. ngc(): with the annotateForCloseCompiler options, ngc outputs a sourcemap that points to the es6, closure-annotated sources.

Ideas

For 1): Reach out to gulp-inline-ng2-template

Afaik, in webpack, this works because webpack wraps each *.html or *.css file inside a "module" (a JavaScript module). Since it's a "module" and a module is treated as if it was a separate file (think like: a *.ts file is a TypeScript module), they generate a source map for that. Then, the "module" is loaded with webpack_require() in the app's bundle.

Maybe this could work in a similar way, when:

• translate *.html and *.css to a TypeScript module, generate sourcemap for the *.<template|stylesheet>.ts
• import { template } from './*.<template|stylesheet>.ts' into *.component.ts, generate component sourcemap *.component.ts.map, then re-map to pickup *.<template|stylesheet>.ts.map
• output needs to be a *.components.ts.map that includes CSS / HTML sources

For 2) wait for an upcoming Angular release.

Building with rxjs version 5.4.2 throws an error.
Started build with ng-packagr -p ./ng-package.json.

Console output (shortened, removed usual npm error message:

Building Angular library from ./ng-package.json

BUILD ERROR
'merge' is not exported by node_modules/rxjs/observable/merge.js
Error: 'merge' is not exported by node_modules/rxjs/observable/merge.js
...

In the moment I have no idea why this happens, since Observable.merge hasn't been removed and is still exported properly at first sight...

Taking a look at the integration/sample/ng-package.json example on master, it references a rollup config file called rollup-config.js. However, this file does not exist!

There seems to be two problems here:

• The sample is incomplete, and should contain rollup-config.js
• The sample doesn't fail the build, despite the fact rollup-config.js does not exist.

I'd like to see this feature be implemented in future release.

Type of Issue

• Bug Report
• Feature Request

Description

After trying it on a dead simple app and failed, i cloned the example repo, ng-packaged, and got the same exact error. It builds without a problem, but the moment you try to import the lib to the app you get the error

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '@my/lib' in 'D:\Work\testing\Angular2\ng-packaged\src\app'
resolve '@my/lib' in 'D:\Work\testing\Angular2\ng-packaged\src\app'
  Parsed request is a module
  using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./src/app)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./src/app)
    resolve as module
      D:\Work\testing\Angular2\ng-packaged\src\app\node_modules doesn't exist or is not a directory
      D:\Work\testing\Angular2\ng-packaged\src\node_modules doesn't exist or is not a directory
      D:\Work\testing\Angular2\node_modules doesn't exist or is not a directory
      D:\Work\node_modules doesn't exist or is not a directory
      D:\node_modules doesn't exist or is not a directory
      looking for modules in D:\Work\testing\Angular2\ng-packaged\node_modules
        using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./node_modules)
          using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./node_modules/@my/lib)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Work\testing\Angular2\ng-packaged\node_modules\@my\lib doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Work\testing\Angular2\ng-packaged\node_modules\@my\lib.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Work\testing\Angular2\ng-packaged\node_modules\@my\lib.js doesn't exist
            as directory
              D:\Work\testing\Angular2\ng-packaged\node_modules\@my\lib doesn't exist
      looking for modules in D:\Work\testing\node_modules
        No description file found
        Field 'browser' doesn't contain a valid alias configuration
        No description file found
        no extension
          Field 'browser' doesn't contain a valid alias configuration
          D:\Work\testing\node_modules\@my\lib doesn't exist
        .ts
          Field 'browser' doesn't contain a valid alias configuration
          D:\Work\testing\node_modules\@my\lib.ts doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          D:\Work\testing\node_modules\@my\lib.js doesn't exist
        as directory
          D:\Work\testing\node_modules\@my\lib doesn't exist
      looking for modules in D:\Work\testing\Angular2\ng-packaged\node_modules
        using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./node_modules)
          using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./node_modules/@my/lib)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Work\testing\Angular2\ng-packaged\node_modules\@my\lib doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Work\testing\Angular2\ng-packaged\node_modules\@my\lib.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Work\testing\Angular2\ng-packaged\node_modules\@my\lib.js doesn't exist
            as directory
              D:\Work\testing\Angular2\ng-packaged\node_modules\@my\lib doesn't exist
      looking for modules in D:\Work\testing\Angular2\ng-packaged\src
        using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./src)
          using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./src/@my/lib)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Work\testing\Angular2\ng-packaged\src\@my\lib doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Work\testing\Angular2\ng-packaged\src\@my\lib.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Work\testing\Angular2\ng-packaged\src\@my\lib.js doesn't exist
            as directory
              D:\Work\testing\Angular2\ng-packaged\src\@my\lib doesn't exist
      looking for modules in D:\Work\testing\Angular2\ng-packaged\src
        using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./src)
          using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./src/@my/lib)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Work\testing\Angular2\ng-packaged\src\@my\lib doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Work\testing\Angular2\ng-packaged\src\@my\lib.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Work\testing\Angular2\ng-packaged\src\@my\lib.js doesn't exist
            as directory
              D:\Work\testing\Angular2\ng-packaged\src\@my\lib doesn't exist

The angular app.module.ts

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 { MyLibModule } from '@my/lib';

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

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "angularCompilerOptions": {
    "paths": {
      "@my/lib": [ "../dist/my-lib" ]
    }
  },
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": [],
    "paths": {
      "@my/lib": [ "../dist/my-lib" ]
    }
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

main tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ],
    "paths": {
      "@my/lib": [ "dist/my-lib" ]
    }
  },
  "exclude": [
    ".ng_build"
  ]
}

How To Reproduce

$ yarn install
$ yarn build:lib
$ ng serve

Version Information

ng-packagr: v1.0.1
node: v8.1.2
@angular: v4.3.2
rxjs:
zone.js:

see https://circleci.com/docs/1.0/npm-continuous-deployment/

Type of Issue

• Bug Report
• Feature Request

Description

Whenever a Kendo ui element is included into the app, sorceryJs goes mental. It does not matter if it is added as a dependency or as a peerDependency.

How To Reproduce

I have setup a small example project here. In short what I did was:

1. Create new app with Angular CLI
2. Add new button component
3. Add Kendo UI button module to app
4. Use the Kendo ui button component in the apps' button component
5. Run npm run build.lib (ng-packagr -p ng-package.json)

Increasing the max amount of memory node can use did not solve this (it just went right up to 10Gb, so I assume there must be some circular reference?)

I have tried to get this working for a couple of days now, but I can't seem to figure it out. The Kendo module provides es2015 so I thought this would work, but apparently something goes amiss. Is this due to the module being way to big?

Expected Behaviour

When running the ng-packagr command I would expect it to bundle everything.

Version Information

ng-packagr: latest (also tested with incoming PR#83 for commonJS compatability)
node: v6.11.1
refer to the example project for dependencies

in cli.js

.catch((e) => {
  printErrorMessageToScreen(e);
  process.exit(111);
})

also helps with #16

Type of Issue

• Bug Report
• Feature Request

Description

Currently, need to add external for the new HttpClient and HttpClientModule by hand:

    "lib": {
        "externals": {
            "@angular/common/http": "ng.common.http"
        }

How To Reproduce

See above. If ommiting the externals mapping, it results in a corrupt library build (w/o an error by the way).

Expected Behaviour

It would be cool, if the @angular/common/http is supported out-of-the-box!

Version Information

ng-packagr: v1.0.0-pre.16
node: v8.3.0
@angular: v4.3.5
rxjs: 5.4.2
zone.js: 0.8.14

We use ng-packagr for packaging a Angular 4 Module.
Unfortunately it does not work with the import of class-transformer. It states the nodemodule/class-transfomer does not define / export plainclass.
If we use EmptyObservable from Rxjs the same problem occurs.
Is there a solution for it?

Thanks.

Hi,
I'm using a the clarity UI framework from vmware.

But the build failed. Do you have any idea where this could be from ?
There is only a index.js into the directory but a .ts seems to be needed during the build.

BUILD ERROR
ENOENT: no such file or directory, open 'C:\my-project\node_modules\clarity-angular\utils\loading\loading.ts'
Error: ENOENT: no such file or directory, open 'C:\my-project\Documents\playground\ihm-tx\node_modules\clarity-angular\utils\loading\loading.ts'

I always get error on compiling:

BUILD ERROR
'letProto' is not exported by node_modules\rxjs\operator\let.js
Error: 'letProto' is not exported by node_modules\rxjs\operator\let.js

Here is my source code: https://github.com/piernik/alert-error

track progress in sass/node-sass#1998

Type of Issue

• Bug Report
• Feature Request

Description

FESM bundles include inlined external dependencies.

How To Reproduce

Exmaple w/ ngx-translate:

The ng-package.json:

{
    "$schema": "../../node_modules/ng-packagr/lib/ng-package.schema.json",
    "lib": {
        "entryFile": "public_api.ts",
        "externals": {
            "@ngx-translate/core": "ngx-translate-core"
        }
    }
}

The source code:

import { TranslateService } from '@ngx-translate/core';

export class MyLib {
  // do stuff with TranslateService
}

In the .ng_build directory, the generated .js file ends up with the following import:

import { TranslateModule, TranslateLoader } from '@ngx-translate/core/index';

The import path from @ngx-translate/core in the source was re-written to @ngx-translate/core/index, thus the externals mapping does not match and rollup inlines the third-party dependency.

To confirm the cause, the following setting then produces a good FESM bundle!

{
    "lib": {
        "entryFile": "public_api.ts",
        "externals": {
            "@ngx-translate/core": "ngx-translate-core",
            "@ngx-translate/core/index": "ngx-translate-core"
        }
    }
}

FESM Bundle:

import { TranslateLoader, TranslateModule } from '@ngx-translate/core/index';

Expected Behaviour

Externals dependencies shouldn't be rewritten.

Usage of lib.externals in ng-package.json SHOULD BE the TypeScript import path from sources!
In above examples: @ngx-translate/core.

Version Information

ng-packagr: v1.0.0-pre.14
node: v8.1.1
@angular: v4.3.3
@ngx-translate/core: v7.1.0
rxjs: 5.4.2
zone.js: 0.8.16

Because of lack of publishing lib with Angular CLI, I started to use your plugin which packages our Angular app into NPM package that can be published. Our whole Angular application is both library and application that can be built to be hosted. My goal here is to package the application so that others applications can use our reusable components. There is the ng-package.json :

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "src": "",
  "dest": "dist",
  "workingDirectory": ".ng_build",
  "lib": {
    "entryFile": "src/public_api.ts"
  }
}

The public_api.ts only export the main module that will be imported in the other application.

export * from './app/main.module';

And this is our package.json file

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:lib": "ng-packagr",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
"dependencies": {
    "@angular/animations": "^4.1.3",
    "@angular/common": "^4.1.3",
    "@angular/compiler": "^4.1.3",
    "@angular/core": "^4.1.3",
    "@angular/forms": "^4.1.3",
    "@angular/http": "^4.1.3",
    "@angular/platform-browser": "^4.1.3",
    "@angular/platform-browser-dynamic": "^4.1.3",
    "@angular/router": "^4.1.3",
...
}

When I launch npm run build:lib, I face into this error

Building Angular library from C:\_Git\SFK\src\Sfk.WebComponents\ng-package.json
fs.js:583
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open 'C:\_Git\SFK\src\Sfk.WebComponents\node_modules\@angular\animations\src\my-component-tpl.html'
    at Object.fs.openSync (fs.js:583:18)
    at Object.fs.readFileSync (fs.js:490:33)
    at getFileData (C:\_Git\SFK\src\Sfk.WebComponents\node_modules\gulp-inline-ng2-template\parser.js:284:17)
    at C:\_Git\SFK\src\Sfk.WebComponents\node_modules\gulp-inline-ng2-template\parser.js:248:22
    at C:\_Git\SFK\src\Sfk.WebComponents\node_modules\async\dist\async.js:3830:24
    at replenish (C:\_Git\SFK\src\Sfk.WebComponents\node_modules\async\dist\async.js:946:17)
    at C:\_Git\SFK\src\Sfk.WebComponents\node_modules\async\dist\async.js:950:9
    at eachOfLimit (C:\_Git\SFK\src\Sfk.WebComponents\node_modules\async\dist\async.js:975:24)
    at C:\_Git\SFK\src\Sfk.WebComponents\node_modules\async\dist\async.js:980:16
    at _parallel (C:\_Git\SFK\src\Sfk.WebComponents\node_modules\async\dist\async.js:3829:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:lib: `ng-packagr`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build:lib script 'ng-packagr'.
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 sfk package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ng-packagr
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs sfk
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls sfk
npm ERR! There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\cgigax\AppData\Roaming\npm-cache\_logs\2017-06-08T11_01_23_336Z-debug.log

The log say something like this

13 info lifecycle [email protected]~build:lib: Failed to exec build:lib script
14 verbose stack Error: [email protected] build:lib: `ng-packagr`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (C:\Users\cgigax\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\cgigax\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)

Any ideas ?

see https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/json-schema

and schema-tree.spec.ts

The description of the lib.externals entry in the package schema led me to believe I could list additional key/value pairs and have them included in the externals passed to rollup.

This didn't work, so I looked into the code and - unless I'm missing something - the lib.externals entry is not being referenced anywhere at all, so my inputs there are being ignored.

If this is intentional, the entry should be removed from the package schema - but FWIW I hope it isn't, as I can't use this (otherwise great!) tool to build the app I'm working on unless I can include some of its third-party libs (in particular, angularfire2 and firebase) as rollup externals.

I threw together a quick implementation that's working for my app here - I'd be happy to clean it up and submit a pull request if you'd like me to.

Type of Issue

• Bug Report
• Feature Request

Description

ng-packagr experiences an exception in fs.js:12 -> resolve(buffer.toString()); can't read property 'toString()' of undefined.

My guess is that fs is failing, but resolve is still attempting to execute after reject in the fs.ts file. This operates under the assumption that buffer is undefined when an error has occurred. If that assumption is not correct, then an additional check would need to be added to the following fix:

if (err) {
    reject(err);
} else {
    resolve(buffer.toString());
}

How To Reproduce

Clone my repo, npm install, then npm run build:lib

Expected Behaviour

ng-packagr should either succeed or print a helpful error message.

Version Information

ng-packagr: v1.1.0
node: v8.5.0
@angular: v4.4.1
rxjs: v5.4.3
zone.js: v0.8.17

Repro / Error:

$ ng serve --extract-css
** NG Live Development Server is listening on localhost:4200, open your browser on http://
localhost:4200 **
 92% chunk asset optimization<project>\node_modules\source-map\lib\source-node.js:95
          var code = nextLine.substr(0, mapping.generatedColumn -
                             ^

TypeError: Cannot read property 'substr' of undefined
    at Function.<anonymous> (<project>\node_modules\source-map\lib\source-node.js:95:30)
    at Array.forEach (native)
    at SourceMapConsumer_eachMapping [as eachMapping] (<project>\node_modules\source-map\lib\source-map-consumer.js:155:14)
    at Function.SourceNode_fromStringWithSourceMap [as fromStringWithSourceMap] (<project>\node_modules\source-map\lib\source-node.js:80:24)
    at SourceMapSource.node (<project>\node_modules\webpack-sources\lib\SourceMapSource.js:42:20)
    at ReplaceSource.node (<project>\node_modules\webpack-sources\lib\ReplaceSource.js:69:29)
    at CachedSource.node (<project>\node_modules\webpack-sources\lib\CachedSource.js:12:23)
    at <project>\node_modules\webpack-sources\lib\ConcatSource.js:40:49
    at Array.map (native)
    at ConcatSource.node (<project>\node_modules\webpack-sources\lib\ConcatSource.js:39:60)
    at <project>\node_modules\webpack-sources\lib\ConcatSource.js:40:49
    at Array.map (native)
    at ConcatSource.node (<project>\node_modules\webpack-sources\lib\ConcatSource.js:39:60)
    at <project>\node_modules\webpack-sources\lib\ConcatSource.js:40:49
    at Array.map (native)
    at ConcatSource.node (<project>\node_modules\webpack-sources\lib\ConcatSource.js:39:60)
error Command failed with exit code 1.

Cause:

in the <library>.es5.js:

//# sourceMappingURL=<library>.js.map
//# sourceMappingURL=<library>.js.map

Changing manually to <library>.es5.js.map lets the build pass (at least).

Hi David,

Learnt about ng-packagr from the "Create boilerplate for library 1692"
I read through the documentation and I can understand how to setup a library project.
Was wondering

• how to install the ng-packagr tool?
• how to trigger a build to package the library?

Thanks,
Vinay

Type of Issue

• Bug Report
• Feature Request

Description

Maintenance

How To Reproduce

options.entry is deprecated, use options.input
The following options have been renamed — please update your config: dest -> file, moduleName -> name, sourceMap -> sourcemap
options.entry is deprecated, use options.input
The following options have been renamed — please update your config: dest -> file, moduleName -> name, sourceMap -> sourcemap

Expected Behaviour

Solve deprecation warnings for ciompatbility with future releases.

Version Information

ng-packagr: v1.0.0-pre.16
node: v8.3.0

Usage with browserslist configs

Draft code:

var autoprefixer = require('autoprefixer');
var postcss      = require('postcss');

postcss([ autoprefixer ]).process(css).then(function (result) {
    result.warnings().forEach(function (warn) {
        console.warn(warn.toString());
    });

    return result.css;
});

https://github.com/postcss/autoprefixer#javascript

Bonus Refactoring:

switch (fileExt) {
  case 'scss':
    return transpiletoScss();

  case 'css':
  default:
    return plain();
}

@angular/core folder layout:

- public_api.ts
- src/
   |- core.module.ts
   |- foo.ts
   |- ...

other folder layout:

src/
  |- public_api.ts
  |- ui-lib.module.ts
  |- foo.ts

Support that both file layouts result in a <dist>/src folder being created

Type of Issue

• Bug Report
• Feature Request

Description

$ ./node_modules/.bin/ng-packagr
Building Angular library from ng-package.json

BUILD ERROR
Cannot read property 'flatModuleFile' of undefined
TypeError: Cannot read property 'flatModuleFile' of undefined
    at NgPackage.get [as flatModuleFileName] (ng-packagr\lib\model\ng-package.js:40:56)
    at ng-packagr\lib\steps\ngc.js:11:72
    at <anonymous>

How To Reproduce

ng-package.json w/o "lib": {}:

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
}

Expected Behaviour

please compile :-)

Version Information

ng-packagr: v1.0.0-pre.13

My libraries mostly contain scss files which are consumed by components in the library itself and by projects depending on the library.

So sass imports pointing to node_modules dependencies can't be consumed by external styles since the paths have to be relative.

Angular CLI projects are using webpack by default, where those dependencies are imported by using the trailing tilde ~ pointing to the node_modules folder of the current project. To adopt this behavior we could use an importer function for the node-sass library:

lib/steps/assets.ts:~70

const sassImporter = (url: string): any => {
  if (url[0] === '~') {
    url = path.resolve('node_modules', url.substr(1));
  }

  return { file: url };
}

const pickRenderer = (filePath: string, ext: string[], file: string): Promise<string> => {

  switch (path.extname(filePath)) {

    case '.scss':
    case '.sass':
      debug(`rendering sass for ${filePath}`);
      return renderSass({ file: filePath, importer: sassImporter });

    case '.css':
    default:
      return Promise.resolve(file);
  }

}

@dherges I could pr this, if considered useful?

Type of Issue

• Bug Report

Description

BUILD ERROR
'animationFrame' is not exported by node_modules\rxjs\scheduler\animationFrame.js

How To Reproduce

try to import {animationFrame} from 'rxjs/scheduler/animationFrame'

Expected Behaviour

be able to import animationFrame

Version Information

ng-packagr: v1.0.0-pre.15
node: v8.3.0
@angular: v4.3.5
rxjs: 5.4.3
zone.js: 0.8.16

I saw that it isn't included in the default ROLLUP_GLOBALS (https://github.com/dherges/ng-packagr/blob/9927f930bce80ff2e7e5897c77ec618587657b6b/src/lib/steps/rollup.ts) so I've tried to include it in externals in the ng-package.json but it didn't work:

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "./src/api.ts"
  },
  "externals": {
    "rxjs/scheduler/animationFrame":         "Rx.Scheduler" // <-- tried here verious stuff, nothing seems to change anything...
  }
}

What I would like to do is have multiple packages in the same repo. So far everything works well EXCEPT, I have one package that depends on another I have the paths defined in the tsconfig so that I can use the correct module name during development and testing.

{
   ...
   "baseUrl": "./",
    "paths": {
      "@livesafe/common": [
        "./src/app/common/public_api.ts"
      ],
      "@livesafe/dialog": [
        "./src/app/dialog/public_api.ts"
      ]
    }
}

Everything works great for dev but falls over when trying to generate the bundle for @livesafe/dialog I get the following error.

Looking through the code I couldn't find a way to configure paths for the ngc step of the build.

Type of Issue

• Bug Report
• Feature Request

Description

I'm not sure why but all the css import are not correctly inlined.

Same for fonts.

Is it the normal behaviour ?

How To Reproduce

@import "../assets/style.scss"; in app.component.scss
Same for fonts

@font-face{font-family:'Glyphicons Halflings';src:url(./fonts/glyphicons-halflings-regular.eot);src:url(./fonts/glyphicons-halflings-regular.eot?#iefix) format("embedded-opentype"),url(./fonts/glyphicons-halflings-regular.woff2) format("woff2"),url(./fonts/glyphicons-halflings-regular.woff) format("woff"),

Expected Behaviour

please describe what behaviour or result you expected

Version Information

ng-packagr: v1.x.y
node: v8.x.y
@angular: v4.x.y
rxjs:
zone.js:

please include any version information that might be relevant, e.g. other third-party libraries

Hello,

Do you planify to manage multiple library in one repo ? It is very useful when you work in a enterprise world ;).

This seed https://github.com/shlomiassaf/angular-library-starter has good ideas about that by using scope, sub library, etc...

BUILD ERROR
media query expression must begin with '('
Error: media query expression must begin with '('
at options.error (/Users/aharris/Projects/Royal/excalibur/node_modules/node-sass/lib/index.js:291:26)

ng-package.json:
{ "$schema": "./node_modules/ng-packagr/ng-package.schema.json", "lib": { "entryFile": "public_api.ts" } }

I'm trying to use Your tool to build some modules - without good results:/

Can You please provide a tutorial that contains:

• creating project using angular-cli
• creating simplest module to export
• installing ng-packagr
• creating config files
• running npm run publish command

I, and many more users, would be very grateful

Hello, in my library I have sass files and I can not compile with ng-package since it does not seem to support them when you have imports from other sass files:

My error:

 formatted: Error: File to import not found or unreadable: ../../../node_modules/@stratio/egeo-ui-base/utils/typography.
       Parent style sheet: /home/pjpena/Documentos/projects/egeo/egeo/src/lib/st-radio-menu/st-radio-menu.component.scss
        on line 1 of src/lib/st-radio-menu/st-radio-menu.component.scss
>> @import '../../../node_modules/@stratio/egeo-ui-base/utils/typography';

For testing ng-packagr during build on CI: add integration tests

1. it should build a library and output expected files (see sample)
2. a consumer application should successfully built depending on sample
   • consumer could be an es2015 build (how to set up one?)
   • ..an es5, esm build (webpack, rollup)
   • ..an es5, umd build (tsc, by default, should resolve to main which is the umd bundle)

Type of Issue

• Feature Request

Right now having a ng-package.json appears redundant.
I propose that we should optionally be able to configure via the CLI both the entry file and output name.
for example
ng-packagr --entryFile public_api.ts --libName myLibName
I have a situation where all I want to use as config is a command line command, no extra files should be needed

I tried https://github.com/dherges/ng-packaged but it throws an error when building as AoT.

ERROR in /Users/bc/code/Terminus/ng-packaged/src/$$_gendir/app/app.component.ngfactory.ts (11,26): Cannot find module '../../../dist/my-lib/lib.ngfactory'.

ERROR in ./src/$$_gendir/app/app.component.ngfactory.ts
Module not found: Error: Can't resolve '../../../dist/my-lib/lib.ngfactory' in '/Users/bc/code/Terminus/ng-packaged/src/$$_gendir/app'
 @ ./src/$$_gendir/app/app.component.ngfactory.ts 9:0-62
 @ ./src/$$_gendir/app/app.module.ngfactory.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

I notice that the lib.ngfactory is never generated.

I then tried to test one of the sample integrations as outlined here: https://github.com/dherges/ng-packagr/blob/master/integration/README.md

But yarn sample doesn't seem to exist. And trying to build sample_material for example, it barks about missing dependencies. When those are installed the error becomes:

🙏🏼 I would greatly appreciate any tips on this. I see that integration/consumer-ng-cli exists which seems like it should cover my use case (building a external library that is consumed by an @angular/cli app).

I seem to be very close.. just missing the ngfactory file so I feel like I may just have a setting incorrect somewhere.

Thanks in advance!

Hi !
I'm not seeing a way to watch files changes with ng-packagr, do you plan to add this ?
Edit: using ng-packaged if I run yarn build:lib while ng serve is running, it break.
How do you develop a lib with ng-packagr ? (sorry I'm totally lost...)

Type of Issue

• Help Wanted
• Bug Report
• Feature Request

Description

I have an Angular-CLI project that I'm trying to package as an NPM module, and when I target/include my child module containing components the script results in error with status 111.

How To Reproduce

The packaging script works properly when the WebWrapper components are not imported. Everything's been generated using the Angular CLI, but is it possible an export is missing?

Child Module of the App

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UiComponentsModule } from "./ui-components.module";
import { FlexLayoutModule } from '@angular/flex-layout';
import { CookieModule } from 'ngx-cookie';

import { WebWrapperHeaderComponent } from '../components/web-wrapper-header/web-wrapper-header.component'; // when commented out the script runs successfully
import { WebWrapperFooterComponent } from '../components/web-wrapper-footer/web-wrapper-footer.component'; // when commented out the script runs successfully

@NgModule({
  imports: [
    CommonModule,
    UiComponentsModule,
    FlexLayoutModule,
    CookieModule.forChild()
  ],
  exports: [
    WebWrapperHeaderComponent,    // when commented out the script runs successfully
    WebWrapperFooterComponent     // when commented out the script runs successfully
  ],
  declarations: [
    WebWrapperHeaderComponent,    // when commented out the script runs successfully
    WebWrapperFooterComponent      // when commented out the script runs successfully
  ]
})
export class WebWrapperModule { }

WebWrapperFooter component that fails the script

import { Component, OnInit } from '@angular/core';
import { FooterLink } from "../../classes/footer-link";					// class
import { WebWrapperLinksMap } from "../../web-wrapper.constants";		// const (Map)
import { WebWrapperLinks } from "../../enums/web-wrapper-links";		// const (enum)
import { FontAwesomeIcons } from "../../enums/font-awesome-aliases";	// const (enum)

@Component({
  selector: 'web-wrapper-footer',
  templateUrl: './web-wrapper-footer.component.html',
  styleUrls: ['./web-wrapper-footer.component.scss']
})
export class WebWrapperFooterComponent implements OnInit {

  contextLinks:Array<FooterLink> = [];
  socialLinks:Array<FooterLink> = [];

  constructor() {
    this.contextLinks.push(new FooterLink("Terms of Use", WebWrapperLinksMap.get(WebWrapperLinks.TERMS_OF_USE)));
    this.contextLinks.push(new FooterLink("Company Store", WebWrapperLinksMap.get(WebWrapperLinks.COMPANY_STORE)));
    this.contextLinks.push(new FooterLink("Privacy Policy", WebWrapperLinksMap.get(WebWrapperLinks.PRIVACY_POLICY)));
    this.contextLinks.push(new FooterLink("Safe Harbor", WebWrapperLinksMap.get(WebWrapperLinks.SAFE_HARBOR)));
    this.contextLinks.push(new FooterLink("Register", WebWrapperLinksMap.get(WebWrapperLinks.REGISTER)));
    this.contextLinks.push(new FooterLink("Employee Login", WebWrapperLinksMap.get(WebWrapperLinks.EMPLOYEE_LOGIN)));

    this.socialLinks.push(new FooterLink("Facebook", WebWrapperLinksMap.get(WebWrapperLinks.SOCIAL_FACEBOOK), FontAwesomeIcons.FACEBOOK));
    this.socialLinks.push(new FooterLink("Twitter", WebWrapperLinksMap.get(WebWrapperLinks.SOCIAL_TWITTER), FontAwesomeIcons.TWITTER));
    this.socialLinks.push(new FooterLink("Linked In", WebWrapperLinksMap.get(WebWrapperLinks.SOCIAL_LINKED_IN), FontAwesomeIcons.LINKED_IN));
  }

  ngOnInit() {
  }

}

Console output containing the error

> [email protected] build-npm C:\src\git\web-wrapper
> ng-packagr -p ng-package.json

Building Angular library from ng-package.json

BUILD ERROR
ENOENT: no such file or directory, open 'C:\src\git\web-wrapper\.ng_build\ts\web-wrapper.js'
Error: ENOENT: no such file or directory, open 'C:\src\git\web-wrapper\.ng_build\ts\web-wrapper.js'

npm ERR! code ELIFECYCLE
npm ERR! errno 111
npm ERR! [email protected] build-npm: `ng-packagr -p ng-package.json`
npm ERR! Exit status 111
npm ERR!
npm ERR! Failed at the [email protected] build-npm script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\bohling.denver\AppData\Roaming\npm-cache\_logs\2017-08-10T22_20_09_083Z-debug.log

C:\src\git\web-wrapper>

The behavior is the same for the WebWrapperHeaderComponent, but due to it's length I've omitted it.

Version Information

ng-packagr: v1.0.0-pre.13
node: v7.2.1
@angular: v4.3.2
TypeScript: 2.4.2

Verbose log file:
2017-08-10T22_20_09_083Z-debug.txt

I'm not sure what could be causing the problem at this point, so any help is appreciated.

I have a working module and I want to make a library out of it so I can use it in other projects (https://github.com/DDeis/ng-formly-add-ons). After many research I stumbled upon ng-packagr. I followed the Readme of https://github.com/dherges/ng-packaged, but when I run ng-packagr I uncounter the following error:

➜ npm run build:lib

> [email protected] build:lib /home/ahmad/Documents/Damien/Projets/ng-formly-add-ons
> DEBUG=true ng-packagr

Building Angular library from /home/ahmad/Documents/Damien/Projets/ng-formly-add-ons/ng-package.json
[debug] rimraf /home/ahmad/Documents/Damien/Projets/ng-formly-add-ons/dist/ng-formly-add-ons
[debug] rimraf /home/ahmad/Documents/Damien/Projets/ng-formly-add-ons/.ng_build
[debug] processAssets /home/ahmad/Documents/Damien/Projets/ng-formly-add-ons/ng-formly-add-ons to /home/ahmad/Documents/Damien/Projets/ng-formly-add-ons/.ng_build/ts
[debug] ngc /home/ahmad/Documents/Damien/Projets/ng-formly-add-ons/.ng_build/ts/tsconfig.lib.json, { basePath: /home/ahmad/Documents/Damien/Projets/ng-formly-add-ons/.ng_build/ts })

BUILD ERROR
Cannot read property 'path' of undefined
TypeError: Cannot read property 'path' of undefined
    at TsickleCompilerHost.getSourceMapKeyForSourceFile (/home/ahmad/Documents/Damien/Projets/ng-formly-add-ons/node_modules/tsickle/build/src/tsickle_compiler_host.js:120:65)
    at TsickleCompilerHost.closurize (/home/ahmad/Documents/Damien/Projets/ng-formly-add-ons/node_modules/tsickle/build/src/tsickle_compiler_host.js:220:41)
    at TsickleCompilerHost.getSourceFile (/home/ahmad/Documents/Damien/Projets/ng-formly-add-ons/node_modules/tsickle/build/src/tsickle_compiler_host.js:96:29)
    at findSourceFile (/home/ahmad/Documents/Damien/Projets/ng-formly-add-ons/node_modules/typescript/lib/typescript.js:70246:29)
    at processImportedModules (/home/ahmad/Documents/Damien/Projets/ng-formly-add-ons/node_modules/typescript/lib/typescript.js:70393:25)
    at findSourceFile (/home/ahmad/Documents/Damien/Projets/ng-formly-add-ons/node_modules/typescript/lib/typescript.js:70274:17)
    at processImportedModules (/home/ahmad/Documents/Damien/Projets/ng-formly-add-ons/node_modules/typescript/lib/typescript.js:70393:25)
    at findSourceFile (/home/ahmad/Documents/Damien/Projets/ng-formly-add-ons/node_modules/typescript/lib/typescript.js:70274:17)
    at args (/home/ahmad/Documents/Damien/Projets/ng-formly-add-ons/node_modules/typescript/lib/typescript.js:70200:85)
    at getSourceFileFromReferenceWorker (/home/ahmad/Documents/Damien/Projets/ng-formly-add-ons/node_modules/typescript/lib/typescript.js:70173:34)

npm ERR! code ELIFECYCLE
npm ERR! errno 111
npm ERR! [email protected] build:lib: `DEBUG=true ng-packagr`
npm ERR! Exit status 111
npm ERR! 
npm ERR! Failed at the [email protected] build:lib script.

It seems I get this error when I'm importing a third-party library (ng-formly) in my library module or when I'm importing constants.

It may be more of a support request than a bug report, I'm pretty new at developping librairies so I don't know if it comes from my code or if it has something to do with AOT. I have been struggling on this all day and found nothing on the web, so any idea on this ? :-)

If integrated into ng-packagr, it will be in an opinionated way. It will look like this:

The tool chain will be plain-old Angular testing: karma, webpack, jasmine, istanbul

• myfoo.ts
• myfoo.spec.ts (right next to the comp, service, whatever being tested)
• **/*.spec.ts will be excluded from build task
• an auto-generated run-tests.js will include all spec files
  • var testContext = require.context(${opt.src}, true, /\.spec\.ts/);
• karma.conf.js will be auto-generated
• webpack.test.js will be auto-generated
• test runs will report: lcovonly, json, html (all written to disk). coverage report (html and json written to disk). coverage report to stdout (for the infamous gitlab stuff, still needs to be discussed, since GitLab users could simply pick up the json files and print to stdout with istanbul-combine)

Type of Issue

• Bug Report
• Feature Request
• Question, I guess

Description

I'm trying to create a simple angular library in which I use angular2-busy as an npm package,
I import it normally and everything works when compiling my source with webpack or directly with tsc.

But I alway get the error when using ng-packagr
'BusyModule' is not exported by ..\..\node_modules\angular2-busy\index.js

the file looks like

"use strict";
function __export(m) {
    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(require("./build/index"));
//# sourceMappingURL=index.js.map

Since I'm fairly new to the JS-World, my question is:
Can I solve this on my side or is this something ng-packagr has to solve.
Or is this this something I have to bring to angular2-busy's authors attention?

How To Reproduce

include angular2-busy as dependency and import it somewhere.

Expected Behaviour

compile it

Version Information

ng-packagr: v1.0.1
node: v8.4.0
@angular: v4.3.6

please include any version information that might be relevant, e.g. other third-party libraries

Inside lib\steps\json.js the following line fails : resolve(JSON.parse(data)); whenever the file is saved as UTF-8 with a signature. This because fs.readFile returns a buffer instead of a string in that case.

This crashes creating the package whenever the ng-package.json was created by (for example) Visual Studio 2017. The workaround is saving this file as UTF-8 without signature every time it is modified, but this makes for a poor user experience :)

This was tested with Node v6.11.1