Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Copilot Lvl 2
Message 1 of 2

Erro to use a NPM module.

Solved! Go to Solution.

 

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

erro.png

 

1 Reply
Solution
Copilot Lvl 2
Message 2 of 2

Re: Erro to use a NPM module.

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);
  }