3
\$\begingroup\$

I've found a lot of blog posts that seem to suggest publishing a library TypeScript (as source) and all to npm or to a private repository. It feels like we should be doing some transpiling first and then publishing only something that is ready to consume.

Can you critique my approach for publishing a angular-cli+angular(4) components library to npm or like?

Context

Multiple angular front-end SPA's that may have common components i.e. a navigation bar. These common components could be published as a library including the navigation bar to npm or a privately scoped npm repository for use by the various front-end apps.

The common components could be developed in a project using angular-cli, angular(4).

Approach

  1. Create tsconfig.aot.json which inherits from tsconfig.json so that we can aot transpile the project back to es5
    • Ensure that metadata and index files are included/emitted
    • Ensure the src/.npmignore files are in place to include/exclude files already excluded by the .gitignore
  2. When the tests pass with ng test, ng e2e, ng lint, and ng build as described in the .travis.yml
    • npm version patch (or major etc.)
    • git push + git push --tags
  3. When the tag passes on CI
    • ngc -p tsconfig.aot.json which will create the distribution
    • npm publish

Code

The code can be found on GitHub

Referenced files

tsconfig.aot.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "",
    "module": "es2015",
    "baseUrl": "",
    "types": [],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "files": [
    "src/app/app.module.ts",
    "src/main-aot.ts",
    "index.ts"
  ],
  "angularCompilerOptions": {
    "genDir": "./dist/aot",
    "skipMetadataEmit" : false
  }
}

tsconfig.aot.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": true,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "./node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

src/.npmignore

*.ts
!*.d.ts
.npmignore

.travis.yml

language: node_js
dist: trusty
node_js:
  - 6.1
sudo: required
addons:
apt:
  sources:
    - google-chrome
  packages:
    - google-chrome-stable
    - google-chrome-beta
before_install:
  - export CHROME_BIN=chromium-browser
  - export DISPLAY=:99.0
  - sh -e /etc/init.d/xvfb start
install:
  - npm install
  - npm install codecov
script:
  - npm run ng test -- --single-run=true --browsers Chrome --code-coverage
  - ./node_modules/codecov/bin/codecov
  - npm run ng e2e
  - npm run ng lint
  - npm run ng build
  - npm run package
\$\endgroup\$
  • \$\begingroup\$ Welcome to StackExchange Code Review! Please review How do I ask a good Question? Specifically, Be sure to embed the code you want reviewed in the question itself; you can leave supporting, but non-essential, code in links to other sites. \$\endgroup\$ – Stephen Rauch Mar 30 '17 at 19:52
  • \$\begingroup\$ @StephenRauch left helpful feedback. Thank you! Could the down voter please also help me improve my review question? \$\endgroup\$ – Arran Bartish Mar 30 '17 at 21:36
  • \$\begingroup\$ If the downvote was before you revised, I would guess that was the reason. But +1 from me. Hope you get some quality reviews. \$\endgroup\$ – Stephen Rauch Mar 30 '17 at 21:38
  • \$\begingroup\$ Hi Arran, have you modified anything in the process you described above? \$\endgroup\$ – Igor Soloydenko Jun 14 '17 at 22:29
  • \$\begingroup\$ @IgorSoloydenko: Mostly the same. I did get the process working pretty well. [working commit][github.com/arranbartish/angular-cli-widgets/tree/… that is more complicated than I like. If I don't get a better answer I'll probably post the details of this as the answer. At the time of the comment the build was broken because of dependency change. \$\endgroup\$ – Arran Bartish Aug 25 '17 at 11:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.