The Query
Why is my ng2-orm package not importing or being recognized by vscode when I try to 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 { }
Information
I am attempting to create my own TypeScript library for angular2 and ionic2. Despite my efforts in research, I cannot pinpoint why this issue is arising and suspect it may be due to a lack on my end.
While I understand it's just the beginning, I assume that anything exported within the project should be accessible. Could there be an ngModule definition that I'm overlooking?
I have included the package.json, folder structure, gulp setup (for reference), and tsconfig.json
All seems to compile fine.
However, upon installing it in the angular quickstart, it reports a failure to locate ng2-orm during import. All files are consolidated into index.js, and the package resides in the node_modules directory.
Is there something required by systemjs.config.js that I'm missing? My typings.json file is essentially empty – could I be omitting something here?
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 <<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="315f504559505f42714559544159415457575452451f525e5c">[email protected]</a>>",
"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"
}
}
Directory Setup
https://i.sstatic.net/BHo3X.png
gulpfile.js
This code snippet demonstrates how my gulp organizes code into dist/js, dist/definitions, and dist/maps directories
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"
}
}