Related questions

Classes from TypeScript NPM Package are all bundled in the build result

2018-07-12 07:12 kerosene imported from Stackoverflow

I created a npm package with multiple TypeScript classes which I want to use on various projects. e.g:

// dog.ts
import Animal from "../animal";

export class Dog extends Animal {
    public bark(): void { console.log('bark'); } 
}

This is how those classes are exported on the npm package:

// main.ts
export {Dog} from "./animals/dog";
export {Cat} from "./animals/cat";
export {Ape} from "./animals/ape";

I started a blank angular project via ng new my-app, added the npm package to my project via npm i @farm/animals and imported the Dog class to the AppComponent:

// app.component.ts
import { Component } from '@angular/core';
import { Dog } from '@farm/animals';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  lassie: Dog = new Dog();
}

What I realized after a production build (ng build --prod) is that the other exported classes like Cat and Ape are also bundled into the main.js build result. I assumed those would be filtered out by tree shaking mechanisms.

How can I achieve that only the imported classes are put to the build result? Is anything wrong with my export structure?

Thanks in advance!

//edit: I just realized that import {Dog} from '@farm/animals/dist/classes/dog'; does the job as expected. Is there a way to export these classes individually with a nice short name for import?

See also questions close to this topic

  • Unable to to perform the datatransfer.getData() on Drag and Drop of Illustrator object

    I am building a web tool that lets the user to drag and drop images from different sources. I am able to drag and drop objects from file systems and browsers but I am not able to do that with the objects in illustrator.

        @HostListener('drop', ['$event']) public onDrop(event) {
      event.preventDefault();
      event.stopPropagation();
      event.dragstart = true;
      let dataTransfer = event.dataTransfer;
      let types: string = dataTransfer.types;
      console.log(types);
      let transfer: any;
      if (types.indexOf("Files")>-1)
        this.handleFiles(dataTransfer.files);
      else{
        console.log("elsewhere")
        transfer = dataTransfer.getData(types);
      }
    }

    handleFiles(files) {

      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var imageType = /image.*/;
        if (!file.type.match(imageType)) { continue; }
        var img = <HTMLElement>document.getElementById("imagePlaceholder");
        // img.file = file;
        var reader = new FileReader();
        reader.onload = function (event: any) {
          img.setAttribute('src', event.target.result);
        };
        reader.readAsDataURL(file);
      }
    }

    The html:

    <div class="dropzone" imageDnD (drop)=handleDrop($event)></div>

    The file type in the event is com.adobe.cep.dnd.pasteboardtype. When I read the fileType I get the below information.

    "{"assetList":[{"data":[""],"type":"image"},{"data":[""],"type":"text"}],"source":"com.adobe.illustrator","version":"23.0"}"

    While we should be recieving some SVGs or an image.

  • How to create new Component instances when shared/dynamic Angular 6 Routing is used

    I have an Angular 6 route setup that looks like this:

    const routes: Routes = [ {
  matcher: PageMatcher,
  component: PageComponent,
  resolve: {
    path: PageResolver
  }
},...


@Injectable()
export class PageResolver implements Resolve<string> {
  constructor() {}

  resolve(route: ActivatedRouteSnapshot) {
    const path = '/' + route.url.join('/').replace(/\.[^/.]+$/, '');
    return path;
  }
}

export function PageMatcher ( url: UrlSegment[] ): UrlMatchResult {
  const path = url.join('/');

  if (path.startsWith('foo/')) {
    return ({
      consumed: url,
      posParams: { path: url[url.length - 1]}
    });
  } 
}

    The route node can match any path under /foo, and routes to the PageComponent with a data['path'] = foo/the/path/to/the/page which is used for later processing.

    My problem is it seems since this is a single Route node, the same Page Component instance is shared across all uses of this Route node; so foo/bar.html and foo/cat.html both will use the same instance of the PageComponent.

    Unfortunately, PageComponent extends a third-party Component and this needs each PageComponent per path to be a unique object. Any idea how I can tell the Angular router to create a new object for each new path/url that is matched by this single Router node?

  • Angular mat tooltip

    I want to show an array of elements as a list with mat-angular tooltip.

    app.component.html
<button mat-raised-button
      matTooltip={{items}}
      aria-label="Button that displays a tooltip when focused or hovered over">
Action
</button>


app.component.ts
items=['A','B,'C']

    I am able to display them as ',' separated values from the above, but I need them as a list with each element in a new line

    Thanks

  • Argument of type '(data?: any) => void' is not assignable to parameter of type 
    import { Component, OnInit } from '@angular/core';
import * as d3 from 'd3';
@Component({
  selector: 'app-d3treemap',
  templateUrl: './d3treemap.component.html',
  styleUrls: ['./d3treemap.component.css']
})
export class D3treemapComponent implements OnInit {

  constructor() { }

  loadingD3Bar():void {
    console.log("loadingD3Bar2");
    //console.log(d3);
    // set the dimensions and margins of the graph

    var margin = {top: 20, right: 20, bottom: 30, left: 40};
    var width = 960 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
    //debugger;
    // set the ranges
    var x = d3.scaleBand()
              .range([0, width])
              .padding(0.1);
    var y = d3.scaleLinear()
              .range([height, 0]);

    // append the svg object to the body of the page
    // append a 'group' element to 'svg'
    // moves the 'group' element to the top left margin
    var svg = d3.select("#divd3").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", 
              "translate(" + margin.left + "," + margin.top + ")");

    // get the data

    d3.csv("sales.csv", function(data:any = {}) {

    (i am getting error like Argument of type '(data?: any) => void' is not assignable to parameter of type '(rawRow: DSVRowString, index: number, columns: string[]) => DSVRowAny'. Type 'void' is not assignable to type 'DSVRowAny'. ) // format the data data.forEach(function(d:any = {}) { //console.log("forEach"); //console.log(d); //debugger; d.sales = +d.sales; });

          // Scale the range of the data in the domains
      x.domain(data.map(function(d:any = {}) { return d.salesperson; }));
      y.domain([0, d3.max(data, function(d:any = {}) { return d.sales; })]);

      // append the rectangles for the bar chart
      svg.selectAll(".bar")
          .data(data)
        .enter().append("rect")
          .attr("class", "bar")
          .attr("x", function(d:any = {}) { return x(d.salesperson); })
          .attr("width", x.bandwidth())
          .attr("y", function(d:any = {}) { return y(d.sales); })
          .attr("height", function(d:any = {}) { return height - y(d.sales); });

      // add the x Axis
      svg.append("g")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x));

      // add the y Axis
      svg.append("g")
          .call(d3.axisLeft(y)); 

    });


  }
  ngOnInit() {
  }

}
  • Passing back value from inline callback function

    I'm trying to use a function to return a URL. At the points in which I set URL, I can console out the value fine. But as soon as I leave the inline function callback, the value of URL is always blank.

    My first iteration was using let, but that was wrong and I believe var should be the correct scope for this scenario. But clearly, I'm missing something as this is still not working for me.

    function getQueueURL(): string {
  const SQS = new AWS.SQS({ apiVersion: 'latest' });
  const params = { QueueName: awsConfig.queueName };
  var URL: string = '';
  SQS.getQueueUrl(params, function (err, data) {
    if (!err) {
      URL = <string>data.QueueUrl;
    } else {
      if (err.code == 'AWS.SimpleQueueService.NonExistentQueue') {
        console.log('AWS.SimpleQueueService.NonExistentQueue');
        URL = createQueue();
      }
      else {
        console.log(err);
      }
    }
  });
  return URL;
}

    How can I ensure that 'return URL;' actually returns the proper value?

  • babel polyfill being included, but ES6 methods still don't work in IE11

    I've got Webpack working with Babel and including the @babel/polyfill, yet IE11 is still throwing a SCRIPT438 error when trying to use .forEach on a NodeList.

    Here's my package.json

    {
  ...
  "scripts": {
    "build:js": "webpack --config ./_build/webpack.config.js"
  },
  ...
  "browserslist": [
    "IE 11",
    "last 3 versions",
    "not IE < 11"
  ],
  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "useBuiltIns": "usage"
        }
      ]
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
    "babel-loader": "^8.0.4",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2"
  },
  "dependencies": {
    "@babel/polyfill": "^7.0.0"
  }
}

    My webpack.config.js:

    const path = require('path');
