CODEWITHSUNDEEP
angulartypescriptnpm
Aneesh Gopalakrishnan
Aneesh Gopalakrishnan

Reputation: 702

Referencing a local file within npm package

How do we reference local files within npm package? Since the npm package is installed by another consumer, would these references become obsolete with respect to the root folder of consumer?

For example, I have created a npm package for angular. This package also reships few html and css files from a third party(They do not have angular packages). I made sure the files are copied to ...dist\thirdparty during package publish. I would like to reference some of these files within my npm package using relative path or other mechanisms.

E.g

@Component({
selector: 'ng2-my-library',
template: '<div></div>'
})
export class MyLibraryComponent {
.....
var newWindowUrl = "./thirdparty/some.html"; **// Need to relatively locate some.html here**
window.open(newWindowUrl);
.....
}

After I install my-package to a sample angular application, the above code results in "localhost:3000/thirdparty/some.html", which is inaccurate.

How do I do this?

After installing my package, the consumer will have this structure
consumerApp node_modules(Folder) ng2-my-library(Folder) ng2-pdfjs-viewer.umd.js // This is where I need to access some.html thirdparty(Folder) some.html

I also considered instructing consumers of the package to do something like this, but this instruction is quite dependant on other build tools to copy or redirect to the html, which is not what I want.

   var TransferWebpackPlugin = require('transfer-webpack-plugin');
         ...
         plugins: [
           new TransferWebpackPlugin([
             { from: 'node_modules/my-package/assets', to: path.join(__dirname, 'my/public') }
           ])
         ]

I also tried to use this package. Apparently it did not provide me proper results for html. https://www.npmjs.com/package/static-reference

Upvotes: 5

Views: 2668

Answers (2)

David
David

Reputation: 34435

You could try this

1 - make the assets public

Make static assets accessible from your webserver (i.e. the thirdparty folder)

For instance, if you are using express, you could use the serve-static package

var path = require('path');
var assetsFolder = path.join(__dirname, './node_modules/ng2-my-library/thirdparty');

app.use('/thirdparty', express.static(assetsFolder));
//...
app.listen ...

2 - reference the file

In your package's component, reference the file like this

window.open('/thirdparty/some.html')

For instance, if you are using express, you can just

Edit

You could also copy the files with a npm post install task, but you still need to have them copied where the browser can serve them statically. You cannot be sure that all clients will have an assets folder for instance. So I think there will always be some kind of webserver configuration needed somehow

Upvotes: 1

4ndt3s
4ndt3s

Reputation: 3467

Use __dirname instead . to get the local directory which the file is saved in. Change your code to:

var newWindowUrl = __dirname + "/thirdparty/some.html";
window.open(newWindowUrl);

More information about __dirname here.

Don't forget to include node types in your project:

npm install --save-dev @types/node

Upvotes: 1

Related Questions