Erro to use a NPM module.

People…I need your help 

I’m creating a module in NPM for use in projects. I made a very simple module for a TypeScript calculator. I generate the package and publish it later. When I go to use in my project does not recognize. I think it’s missing some detail.

Code to create an NPM module

CalculadoraModule.ts

import { Calculadora } from './calculadora';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';


@NgModule({
    imports: [CommonModule],
    declarations: [Calculadora],
    exports: [Calculadora],
    entryComponents: [Calculadora],
})
export class CalculadoraModule { }

Calculadora.ts

import { Component } from '@angular/core';

@Component({
    selector: 'Calculadora'
})
export class Calculadora {
    constructor() {

    }

    somar(a: number, b: number) {
        return a + b;
    }

    subtrair(a: number, b: number) {
        return a - b;
    }

    multiplicar(a: number, b: number) {
        return a * b;
    }

    dividir(a: number, b: number) {
        return a / b;
    }
}

dist/tsconfig.json

{
    "compilerOptions": {
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "mapRoot": "",
        "rootDir": ".",
        "target": "es5",
        "lib": ["es6", "es2015", "dom"],
        "inlineSources": true,
        "stripInternal": true,
        "module": "commonjs",
        "moduleResolution": "node",
        "removeComments": true,
        "sourceMap": true,
        "outDir": "../lib",
        "declaration": true
    }
}

index.js

'use strict';

module.exports.Calculadora = require('./lib/calculadora');
module.exports.CalculadoraModule = require('./lib/calculadora.module');

index.d.ts

export * from './lib/calculadora';
export * from './lib/calculadora.module'

gulpfile.js

var gulp = require('gulp');
var embedTemplates = require('gulp-angular-embed-templates');
var inlineNg2Styles = require('gulp-inline-ng2-styles');

gulp.task('js:build', function() {
    gulp.src('src/*.ts') // also can use *.js files
        .pipe(embedTemplates({ sourceType: 'ts' }))
        .pipe(inlineNg2Styles({ base: '/src' }))
        .pipe(gulp.dest('./dist'));
});

package.json

{
    "name": "modulo-calculadora",
    "version": "0.0.22",
    "description": "teste de exportacao de um construtor como modulo para ser utilizado.",
    "main": "index.js",
    "scripts": {
        "watch": "tsc -p src -w",
        "build": "gulp js:build && rm -rf lib && tsc -p dist"
    },
    "keywords": [],
    "author": "Pedro Cruz",
    "license": "ISC",
    "dependencies": {
        "@angular/common": "^5.2.3",
        "@angular/core": "^5.2.3",
        "gulp": "^3.9.1",
        "gulp-angular-embed-templates": "^2.3.0",
        "gulp-inline-ng2-styles": "0.0.1",
        "rxjs": "^5.5.6",
        "typescript": "^2.7.1",
        "zone.js": "^0.8.20"
    }
}

The project that uses the NPM module

package.json

{...}
"dependencies": {
        "@angular/common": "5.0.3",
        "@angular/compiler": "5.0.3",
        "@angular/compiler-cli": "5.0.3",
        "@angular/core": "5.0.3",
        "@angular/forms": "5.0.3",
        "@angular/http": "5.0.3",
        "@angular/platform-browser": "5.0.3",
        "@angular/platform-browser-dynamic": "5.0.3",
        "@ionic-native/core": "4.4.0",
        "@ionic-native/splash-screen": "4.4.0",
        "@ionic-native/status-bar": "4.4.0",
        "@ionic/storage": "2.1.3",
        "ionic-angular": "3.9.2",
        "ionicons": "3.0.0",
        "modulo-calculadora": "0.0.22",
        "rxjs": "5.5.2",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.18"
    },

Home.ts

import { Calculadora } from 'modulo-calculadora';
import { NavController } from 'ionic-angular';
import { Component } from '@angular/core';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {


  valorSoma: Number;
  valorDiv: Number;
  valorMulti: Number;
  valorSub: Number;

  constructor(public navCtrl: NavController, public calculadora: Calculadora) {

  }

  metodo() {
    this.calculadora.dividir(1, 1);
  }
}

Erro

I solved the problem. 

Was missing a New from class. 

valorSoma: Number;
  valorDiv: Number;
  valorMulti: Number;
  valorSub: Number;
  calc = new Calculadora();

  constructor(public navCtrl: NavController) {
  }

  metodo() {
    this.valorSoma = this.calc.dividir(5, 1);
    this.valorDiv = this.calc.multiplicar(10, 5);
    this.valorMulti = this.calc.somar(2, 2);
    this.valorSub = this.calc.subtrair(10, 3);
  }
3 Likes