CODEWITHSUNDEEP
angulartypescripttsconfigangular-library
Anjil Dhamala
Anjil Dhamala

Reputation: 1622

Importing custom Angular library with Tyepscript support

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!

Upvotes: 0

Views: 136

Answers (1)

Kyle Burkett
Kyle Burkett

Reputation: 1443

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.

Upvotes: 1

Related Questions