const webpack = require('webpack');

module.exports = (env, argv) => {

  const javascript = {
    test: /\.js$/,
    use: {
      loader: 'babel-loader'
    }
  };

  // config object
  const config = {
    entry: {
      main: './_src/js/main.js',
    },
    devtool: 'source-map',
    output: {
      path: path.resolve(__dirname, '../js'),
      filename: '[name].js',
    },
    module: {
      rules: [javascript]
    }
  }

  return config;
}

    And finally /_src/main.js that I'm running through webpack and babel:

    const testList = document.querySelectorAll('.test-list li');

testList.forEach(item => {
  console.log(item.innerHTML);
})

    The docs at https://babeljs.io/docs/en/babel-polyfill say that you don't need to import or require polyfill when loading it via Webpack with useBuiltIns: "usage". But even if I remove that option and manually import the whole polyfill at the top of main.js (making my bundle huge), it still errors out in IE11.

    So...what am I doing wrong?

  • RAILS WEBPACKER set env variable in package json for docker

    i have "library": "git+https://123456:x-oauth-basic@github.com/mycompany/library.git". And this code is working when i deploy to my docker.

    How to set my github token to env variables? because i dont want to expose my github token to public

    i try with "library": "git+https://${GH_TOKEN}:x-oauth-basic@github.com/mycompany/library.git" and when I build my docker docker build --build-arg GH_TOKEN=123456 it is still can't get through the private repo

  • Lazy loading translation file in <i18n> tag

    I want to reduce my app size and i started from language files.
    I'm using vue-i18n Single File Components and i can lazy load like this vue-i18n Lazy loading. I read about custom lang blocks, but as i know i can't set dynamic locale in src.

    Now my question: is there a way to lazy load languages in <i18n> tag?