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

  • Dotnet core with Angular window is not defined

    It works fine when i run with node Express server (I use @ng-toolkit/universal) But with aspnet core node engine throwing NodeInvocation Exception Reference Error: Window is not defined in a third party modules like ngx-bootstrap and angular-jwt.

    NodeInvocationException: Prerendering failed         
because of error: ReferenceError: window is not 
defined
at Object.<anonymous> 
(C:\2ndCustomer\Angular6\node_modules\@auth0\angular- 
jwt\bundles\core.umd.js:1:704)

    And ngx-bootstrap error but when i run with express server.ts it works fine https://github.com/maciejtreder/ng-toolkit

  • how use NGXS with in mat-table DataSorce

    I use trying to use ngxs state managment pattern with angular material tables, but I don't know how to do it... Can anyone help?

      export class JobsComponent implements OnInit {
 public  dataSource = new JobsDataSource(this.jobsServise);
 //@Select(HomeState.jobs) public jobs$: Observable<boolean>
  displayedColumns = ['number', 'date', 'mawb', 'origin', 'destination', 'other'];
  constructor(
    private jobsServise: JobsService,
    private store: Store) {

   }
  ngOnInit() {
   // this.store.dispatch( new GetJobs());
  }
}

export class JobsDataSource extends DataSource <any> {
  public jobs: IJobs[];

  constructor(private jobsServise: JobsService){
    super();
  }
  public connect(): Observable<IJobs[]>{
   return this.jobsServise.getJobs();
  }
  public disconnect(){}
}
  • Leaflet map container is not found

    I"m trying to display a Leaflet Map in my angular component that is retreiving a Bank Agency Details.

    I'm receiving this error :

    ERROR Error: Map container not found.

    Here's my component:

    import { Component, OnInit, Input } from '@angular/core';
import { RestService } from '../providers/rest.service';
import { SnotifyService } from '../../../node_modules/ng-snotify';
import { NgForm } from '../../../node_modules/@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';

declare let L;
@Component({
  selector: 'app-modify-bank',
  templateUrl: './modify-bank.component.html',
  styleUrls: ['./modify-bank.component.css']
})
export class ModifyBankComponent implements OnInit {
  bank:any;
  bank_id:string;
  latitude:Number;
  longitude:any;

  constructor(
    private restService :RestService,
    private snotifyService: SnotifyService,
    private router:Router,
    private activatedRoute: ActivatedRoute,
    ) { 
      this.activatedRoute.params
      .subscribe( params => {
        this.bank_id = params.bank_id;
        this.getBankByID(params.bank_id);
      })    
  }

  ngOnInit() {
    this.addMap()
  }

  getBankByID(bank_id:string){
    this.restService.getBankByID(bank_id).subscribe((data:any) => {
      this.bank = data.bank;
      console.log(this.bank);
    } , err => {
      console.log(err);
    });
  }

  addMap(){

    let map = L.map('map').setView([36.798854, 10.152786], 8);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    var Marker;
    map.on('click',(e) =>                                                                                                                                                         {
      let latlng = map.mouseEventToLatLng(e.originalEvent);

      console.log(latlng.lat + ', ' + latlng.lng);
      //remove previous markers
      if (Marker) {
        map.removeLayer(Marker);
      }
      // Add marker to map at click location; add popup window

      Marker = new L.marker(e.latlng, {
        draggable: true,
        icon: L.icon({
          iconSize: [ 25, 41 ],
          iconAnchor: [ 13, 41 ],
          iconUrl: 'assets/leaflet/images/marker-icon.png',
          shadowUrl: 'assets/leaflet/images/marker-shadow.png'
        }),
      }).addTo(map);
    });

  }




}

    The html template contains a form to bind with the agency name and address, what I'm trying to achieve later on, is display a marker in the coordinates of the map. But I keep getting Map container not found. Any help would be appreciated. Thank you!

  • How to use UI extension for Cytoscape.js in Typescript?

    Is it possible use Cytoscape UI extensions in Typescript? Layout extension can be used but when I need for example https://github.com/cytoscape/cytoscape.js-cxtmenu, I cant call function cy.cxtmenu( defaults ) because it isnt in cytoscape interface. Is there a way to use it?

    My code in index.ts:

    import cytoscape = require('cytoscape');
