SimplemdeNgLib

Main info:

• Angular Package Format (APF) v6.0
• stories create library - Library support in Angular CLI 6

Note: The code of this project originates from https://github.com/doxiaodong/ng2-simplemde. The reason of creating a separate repo is to build and package a healthy angular library and npm package. Therefore the source structure changed reasonably.

Github: https://github.com/Cha-OS/simplemde-ng-lib

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Creating / Reproduction

# generate environment with library environment app
ng new simplemde-ng-env-for-lib
# generating library
ng generate library simplemde-ng-lib
# building
ng build simplemde-ng-lib

Add dependencise in the lib's package.json:

  "dependencies": {
    "@types/simplemde": "^1.11.7",
    "simplemde": "^1.11.2"
  },

Run yarn to install packages:

cd projects/simplemde-ng-lib/
yarn

Error whitelisted - Distributing npm packages with 'dependencies' is not recommended

Distributing npm packages with 'dependencies' is not recommended. Please consider adding @types/simplemde to 'peerDependencies' or remove it from 'dependencies'.

BUILD ERROR
Dependency @types/simplemde must be explicitly whitelisted.
Error: Dependency @types/simplemde must be explicitly whitelisted.

• ng-packagr/ng-packagr#716

In the ng-package.prod.json and ng-package.json files after the lib section add a whitelistedNonPeerDependencies section with the list of dependencies you want to have:

  "lib": {
    "entryFile": "src/public_api.ts"
  },
  "whitelistedNonPeerDependencies": [
    "@types/simplemde",
    "simplemde"
  ]

Error: Cannot read property 'isSkipSelf' of null

• ng-packagr/ng-packagr#513
• ng-packagr/ng-packagr#195
  • Yes. There are some issue with barrels in the Angular compiler afaik. I don't know how and when exactly the issue occurs. However, I can say that it's better to use the full-path imports (pointing to a *.ts file) instead of the barrel imports.
• angular/angular#21082
• ng-packagr/ng-packagr#382
• angular/angular#20931
• angular/angular#8704
• angular/angular#20523

It is a very criptic error, and coming mostly as a side effect of some other error. To unreveal the real error you should avoid using TypeScript barrelsa and * exports (in simplemde-ng-lib/projects/simplemde-ng-lib/src/public_api.ts)

Instead of:

export * from './lib/simplemde-ng-lib-config';
export * from './lib/simplemde-ng-lib-component';

write:

export {SIMPLEMDE_CONFIG} from './lib/simplemde-ng-lib-config';
export {SimplemdeModule} from './lib/simplemde-ng-lib-component';

Additionally, if you do not see the proper error, you might want to integrate the library in the demo app, and run ng serve and see error reports. To do this please check the section Running demo app. You might need to restart ng serve now and then to get the latest problems. This finally revealed us the error in one of deeper TS files.

Build production:

ng build simplemde-ng-lib --prod

Problem with missing node_modules in the dist folder

Error: Data path "" should NOT have additional properties(assets).

• angular/angular-cli#11071
• angular/angular-cli#9994
• https://stackoverflow.com/questions/41555624/how-to-include-assets-from-node-modules-in-angular-cli-project

We tried to add an assets property in the angular.json file under the lib project, but none of the solutions is working:

            "assets": [
              "node_modules"
            ],

            "assets": [
              {
                "glob": "**/*",
                "input": "node_modules",
                "output": "node_modules"
              }
            ],

To avoid currently we need to manually move node_modules to the lib's dist folder.

Publishing

# build
ng build simplemde-ng-lib --prod
# get to the build folder
cd dist/simplemde-ng-lib/
# publish
npm publish
cd ../..
# add npm package
yarn add --dev simplemde-ng-lib
# build
ng build --prod
# run local server for testing
cd dist/simplemde-ng-env-for-lib/
python -m SimpleHTTPServer 8000

Running demo app

Explicitly

Before the library is built you can import it explicitly:

import { SimplemdeModule, SIMPLEMDE_CONFIG } from '../../projects/simplemde-ng-lib/src/public_api';

From built dist

import { SimplemdeModule, SIMPLEMDE_CONFIG } from 'simplemde-ng-lib';

It will load the library from the designated output build path (in our case simplemde-ng-lib/dist/simplemde-ng-lib). This is currently directed by the path property inside the simplemde-ng-lib/tsconfig.json:

    "paths": {
      "simplemde-ng-lib": [
        "dist/simplemde-ng-lib"
      ],
      "simplemde-ng-lib/*": [
        "dist/simplemde-ng-lib/*"
      ]
    }

ERROR in dist/simplemde-ng-lib/lib/simplemde-ng-lib-component.d.ts(3,28): error TS2307: Cannot find module 'simplemde'.

This is the problem, because on the output build path there is no simplemde. The solution was to put the original node_modules (from the simplemde-ng-lib/projects/simplemde-ng-lib) to the output build path.

TODO: Check if it will be provided in the npm package, or at least it will be built when the library is imported later for use.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.