working locally

.github/workflows/build.yml

@@ -0,0 +1,41 @@
+on:
+  pull_request:
+    types: [ closed ]
+
+name: Build Angular
+jobs:
+  build:
+    if: github.event.pull_request.merged == true
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [lts/*]
+
+    steps:
+      - uses: actions/checkout@v1
+
+      - name: Node ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: npm install and npm run build
+        run: |
+          npm i --save-dev @angular/core
+          npm i --save-dev @angular/cli
+          npm i --save-dev ng-packagr
+          npm i --save-dev @angular-devkit/build-angular
+          npm i
+          npm run build:prod
+          cd dist
+          mv ../.npmrc ngx-leaflet-loading
+          tar -czf release.tgz ngx-leaflet-loading/
+          cd ngx-leaflet-loading
+          npm publish --access public
+        env:
+          NPM_TOKEN: ${{secrets.NPM_TOKEN}}
+      - name: Push Build to Releases
+        uses: ncipollo/release-action@v1
+        with:
+          artifacts: "dist/release.tgz"
+          token: ${{ secrets.GITHUB_TOKEN }}
+          tag: "1.0.4"

.gitignore

@@ -80,7 +80,7 @@ typings/
 
 # Nuxt.js build / generate output
 .nuxt
-dist
+dist/
 
 # Gatsby files
 .cache/
@@ -104,3 +104,4 @@ dist
 .tern-port
 
 .DS_Store
+.angular

.npmrc

@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}

README.md

@@ -18,6 +18,7 @@ Install using npm:
 npm install @runette/ngx-leaflet-loading
 ```
 
+Note that from version 1.0.4, this library is built using a partial Ivy compilation and should work with any version of Angular.io after version 12.0.0
 # Usage
 
 This library needs to be imported into the application module:
@@ -64,7 +65,7 @@ import { Map } from 'leaflet';
 
 
 export class OsmMapComponent implements OnInit, OnDestroy {
-  public map: Map;
+  public map?: Map;
   public loadingOptions={
     position: 'topleft',
   }
@@ -105,3 +106,20 @@ Use `ViewChild` to access the component, for instance
 The actual instance of the control can then be accessed directly as `this.loadingComponent.loading`
 
 For more details and worked examples, see : [Article](https://medium.com/runic-software/advanced-interactive-maps-in-angular-with-leaflet-68baafa03f72)
+
+# Contributions
+
+Contributions to this repository are very welcome.
+
+Please fork the repository and create a new branch for your changes. The branch can be built locally using 
+
+```
+ng build ngx-leaflet-loading
+```
+
+in the root folder of the repo. This creates an npm package in a folder called `dist`. This can loaded in a test app using `npm install` and the FQ path to the dist folder.
+
+When your changes are complete create a Pull Requet against the master. It is IMPORTANT that you change the version number in `package.json` AND the tag number in `.github/workflowds/build.yaml` to the next version before the PR.
+
+When I have accepted and merged the PR, Github actions will automatically build the new package release and loaded it both as a GH release using the version as the tag name and publish the new version on npm.
+

angular.json

@@ -0,0 +1,38 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ngx-leaflet-loading": {
+      "projectType": "library",
+      "root": "",
+      "sourceRoot": "/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "ptsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js"
+          }
+        }
+      }
+    }
+  }
+}

ng-package.json

@@ -1,10 +1,11 @@
 {
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/ngx-loading-control",
+  "$schema": "node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "dist/ngx-leaflet-loading",
   "lib": {
     "entryFile": "src/public-api.ts"
   },
-  "whitelistedNonPeerDependencies": [
+  "allowedNonPeerDependencies":[
+    "@types/leaflet-loading",
     "leaflet-loading"
   ]
 }