import contextMenus = require('cytoscape-cxtmenu');
cytoscape.use(contextMenus);

const cy = cytoscape({
    container: document.getElementById('cy'),
    ...
});
let defaults = {
     menuRadius: 100, 
     selector: 'node',
    //...
};

let menu = cy.cxtmenu( defaults );

    To index.d.ts I add this declare: 

    declare module 'cytoscape-cxtmenu' {
    const ext: cytoscape.Ext;
    export = ext;
}

    In console during transpilation I get this:

    ERROR in [at-loader] ./src/index.ts:152:17
    TS2339: Property 'cxtmenu' does not exist on type 'Core'.
  • AngularFire2 - Ionic - Cannot read property of undefined

    The HTML is throwing an undefined error as if the data isn't retrieved. This is my service call to a Firebase list:

    Service.ts

     getGames(eventId) {
    var ref =  this.afd.list('/game/', ref => ref.orderByChild('event').equalTo(eventId)).valueChanges();

    return ref;

}

    My page.ts

    currentEvent: any;
 gamesList: any[];
constructor(public navCtrl: NavController, public navParams: NavParams, public 
firebase: FirebaseProvider) {
 this.currentEvent = navParams.get('data');
 this.firebase.getGames(this.currentEvent).subscribe((val: any) => {
   val.forEach((e) => {

    console.log("date " + e.date);
  })

  this.gamesList = val;
})

    }

    In the foreach statement, i see the data correctly in the log. It throws an error on the html, even though it looks like the "gamesList" is populated.

    page.html

     <ion-list>
  <ion-list-header>Games</ion-list-header>
   <ion-item ngFor="let g of gamesList">
     {{g.date}}
   </ion-item>
 </ion-list>

    Thanks for the help!

  • onbeforeunload not working inside react component

    I have a simple react-component where a user can edit data. As the values that may be changed could take some time I want to ask the user to confirm when leaving the page in case of unsaved changes.

    In the component's constructor I call:

    window.addEventListener("beforeunload", this.handleWindowBeforeUnload);

    I also tried

    window.onbeforeunload = this.handleWindowBeforeUnload;

    The handleWindowBeforeUnload looks like this:

    private handleWindowBeforeUnload = (ev: BeforeUnloadEvent): string => {
    return "Unsaved changes. Are you sure?";
}

    However, setting a breakpoint will hit. But nevertheless there is no prompt showing that leaving may be dangerous. Also tried with latest Firefox but nothing happened. As stated on MDN I also tried

    // Cancel the event as stated by the standard.
e.preventDefault();

// Chrome requires returnValue to be set.
e.returnValue = '';

// return something to trigger a dialog
return null; // ''; // "Do something"

    Still nothing happens. What am I doing wrong here?

  • Webpack optimization module concatenation: multi referenced from single entry bailout

    I am trying to wrap my head around module concatenation with Webpack 4 + Babel 7.

    I have an entry.js script which uses imports from multiple modules which in turn import multiple modules.

    Using optimizationBailout warnings when bundeling throws following bailout warning.

    ModuleConcatenation bailout: Module is referenced from these modules with unsupported syntax: multi ./public/js/entry.js (referenced with single entry)

    What does this bailout mean? How can I use module concatenation on the entry script?

    webpack.config.babel.js looks as follows:

    import path from 'path';

export default {
  entry: {
    xyz: ['./public/js/xyz_entry.js']
  },
  output: {
    path: path.resolve(__dirname, 'public/js/build'),
    filename: '[name]_bundle.js'
  },
  devtool: 'source-map',
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: [{
    loader: 'babel-loader'
      }]
    }]
  },
  optimization: {
    concatenateModules: true
  },
  stats: {
    maxModules: Infinity,
    optimizationBailout: true
  }
};

    .babelrc has following entry:

    {
    "presets": ["@babel/preset-env"]
}

    entry.js looks like this:

    import {getToken} from './token';

