Búsqueda de sitios web

node.js - Publicar módulo/componente de angular2 como paquete npm

Me gustaría crear mi biblioteca en npm de componentes de Angular2 (mi cuadrícula genérica, mis botones genéricos, etc.) y módulos (mis clientes en el módulo de cuadrícula) pero no puedo encontrar ningún ejemplo que funcione en línea (aunque encontré algunos, nunca funcionan...

index.js :

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

Aquí está mi 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"
}

mi 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. y la arquitectura de mi proyecto se ve así :

     - 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

Luego ejecuto tsc index.ts --outDir ./lib y hago npm version patch, luego npm publish.

Mi código está en npm seguro, entonces puedo instalarlo en otra carpeta... Sin embargo, siempre obtengo un error 404 :

Error: (SystemJS) error XHR (404 No Encontrado) al cargar http://localhost:3000/my-perso-components Error: error XHR (404 No Encontrado)

Lo cual es extraño, porque sí tengo autocompletado para el nombre de mi componente cuando hago la importación dentro de otro componente y ¡no se muestra ningún error!

¿Alguna idea? ¿Qué puedo intentar? ¿Tienes un tutorial reciente y funcional para crear, publicar y usar un paquete npm?

Muchas gracias... será de gran ayuda

Respuesta #1

¿Has revisado esto http://blog.mgechev.com/2017/01/21/distributing-an-angular-library-aot-ngc-types/ Distribuyendo una Biblioteca Angular - La Guía Breve

Artículos relacionados