Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inclusion of assets, or hooks during build for inclusion #123

Closed
ronnyek opened this issue Sep 14, 2017 · 19 comments

Comments

@ronnyek
Copy link

commented Sep 14, 2017

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.

@dherges

This comment has been minimized.

Copy link
Member

commented Sep 15, 2017

@ronnyek

This comment has been minimized.

Copy link
Author

commented Sep 15, 2017

no no, just mean I would like to get an assets folder in my library that contains a few of the icons I include with my library... and no I dont htink that should necessarily be modifications made to ng-packagr. Thats why I was hoping there was some way to add some steps between building and packaging, all though I suppose I could just copy them into the dist folder post package

@dherges

This comment has been minimized.

Copy link
Member

commented Sep 15, 2017

@ronnyek ronnyek closed this Sep 15, 2017

@dherges

This comment has been minimized.

Copy link
Member

commented Sep 17, 2017

Summary

Question

How to copy static assets to the npm pacakge? The assets are not preprocessed in any way.

Answer

Recommended: let ng-packagr create the dist folder with the npm package for the Angular library. Then copy the assets to the dist folder in a separate step and independent from ng-packagr (after the packaging, before publishing).

@yonigo

This comment has been minimized.

Copy link

commented Sep 24, 2017

Hey, How do I update the reference to the assets path in the main app?
Even if I manually copy all assets to dist folder, I still get a 404 because the assets are not in the main assets folder.

Thanks, Yoni

@rousseaufiliong

This comment has been minimized.

Copy link

commented Sep 26, 2017

+1

@BenjaminDobler

This comment has been minimized.

Copy link

commented Oct 26, 2017

@yonigo The way i do it right now when i use my lib in an angular cli project is to copy the assets to the dist folder in a separate step like described here.
The in my angular cli project i have to set the path in the .angular-cli.json i have to set the path to the lib assets and map them to the assets folder like this:
{ "glob": "**/*", "input": "../node_modules/my-lib/assets", "output": "./assets/my-lib/" }

It does not seem ideal because you have to tell everyone who uses your lib how to do this but at least it works.

@alirezamirian

This comment has been minimized.

Copy link

commented Jan 31, 2018

@dherges, Though it's possible to copy static assets (e.g. scss mixin files) in a separate step after bundling, as you said, it's really nice to have an option in ng-packagr to just take care of it. It could be a configuration entry like assets: ['path1', 'path2'] under ngPackage.

@alirezamirian

This comment has been minimized.

Copy link

commented Jan 31, 2018

Now I'm thinking handling scss files is often more than just copy-pasting because they may import other stuff, and supporting something like this suggestion (by using scss-bundle out-of-the-box is a really useful feature.

@pasapsi

This comment has been minimized.

Copy link

commented Jun 8, 2018

Hello, Tell me please by steps how to do it that would work. Is there anywhere working example? I will be very grateful

@AnthonyNahas

This comment has been minimized.

Copy link

commented Jun 13, 2018

Im facing a similar problem with ngx-auth-firebaseui! My library have some assets and the developer should add theme manually to the angular.json file .... e.g:

@pasapsi

This comment has been minimized.

Copy link

commented Jun 13, 2018

@AnthonyNahas, Thanks you. I have a lot of modules that I make up, is there a way of not manual adjustment, but what would it work out of the box?

Since the coded module I post to npm, and connect through package.json.

@pasapsi

This comment has been minimized.

Copy link

commented Jun 13, 2018

ng-packagr can not connect local files in automatic mode?

@AnthonyNahas

This comment has been minimized.

Copy link

commented Jun 14, 2018

@pasapsi I don't think so! Maybe with angular schematics.... I am still searching of an appropriate solution for my 📦

@westwick

This comment has been minimized.

Copy link

commented Jun 19, 2018

I don't know if this will work for all cases but for me it was pretty simple to just update my build script definition in package.json:

"build": "ng-packagr -p ng-package.json && cp -r ./src/assets ./dist/src/assets"

@ptrzyna

This comment has been minimized.

Copy link

commented Jun 20, 2018

@westwick's suggestion works great!

@isanka88

This comment has been minimized.

Copy link

commented Oct 3, 2018

I also got same problem when I packaging using ngPackagr. So I wrote my own small node script to copy them to the dist folder manually.

npm install wrench

create new js file in the root assets-copy.js

var wrench = require("wrench"),
  util = require("util");

var source = "./src/assets";
var target = "./dist/src/assets";

wrench.copyDirSyncRecursive(source, target, {
  forceDelete: true
});

console.log("Asset files successfully copied!");

add build script to package.json like below,I called it as manual:assets-copy

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "packagr": "ng-packagr -p ng-package.json",
    "assets-copy": "node assets-copy.js"
  }

After you run

npm run packagr

Also run our script

npm run manual:assets-copy

It'll copy them to the dist folder manually.

@378740021

This comment has been minimized.

Copy link

commented Feb 13, 2019

wrench.js is deprecated! fs-extra solve my problem

`const fse = require("fs-extra");
const path = require("path");

async function copyAssets() {
try {
const sourceFile = path.join(__dirname, "../../lib/assets");
const destPath = path.join(__dirname, "../../lib/dist/assets");
await fse.copy(sourceFile, destPath);
console.log("files in assets has been copy to dist");
} catch (err) {
console.error(err);
}
}
copyAssets();`

@SaranSank

This comment has been minimized.

Copy link

commented Aug 10, 2019

I don't know if this will work for all cases but for me it was pretty simple to just update my build script definition in package.json:

"build": "ng-packagr -p ng-package.json && cp -r ./src/assets ./dist/src/assets"

How to use it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.