AW-471 Farmmaps library (initial commit).

README.md

@@ -2,6 +2,12 @@
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.8.
 
+##Add a new library
+Run `ng generate library lib-name --prefix=farmmaps` to add a new library in the `farmmaps` namespace. Build the library `ng build lib-name`. 
+
+##Add a new component
+Run `ng generate component component-name --project=lib-name` to add a new component in a library. Export the new component from the library’s module. Add the new component to the entry file of the library (`public_api.ts`). Rebuild the library. Import the module in the consumer and use `<farmmaps-component-name></farmmaps-component-name>`.
+
 ## 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.
@@ -24,4 +30,4 @@ Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protrac
 
 ## Further help
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). Also check [Angular CLI README (https://blog.angularindepth.com/creating-a-library-in-angular-6-87799552e7e5).

angular.json

@@ -130,6 +130,41 @@
           }
         }
       }
+    },
+    "material": {
+      "root": "projects/material",
+      "sourceRoot": "projects/material/src",
+      "projectType": "library",
+      "prefix": "farmmaps",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/material/tsconfig.lib.json",
+            "project": "projects/material/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/material/src/test.ts",
+            "tsConfig": "projects/material/tsconfig.spec.json",
+            "karmaConfig": "projects/material/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/material/tsconfig.lib.json",
+              "projects/material/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
     }
   },
   "defaultProject": "farmmaps-lib-app"

package.json

@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.13.0",
+    "@angular-devkit/build-ng-packagr": "~0.13.0",
     "@angular/cli": "~7.3.8",
     "@angular/compiler-cli": "~7.2.0",
     "@angular/language-service": "~7.2.0",
@@ -40,8 +41,11 @@
     "karma-coverage-istanbul-reporter": "~2.0.1",
     "karma-jasmine": "~1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "ng-packagr": "^4.2.0",
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
+    "tsickle": ">=0.34.0",
+    "tslib": "^1.9.0",
     "tslint": "~5.11.0",
     "typescript": "~3.2.2"
   }

projects/material/README.md

@@ -0,0 +1,24 @@
+# Material
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project material` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project material`.
+> Note: Don't forget to add `--project material` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build material` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build material`, go to the dist folder `cd dist/material` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test material` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

projects/material/karma.conf.js

@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/material'),
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

projects/material/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/material",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

projects/material/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "material",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^7.2.0",
+    "@angular/core": "^7.2.0"
+  }
+}

projects/material/src/lib/cropfield-selector/cropfield-selector.component.html

@@ -0,0 +1,3 @@
+<p>
+  cropfield-selector works!
+</p>

projects/material/src/lib/cropfield-selector/cropfield-selector.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CropfieldSelectorComponent } from './cropfield-selector.component';
+
+describe('CropfieldSelectorComponent', () => {
+  let component: CropfieldSelectorComponent;
+  let fixture: ComponentFixture<CropfieldSelectorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CropfieldSelectorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CropfieldSelectorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/material/src/lib/cropfield-selector/cropfield-selector.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'farmmaps-cropfield-selector',
+  templateUrl: './cropfield-selector.component.html',
+  styleUrls: ['./cropfield-selector.component.css']
+})
+export class CropfieldSelectorComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

projects/material/src/lib/material.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MaterialComponent } from './material.component';
+
+describe('MaterialComponent', () => {
+  let component: MaterialComponent;
+  let fixture: ComponentFixture<MaterialComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MaterialComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MaterialComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/material/src/lib/material.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'farmmaps-material',
+  template: `
+    <p>
+      material works!
+    </p>
+  `,
+  styles: []
+})
+export class MaterialComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

projects/material/src/lib/material.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { MaterialComponent } from './material.component';
+import { CropfieldSelectorComponent } from './cropfield-selector/cropfield-selector.component';
+
+@NgModule({
+  declarations: [
+    MaterialComponent,
+    CropfieldSelectorComponent
+  ],
+  imports: [
+  ],
+  exports: [
+    MaterialComponent,
+    CropfieldSelectorComponent
+  ]
+})
+export class MaterialModule { }

projects/material/src/lib/material.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MaterialService } from './material.service';
+
+describe('MaterialService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: MaterialService = TestBed.get(MaterialService);
+    expect(service).toBeTruthy();
+  });
+});

projects/material/src/lib/material.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MaterialService {
+
+  constructor() { }
+}

projects/material/src/public-api.ts

@@ -0,0 +1,9 @@
+/*
+ * Public API Surface of material
+ */
+
+export * from './lib/material.service';
+export * from './lib/material.component';
+export * from './lib/material.module';
+
+export * from './lib/cropfield-selector/cropfield-selector.component';

projects/material/src/test.ts

@@ -0,0 +1,22 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

projects/material/tsconfig.lib.json

@@ -0,0 +1,32 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "declaration": true,
+    "sourceMap": true,
+    "inlineSources": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

projects/material/tsconfig.spec.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

projects/material/tslint.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "farmmaps",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "farmmaps",
+      "kebab-case"
+    ]
+  }
+}

src/app/app.component.html

@@ -5,6 +5,11 @@
   </h1>
   <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
 </div>
+<h2>Material Test</h2>
+<farmmaps-material></farmmaps-material>
+<h2>Material Test Cropfield Selector</h2>
+<farmmaps-cropfield-selector></farmmaps-cropfield-selector>
+<ul>
 <h2>Here are some links to help you start: </h2>
 <ul>
   <li>

src/app/app.module.ts

@@ -2,13 +2,15 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
+import { MaterialModule } from 'material';
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    MaterialModule
   ],
   providers: [],
   bootstrap: [AppComponent]

tsconfig.json

@@ -17,6 +17,14 @@
     "lib": [
       "es2018",
       "dom"
-    ]
+    ],
+    "paths": {
+      "material": [
+        "dist/material"
+      ],
+      "material/*": [
+        "dist/material/*"
+      ]
+    }
   }
-}
+}