Asperon Asperon - 2 months ago 18
Javascript Question

Typescript: Cannot find module of my custom library

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 <nathans@thephpeffect.com>",
"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



enter image description here

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"
}
}

Answer

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"