Publish angular2 module / component as npm package

Question

I would like to create my library in npm of Angular2 components (my generic grid, my generic buttons, etc.) and modules (my clients in grid module) but I can't find any working example online (I did find a few though, but it never works...

index.js :

export { PortalGridComponent } from './src/portal-grid/portal-grid.component';

Here is my package.config.json :

{
  "name": "my-perso-components",
  "version": "1.0.13",
  "main": "index.js",
  "scripts": {
    "nbuild": "tsc index.ts --outDir ./lib",
    "build": "tsc -p src/",
    "build:watch": "tsc -p src/ -w",
    "build:e2e": "tsc -p e2e/",
    "serve": "lite-server -c=bs-config.json",
    "serve:e2e": "lite-server -c=bs-config.e2e.json",
    "prestart": "npm run build",
    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
    "pree2e": "npm run build:e2e",
    "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
    "preprotractor": "webdriver-manager update",
    "protractor": "protractor protractor.config.js",
    "pretest": "npm run build",
    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
    "pretest:once": "npm run build",
    "test:once": "karma start karma.conf.js --single-run",
    "lint": "tslint ./src/**/*.ts -t verbose"
  },
  "dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",
    "@angular/forms": "~2.4.0",
    "@angular/http": "~2.4.0",
    "@angular/platform-browser": "~2.4.0",
    "@angular/platform-browser-dynamic": "~2.4.0",
    "@angular/router": "~3.4.0",
    "angular-in-memory-web-api": "~0.2.4",
    "systemjs": "0.19.40",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.35",
    "@types/jasmine": "^2.5.36",
    "@types/node": "^6.0.46",
    "canonical-path": "0.0.2",
    "concurrently": "^3.1.0",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.4",
    "protractor": "~4.0.14",
    "rimraf": "^2.5.4",
    "tslint": "^3.15.1",
    "typescript": "~2.0.10"
  },
  "license": "ISC"
}

my tsconfig.json :

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "outDir": "./lib",
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "./node_modules/@types"
    ],
    "types": [
      "core-js"
    ]
  }
}

1. and my project architecture looks like this :

    - lib
    - node_modules
    - src
        - app
        - my-perso-grid
           - my-perso-grid.component.ts
           - my-perso-grid.html
           - my-perso-grid.scss
    - .npmignore
    - index.ts
    - package.json
    - tsconfig.json
   

I then run tsc index.ts --outDir ./lib and do npm version patch , then npm publish.

My code is in npm for sure, I can then install it in another folder... However, I always get a 404 issue :

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/my-perso-components Error: XHR error (404 Not Found)

Which is weird, because I do have to autocompletion for the name of my component when I do the Import inside another component and no error shown !!

Any idea ? what can I try ? Do you have a recent and working tutorial to create, publish and use an npm package ?

Thanks a lot... will help a lot

Answer 1

Have you checked this http://blog.mgechev.com/2017/01/21/distributing-an-angular-library-aot-ngc-types/ Distributing an Angular Library - The Brief Guide