ng-packagr / ng-packagr Goto Github PK
View Code? Open in Web Editor NEWCompile and package Angular libraries in Angular Package Format (APF)
License: MIT License
Compile and package Angular libraries in Angular Package Format (APF)
License: MIT License
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)
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
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 ? :-)
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
sample
)consumer
application should successfully built depending on sample
main
which is the umd bundle)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'
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...
IMHO, source maps should go back all the way to the original sources w/ external templates and external stylesheets.
There are, however, various steps where sourcemap translations are lost:
processAssets()
: styles and templates are inlined into *.ts
sources. here, we do not have any sourcemap.ngc()
: with the annotateForCloseCompiler
options, ngc outputs a sourcemap that points to the es6, closure-annotated sources.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:
*.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
*.components.ts.map
that includes CSS / HTML sourcesFor 2) wait for an upcoming Angular release.
I'm not sure why but all the css import are not correctly inlined.
Same for fonts.
Is it the normal behaviour ?
@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"),
please describe what behaviour or result you expected
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
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();
}
Maintenance
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
Solve deprecation warnings for ciompatbility with future releases.
ng-packagr: v1.0.0-pre.16
node: v8.3.0
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
taskrun-tests.js
will include all spec files
var testContext = require.context(
${opt.src}, true, /\.spec\.ts/);
karma.conf.js
will be auto-generatedwebpack.test.js
will be auto-generatedHi !
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...)
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());
}
Clone my repo, npm install
, then npm run build:lib
ng-packagr should either succeed or print a helpful error message.
ng-packagr: v1.1.0
node: v8.5.0
@angular: v4.4.1
rxjs: v5.4.3
zone.js: v0.8.17
Hi, David
I have some questions for you:
Thanks,
Alex
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!
I'd like to see this feature be implemented in future 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...
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?
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"
]
}
$ yarn install
$ yarn build:lib
$ ng serve
ng-packagr: v1.0.1
node: v8.1.2
@angular: v4.3.2
rxjs:
zone.js:
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.
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
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:
rollup-config.js
rollup-config.js
does not exist.FESM bundles include inlined external dependencies.
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';
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
.
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
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.
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.
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.
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.
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.
@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
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 ?
Regression caused by rollup/rollup#1585
See above.
You may find that your library suddenly contains empty functions function foo() {}
when switching to [email protected]
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.
ng-packagr: v1.0.0-pre.17
BUILD ERROR
'animationFrame' is not exported by node_modules\rxjs\scheduler\animationFrame.js
try to import {animationFrame} from 'rxjs/scheduler/animationFrame'
be able to import animationFrame
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.
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.
n/a
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';
ng-packagr: v1.0.0-pre.14
track progress in sass/node-sass#1998
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
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
Thanks,
Vinay
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" } }
Currently, need to add external for the new HttpClient
and HttpClientModule
by hand:
"lib": {
"externals": {
"@angular/common/http": "ng.common.http"
}
See above. If ommiting the externals mapping, it results in a corrupt library build (w/o an error by the way).
It would be cool, if the @angular/common/http
is supported out-of-the-box!
ng-packagr: v1.0.0-pre.16
node: v8.3.0
@angular: v4.3.5
rxjs: 5.4.2
zone.js: 0.8.14
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.
I have setup a small example project here. In short what I did was:
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?
When running the ng-packagr command I would expect it to bundle everything.
ng-packagr: latest (also tested with incoming PR#83 for commonJS compatability)
node: v6.11.1
refer to the example project for dependencies
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
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
ng-packagr
will need to overwrite certain valuesng-packagr
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).
I'm trying to use Your tool to build some modules - without good results:/
Can You please provide a tutorial that contains:
angular-cli
ng-packagr
npm run publish
commandI, and many more users, would be very grateful
$ ./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>
ng-package.json
w/o "lib": {}
:
{
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
}
please compile :-)
ng-packagr: v1.0.0-pre.13
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?
include angular2-busy as dependency and import it somewhere.
compile it
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.