Typescript: Cannot find module of my custom library

Question

The Question

Why isn't my ng2-orm package being imported (or being recognized by vscode) when I do import Config from 'ng2-orm';

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { Config } from 'ng2-orm'; // ng2-orm/Config won't work either

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

DETAILS

I am endeavoring to build my own TS library for use in angular2 and ionic2. I have researched and searched and cannot seem to come up with why this is failing, and it might just be due to some sort of incompleteness on my part.

I get that it's just the start, but I would imagine that anything exported from inside the project should be accessible. Is there an ngModule definition I need maybe?

I am providing the package.json, some folder structure, gulp (so you can see it), and tsconfig.json

Everything compiles fine etc.

But when I install it on the angular quickstart, it says it cannot find ng2-orm when I try to import. I have everything barreled into the index.js, and the package is in the node_modules folder.

Am I missing something that systemjs.config.js needs? I'm not sure. I have a typings.json, but it's basically empty, maybe I'm missing something there?

index.ts

export * from './Config/Config';

Config/Config.ts

export class Config {
  public test(): boolean { return true; }
}

Definition Files

index.d.ts

export * from './Config/Config';

Config.d.ts

export declare class Config {
    test(): boolean;
}

package.json

{
  "name": "ng2-orm",
  "version": "0.0.1",
  "description": "An Angular2 ORM style data modeler to make your life easier for data management and versioning.",
  "main": "dist/js/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "typings": "./dist/definitions/**/*.d.ts",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ArchitectNate/ng2-orm.git"
  },
  "keywords": [
    "ng2",
    "angular2",
    "ionic2",
    "ORM",
    "SQLite",
    "WebSQL"
  ],
  "author": "Nathan Sepulveda <[email protected]>",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/ArchitectNate/ng2-orm/issues"
  },
  "homepage": "https://github.com/ArchitectNate/ng2-orm#readme",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-typescript": "^3.0.1",
    "merge2": "^1.0.2",
    "tslint": "^3.15.1",
    "typescript": "^2.0.3",
    "typings": "^1.4.0"
  }
}

Folder Structure

gulpfile.js

I am including this so you can see that my gulp puts code in dist/js, dist/definitions, and dist/maps

var gulp = require('gulp');
var ts = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');
var merge = require('merge2');

var tsProject = ts.createProject('tsconfig.json');

gulp.task('scripts', function() {
  var tsResult = tsProject.src()
    .pipe(sourcemaps.init())
    .pipe(tsProject());

  return merge([
    tsResult.dts.pipe(gulp.dest('dist/definitions')),
    tsResult.js
      .pipe(sourcemaps.write('../maps'))
      .pipe(gulp.dest('dist/js'))
  ]);
});

gulp.task('watch', ['scripts'], function() {
  gulp.watch('./src/**/*.ts', ['scripts']);
});

gulp.task('default', ['scripts', 'watch']);

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "outDir": "dist/js",
    "declaration": true
  },
  "filesGlob": [
    "src/**/*.ts",
    "!node_modules/**/*"
  ],
  "exclude": [
    "node_modules",
    "typings/global",
    "typings/global.d.ts"
  ],
  "compileOnSave": true,
  "atom": {
    "rewriteTsconfig": false
  },
  "scripts": {
    "prepublish": "tsc"
  }
}

What does your tsconfig.json file look like? Check that your files or exclude settings are correct. — Jesse Johnson
– Jesse Johnson, Commented Sep 27, 2016 at 1:12

Bruno Grieder · Accepted Answer · 2016-09-27 04:35:11Z

10

For your ng2-orm library, try making the typings entry of package.json point to index.d.ts, which re-exports everything e.g.

"typings": "./dist/definitions/index.d.ts"

answered Sep 27, 2016 at 4:35

Bruno Grieder

30k10 gold badges73 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Architect Nate Over a year ago

Thanks, that did it. I don't know how I missed that. I think I setup that up prior to using the automatic declaration generation and so I wasn't aware of the index.d.ts that the automatic generated.

David Domingo Over a year ago

I know this is an old question. But here's the link that explains it. typescriptlang.org/docs/handbook/declaration-files/…

Collectives™ on Stack Overflow

Typescript: Cannot find module of my custom library

The Question

DETAILS

index.ts

Config/Config.ts

Definition Files

package.json

Folder Structure

gulpfile.js

tsconfig.json

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

The Question

DETAILS

index.ts

Config/Config.ts

Definition Files

package.json

Folder Structure

gulpfile.js

tsconfig.json

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related