Importing custom Angular library with Tyepscript support

Question

I have created a custom angular/ionic library that I would like to npm install and import into my other projects. I am able to do so by doing

import {SharedModule} from 'library-name/src';

However, when i only leave it at 'library-name' without src, it complains that it cannot find the module. Is it the tsconfig's job or package.json's job to tell typescript compiler that index.ts under library's src is the main file? I have both of them set up as

for tsconfig.json
"files":["./src/index.ts"]

and for package.json as
"main":["./src/index.ts"]

Additionally, leaving it at 'library-name/src' is not an option for me because for some reason I'm seeing ENOENT index.js is not a file when I'm clearly importing a typescript file. Super confused!

score 1 · Answer 1 · answered Jul 09 '18 at 21:35

It's likely your package needs a little more work. I recommend Sinopia Server to host your internal npm packages.

https://github.com/rlidwka/sinopia

to run it as a service use the init.d script found here.

https://github.com/ramiel/sinopia-scripts

Config File Location /etc/sinopia/config.yaml

To create and publish an npm package to sinopia, I recommend gulp task runner with an alteration of this script:

var bump = require('gulp-bump'),
del = require('del'),
exec = require('child_process').exec,
gulp = require('gulp'),
merge = require('merge2'),
typescript = require('gulp-typescript'),
fs = require('fs');

gulp.task('clean', function () {
del(['dist/*']);
});

gulp.task('bump', ['clean'], function () {
gulp.src('./package.json')
    .pipe(bump({
        type: 'patch'
    }))
    .pipe(gulp.dest('./'));
});

gulp.task('bundle', ['bump'], function () {
var tsResult = gulp.src('lib/*.ts')
    .pipe(typescript({
        module: "commonjs",
        target: "es5",
        noImplicitAny: true,
        emitDecoratorMetadata: true,
        experimentalDecorators: true,
        outDir: "dist/",
        rootDir: "lib/",
        sourceMap: true,
        declaration: true,
        moduleResolution: "node",
        removeComments: false,
        "lib": [
            "es2017",
            "es2016.array.include",
            "dom"
          ],
        types: ["jasmine"]
    }));

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

gulp.task('copy', ['bundle'], () => {

gulp.src(['README.md'])
    .pipe(gulp.dest('dist/'));
});

gulp.task('package', ['copy'], () => {

const pkgjson = JSON.parse(fs.readFileSync('./package.json', 'utf8'));

delete pkgjson.scripts;

delete pkgjson.devDependencies;

const filepath = './dist/package.json';

fs.writeFileSync(filepath, JSON.stringify(pkgjson, null, 2), 'utf-8');

});

gulp.task('git-add', ['package'], function (cb) {
exec('git add -A', function (err, stdout, stderr) {
    console.log(stdout);
    console.log(stderr);
    cb(err);
});
});


gulp.task('git-commit', ['git-add'], function (cb) {

var package = require('./package.json');

exec('git commit -m "Version ' + package.version + ' release."', function (err, stdout, stderr) {
    console.log(stdout);
    console.log(stderr);
    cb(err);
});
});

gulp.task('git-push', ['git-commit'], function (cb) {

exec('git push', function (err, stdout, stderr) {
    console.log(stdout);
    console.log(stderr);
    cb(err);
});
});

gulp.task('publish', ['git-push'], function (cb) {

exec('npm publish ./dist', function (err, stdout, stderr) {
    console.log(stdout);
    console.log(stderr);
    cb(err);
});
});

This defines several commands.

If you run gulp publish it will run all of the commands in order which, will clean the build directory, package the files, commit, push, and then publish the package.

That's a fantastic idea. I'll be sure to do this as I move forward. One thing I noticed was that having index.ts at the base of the project works much better for typescript intellisense support instead of inside /src and specifying package.json that /src/index.ts is the main file. — Anjil Dhamala, Jul 11 '18 at 14:21
This recommendation is directly from our own setup here at our organization and it's really a beautiful thing. It takes maybe a day or two to work out bugs but it saves so much development work and maintenance in the long run! — Kyle Burkett, Jul 11 '18 at 19:16

Importing custom Angular library with Tyepscript support

1 Answers1