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\$
5
  • \$\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\$ Commented Mar 30, 2017 at 19:52
  • \$\begingroup\$ @StephenRauch left helpful feedback. Thank you! Could the down voter please also help me improve my review question? \$\endgroup\$ Commented Mar 30, 2017 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\$ Commented Mar 30, 2017 at 21:38
  • \$\begingroup\$ Hi Arran, have you modified anything in the process you described above? \$\endgroup\$ Commented Jun 14, 2017 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\$ Commented Aug 25, 2017 at 11:55

0

Reset to default

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.