import {hooks} from './hooks';

getToken(init);

function init() {

}

    I import export in the modules like so (token.mjs):

    import {getWorkspace} from './workspace.mjs';

export const getToken = next => { }

    My dev dependencies in the package.json are:

      "devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/register": "^7.0.0",
    "babel-loader": "^8.0.2",
    "webpack": "^4.19.1",
    "webpack-cli": "^3.1.0"
  }

    I get following output on the build process:

    dennis@dennis:~/Git/xyz$ npm run dev

> xyz@0.0.0 dev /home/dennis/Git/xyz
> webpack --mode development

Hash: 6cfd1959ae17f9c8b13d
Version: webpack 4.19.1
Time: 233ms
Built at: 2018-09-21 19:27:16
        Asset      Size  Chunks             Chunk Names
    xyz_bundle.js  14.2 KiB     xyz  [emitted]  xyz
xyz_bundle.js.map  15.5 KiB     xyz  [emitted]  xyz
Entrypoint xyz = xyz_bundle.js xyz_bundle.js.map
[./public/js/xyz_entry.js] ./public/js/xyz_entry.js + 3 modules 9.68 KiB {xyz} [built]
    | ./public/js/xyz_entry.js 4.8 KiB [built]
    |     ModuleConcatenation bailout: Module is referenced from these modules with unsupported syntax: multi ./public/js/xyz_entry.js (referenced with single entry)
    | ./public/js/token.mjs 2.26 KiB [built]
    | ./public/js/hooks.mjs 2.05 KiB [built]
    | ./public/js/workspace.mjs 579 bytes [built]
[0] multi ./public/js/xyz_entry.js 28 bytes {xyz} [built]
    ModuleConcatenation bailout: Module is not an ECMAScript module
  • Node: Module parse failed: Unexpected token "You may need an appropriate loader to handle this file type"

    This is in my webpack.base.conf.js 

    resolve: {
            extensions: ['.js', '.vue', '.json'],
            alias: {
                'vue$': 'vue/dist/vue.esm.js',
                '@': resolve('src'),
            }
        },
        module: {
            rules: [
                {
                    test: /\.(js|vue)$/,
                    loader: 'eslint-loader',
                    enforce: 'pre',
                    include: [resolve('src'), resolve('test')],
                    options: {
                        formatter: require('eslint-friendly-formatter')
                    }
                },
                {
                    test: /\.vue$/,
                    loader: 'vue-loader',
                    options: vueLoaderConfig
                },
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    include: [resolve('src'), resolve('test')]
                },

    When I run webpack using this line

    webpack ./src/main.js --output ./dist

    Here is the full error:

    ERROR in ./src/main.js 240:36
Module parse failed: Unexpected token (240:36)
You may need an appropriate loader to handle this file type.
|                 state.connection.lastUpdate = Date.now();
|
>                 state.currencies = {...information.currenciesInfo};
|
|                 state.trends = {...information.trends};

    On some other site I read it may have to do with webpack or some enclosure issues. Does anyone spot an obvious issue?

    I believe the programmer used webpack3 and I built webpack4 from scratch

    Input appreciated

    Edit: The main.js

    // information = information[0];
                state.connection.lastUpdate = Date.now();

                state.currencies = {...information.currenciesInfo};

                state.trends = {...information.trends};
  • webpack resolve modules outside of current directory

    I am using the modules option for the Webpack resolve property, and I want to resolve from the current directory where my webpack.config.js is located.

    const appRoot = process.cwd();

...
resolve: {
  modules: ['node_modules', appRoot],
  extension: ['.js']
},

    Then in my js file, someFile.js when I do

    import someThing from 'components';

    it will give an error Cannot resolve components....

    My webpack.config.js is in the src directory`

    /app
  /src
     /components
       index.js
       someFile.js
     /other
     /folders
     webpack.config.js

    When I use alias option for components it will work.

    alias: {
  components: path.resolve(__dirname, 'components')
},