Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 <[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

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"
  }
}
like image 963
Architect Nate Avatar asked Sep 27 '16 00:09

Architect Nate


People also ask

How to fix error Cannot find module?

If you are getting the "Cannot find module" error when trying to run a local file, make sure that the path you passed to the node command points to a file that exists. For example, if you run node src/index. js , make sure that the path src/index. js points to an existing file.

Can not find module TS?

The "Cannot find module or its corresponding type declarations" error occurs when TypeScript cannot locate a third-party or local module in our project. To solve the error, make sure to install the module and try setting moduleResolution to node in your tsconfig. json file.

Can not find module npm?

Set the Windows environment variable for NODE_PATH. This path is where your packages are installed. It's probably something likeNODE_PATH = C:\Users\user\node_modules or C:\Users\user\AppData\Roaming\npm\node_modules. Start a new cmd console and npm should work fine.

Can not find module in angular?

To solve the error "Cannot find module '@angular/core'", make sure you have installed all dependencies by running the npm install command, set the baseUrl option to src in your tsconfig. json file and restart your IDE and development server.


1 Answers

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"
like image 148
Bruno Grieder Avatar answered Oct 05 '22 07:10

Bruno Grieder