Add ng-packagr to packaging harbor-ui npm repo

Using ng-packagr to build and publish npm repo

.travis.yml

@@ -82,7 +82,7 @@ script:
   - sudo mv ./VERSION /harbor/UIVERSION
   - sudo service postgresql stop
   - sudo make run_clarity_ut CLARITYIMAGE=vmware/harbor-clarity-ui-builder:1.4.0
-  - cat ./src/ui_ng/lib/npm-ut-test-results
+  - cat ./src/ui_ng/npm-ut-test-results
   - sudo ./tests/testprepare.sh 
   - sudo make -f make/photon/Makefile _build_postgresql _build_db _build_registry -e VERSIONTAG=dev -e CLAIRDBVERSION=dev -e REGISTRYVERSION=v2.6.2
   - sudo sed -i 's/__reg_version__/v2.6.2-dev/g' ./make/docker-compose.test.yml

Makefile

@@ -378,7 +378,7 @@ refresh_clarity_builder:
 
 run_clarity_ut:
 	@echo "run clarity ut ..."
-	@$(DOCKERCMD) run --rm -v $(UINGPATH)/lib:$(CLARITYSEEDPATH) -v $(BUILDPATH)/tests:$(CLARITYSEEDPATH)/tests $(CLARITYIMAGE) $(SHELL) $(CLARITYSEEDPATH)/tests/run-clarity-ut.sh
+	@$(DOCKERCMD) run --rm -v $(UINGPATH):$(CLARITYSEEDPATH) -v $(BUILDPATH)/tests:$(CLARITYSEEDPATH)/tests $(CLARITYIMAGE) $(SHELL) $(CLARITYSEEDPATH)/tests/run-clarity-ut.sh
 
 pushimage:
 	@echo "pushing harbor images ..."

src/ui_ng/karma.conf.js

@@ -4,19 +4,19 @@
 module.exports = function (config) {
     config.set({
         basePath: '',
-        frameworks: ['jasmine', 'angular-cli'],
+        frameworks: ['jasmine', '@angular/cli'],
         plugins: [
             require('karma-jasmine'),
             require('karma-chrome-launcher'),
             require('karma-mocha-reporter'),
             require('karma-remap-istanbul'),
-            require('angular-cli/plugins/karma')
+            require('@angular/cli/plugins/karma')
         ],
         files: [
             {pattern: './src/test.ts', watched: false}
         ],
         preprocessors: {
-            './src/test.ts': ['angular-cli']
+            './src/test.ts': ['@angular/cli']
         },
         mime: {
             'text/x-typescript': ['ts', 'tsx']

src/ui_ng/lib/angular-cli.json

@@ -1,60 +0,0 @@
-{
-    "project": {
-        "version": "0.1.0",
-        "name": "harbor-ui"
-    },
-    "apps": [{
-        "root": "src",
-        "outDir": "dist",
-        "index": "index.ts",
-        "main": "main.ts",
-        "test": "test.ts",
-        "tsconfig": "tsconfig.json",
-        "prefix": "",
-        "mobile": false,
-        "styles": [
-            "../node_modules/clarity-icons/clarity-icons.min.css",
-            "../node_modules/clarity-ui/clarity-ui.min.css"
-        ],
-        "scripts": [
-            "../node_modules/core-js/client/shim.min.js",
-            "../node_modules/mutationobserver-shim/dist/mutationobserver.min.js",
-            "../node_modules/@webcomponents/custom-elements/custom-elements.min.js",
-            "../node_modules/clarity-icons/clarity-icons.min.js",
-            "../node_modules/web-animations-js/web-animations.min.js"
-        ],
-        "environmentSource": "environments/environment.ts",
-        "environments": {
-            "dev": "environments/environment.ts",
-            "prod": "environments/environment.prod.ts"
-        }
-    }],
-    "addons": [],
-    "packages": [],
-    "e2e": {
-        "protractor": {
-            "config": "./protractor.config.js"
-        }
-    },
-    "test": {
-        "karma": {
-            "config": "./karma.conf.js"
-        }
-    },
-    "defaults": {
-        "styleExt": "scss",
-        "prefixInterfaces": false,
-        "inline": {
-            "style": false,
-            "template": false
-        },
-        "spec": {
-            "class": false,
-            "component": true,
-            "directive": true,
-            "module": false,
-            "pipe": true,
-            "service": true
-        }
-    }
-}

src/ui_ng/lib/karma.conf.js

@@ -1,50 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/0.13/config/configuration-file.html
-
-module.exports = function (config) {
-    config.set({
-        basePath: '',
-        frameworks: ['jasmine', '@angular/cli'],
-        plugins: [
-            require('karma-jasmine'),
-            require('karma-chrome-launcher'),
-            require('karma-mocha-reporter'),
-            require('karma-remap-istanbul'),
-            require('@angular/cli/plugins/karma')
-        ],
-        files: [
-            {pattern: './src/test.ts', watched: false}
-        ],
-        preprocessors: {
-            './src/test.ts': ['@angular/cli']
-        },
-        mime: {
-            'text/x-typescript': ['ts', 'tsx']
-        },
-        remapIstanbulReporter: {
-            reports: {
-                html: 'coverage',
-                lcovonly: './coverage/coverage.lcov'
-            }
-        },
-        angularCli: {
-            config: './angular-cli.json',
-            environment: 'dev'
-        },
-        reporters: config.angularCli && config.angularCli.codeCoverage
-            ? ['mocha', 'karma-remap-istanbul']
-            : ['mocha'],
-        port: 9876,
-        colors: true,
-        logLevel: config.LOG_INFO,
-        autoWatch: true,
-        browsers: ['ChromeHeadlessNoSandbox'],
-        customLaunchers: {
-            ChromeHeadlessNoSandbox: {
-              base: 'ChromeHeadless',
-              flags: ['--no-sandbox']
-            }
-          },
-        singleRun: true
-    });
-};

src/ui_ng/lib/karma.conf.win.js

@@ -1,44 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/0.13/config/configuration-file.html
-
-module.exports = function (config) {
-    config.set({
-        basePath: '',
-        frameworks: ['jasmine', '@angular/cli'],
-        plugins: [
-            require('karma-jasmine'),
-            require('karma-chrome-launcher'),
-            require('karma-mocha-reporter'),
-            require('karma-remap-istanbul'),
-            require('@angular/cli/plugins/karma')
-        ],
-        files: [
-            {pattern: './src/test.ts', watched: false}
-        ],
-        preprocessors: {
-            './src/test.ts': ['@angular/cli']
-        },
-        mime: {
-            'text/x-typescript': ['ts', 'tsx']
-        },
-        remapIstanbulReporter: {
-            reports: {
-                html: 'coverage',
-                lcovonly: './coverage/coverage.lcov'
-            }
-        },
-        angularCli: {
-            config: './angular-cli.json',
-            environment: 'dev'
-        },
-        reporters: config.angularCli && config.angularCli.codeCoverage
-            ? ['mocha', 'karma-remap-istanbul']
-            : ['mocha'],
-        port: 9876,
-        colors: true,
-        logLevel: config.LOG_INFO,
-        autoWatch: true,
-        browsers: ['Chrome'],
-        singleRun: true
-    });
-};

src/ui_ng/lib/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "index.ts",
+    "externals": {
+      "@ngx-translate/core": "ngx-translate-core",
+      "@ngx-translate/core/index": "ngx-translate-core"
+     }
+  }
+}

src/ui_ng/lib/package.json

@@ -1,22 +1,24 @@
 {
     "name": "harbor-ui",
-    "version": "0.7.13",
+    "version": "0.7.18-dev.1",
     "description": "Harbor shared UI components based on Clarity and Angular4",
-    "scripts": {
+    "author": "VMware",
-        "start": "ng serve --host 0.0.0.0 --port 4500 --proxy-config proxy.config.json",
+    "module": "index.js",
-        "lint": "tslint \"src/**/*.ts\"",
+    "main": "bundles/harborui.umd.min.js",
-        "test": "ng test --single-run",
+    "jsnext:main": "index.js",
-        "test:win": "karma start karma.conf.win.js --single-run",
+    "typings": "index.d.ts",
-        "pree2e": "webdriver-manager update",
+    "keywords": [
-        "e2e": "protractor",
+        "Harbor",
-        "cleanup": "rimraf dist",
+        "Clarity",
-        "copy": "copyfiles -f README.md LICENSE AUTHORS pkg/package.json dist",
+        "Angular4"
-        "transpile": "ngc -p tsconfig.json",
+    ],
-        "package": "rollup -c",
+    "license": "Apache 2.0",
-        "minify": "uglifyjs dist/bundles/harborui.umd.js --screw-ie8 --compress --mangle --comments --output dist/bundles/harborui.umd.min.js",
+    "repository": {
-        "build": "npm run cleanup && npm run transpile && npm run package && npm run minify && npm run copy"
+        "type": "git",
+        "url": "https://github.com/vmware/harbor.git"
     },
-    "dependencies": {
+    "homepage": "https://github.com/vmware/harbor#readme",
+    "peerDependencies": {
         "@angular/animations": "^4.3.0",
         "@angular/common": "^4.3.0",
         "@angular/compiler": "^4.3.0",
@@ -29,9 +31,9 @@
         "@ngx-translate/core": "^6.0.0",
         "@ngx-translate/http-loader": "0.0.3",
         "@webcomponents/custom-elements": "^1.0.0",
-        "clarity-angular": "^0.10.27",
+        "clarity-angular": "^0.10.17",
-        "clarity-icons": "^0.10.27",
+        "clarity-icons": "^0.10.17",
-        "clarity-ui": "^0.10.27",
+        "clarity-ui": "^0.10.17",
         "core-js": "^2.4.1",
         "intl": "^1.2.5",
         "mutationobserver-shim": "^0.3.2",
@@ -39,35 +41,6 @@
         "rxjs": "^5.0.1",
         "ts-helpers": "^1.1.1",
         "web-animations-js": "^2.2.1",
-        "zone.js": "0.8.19"
+        "zone.js": "^0.8.4"
-    },
-    "devDependencies": {
-        "@angular/cli": "1.4.0",
-        "@angular/compiler-cli": "^4.3.0",
-        "@types/core-js": "^0.9.41",
-        "@types/jasmine": "~2.5.53",
-        "@types/node": "~6.0.60",
-        "bootstrap": "4.0.0-alpha.5",
-        "codelyzer": "~3.1.1",
-        "copyfiles": "^1.2.0",
-        "enhanced-resolve": "^3.0.0",
-        "jasmine-core": "~2.6.2",
-        "jasmine-spec-reporter": "~4.1.0",
-        "karma": "~1.7.0",
-        "karma-chrome-launcher": "~2.1.1",
-        "karma-cli": "~1.0.1",
-        "karma-jasmine": "~1.1.0",
-        "karma-mocha-reporter": "^2.2.4",
-        "karma-remap-istanbul": "^0.2.1",
-        "protractor": "^4.0.9",
-        "rimraf": "^2.6.1",
-        "rollup": "^0.41.6",
-        "rollup-plugin-node-resolve": "^3.0.0",
-        "ts-node": "~3.2.0",
-        "tslint": "~5.7.0",
-        "typescript": "~2.3.3",
-        "typings": "^1.4.0",
-        "uglify-js": "^2.8.22",
-        "webdriver-manager": "10.2.5"
     }
 }

src/ui_ng/lib/pkg/package.json

@@ -1,46 +0,0 @@
-{
-    "name": "harbor-ui",
-    "version": "0.7.13",
-    "description": "Harbor shared UI components based on Clarity and Angular4",
-    "author": "VMware",
-    "module": "index.js",
-    "main": "bundles/harborui.umd.min.js",
-    "jsnext:main": "index.js",
-    "typings": "index.d.ts",
-    "keywords": [
-        "Harbor",
-        "Clarity",
-        "Angular4"
-    ],
-    "license": "Apache 2.0",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/vmware/harbor.git"
-    },
-    "homepage": "https://github.com/vmware/harbor#readme",
-    "peerDependencies": {
-        "@angular/animations": "^4.3.0",
-        "@angular/common": "^4.3.0",
-        "@angular/compiler": "^4.3.0",
-        "@angular/core": "^4.3.0",
-        "@angular/forms": "^4.3.0",
-        "@angular/http": "^4.3.0",
-        "@angular/platform-browser": "^4.3.0",
-        "@angular/platform-browser-dynamic": "^4.3.0",
-        "@angular/router": "^4.3.0",
-        "@ngx-translate/core": "^6.0.0",
-        "@ngx-translate/http-loader": "0.0.3",
-        "@webcomponents/custom-elements": "^1.0.0",
-        "clarity-angular": "^0.10.17",
-        "clarity-icons": "^0.10.17",
-        "clarity-ui": "^0.10.17",
-        "core-js": "^2.4.1",
-        "intl": "^1.2.5",
-        "mutationobserver-shim": "^0.3.2",
-        "ngx-cookie": "^1.0.0",
-        "rxjs": "^5.0.1",
-        "ts-helpers": "^1.1.1",
-        "web-animations-js": "^2.2.1",
-        "zone.js": "^0.8.4"
-    }
-}

src/ui_ng/lib/rollup.config.js

@@ -1,70 +0,0 @@
-import resolve from 'rollup-plugin-node-resolve';
-
-export default {
-    entry: 'dist/index.js',
-    dest: 'dist/bundles/harborui.umd.js',
-    sourceMap: false,
-    format: 'umd',
-    moduleName: 'harborui',
-    external: [
-        '@angular/animations',
-        '@angular/core',
-        '@angular/common',
-        '@angular/forms',
-        '@angular/platform-browser',
-        '@angular/http',
-        '@angular/router',
-        'clarity-angular',
-        '@ngx-translate/core',
-        '@ngx-translate/http-loader',
-        'ngx-cookie',
-        'rxjs',
-        'rxjs/Rx',
-        'rxjs/Subject',
-        'rxjs/Observable',
-        'rxjs/add/observable/of',
-        'rxjs/add/operator/toPromise',
-        'rxjs/add/operator/debounceTime',
-        'rxjs/add/operator/distinctUntilChanged'
-    ],
-    globals: {
-        '@angular/core': 'ng.core',
-        '@angular/animations': 'ng.animations',
-        '@angular/common': 'ng.common',
-        '@angular/forms': 'ng.forms',
-        '@angular/http': 'ng.http',
-        '@angular/platform-browser': 'ng.platformBrowser',
-        '@angular/router': 'ng.router',
-        'clarity-angular': 'ng.clarity',
-        'ngx-cookie': 'ngx.cookie',
-        '@ngx-translate/core': 'ngx.translate',
-        '@ngx-translate/http-loader': 'ngx.translate',
-        'rxjs': 'rxjs',
-        'rxjs/Subject': 'rxjs.Subject',
-        'rxjs/Rx': 'Rx',
-        'rxjs/Observable': 'Rx',
-        'rxjs/ReplaySubject': 'Rx',
-        'rxjs/add/operator/map': 'Rx.Observable.prototype',
-        'rxjs/add/operator/mergeMap': 'Rx.Observable.prototype',
-        'rxjs/add/operator/catch': 'Rx.Observable.prototype',
-        'rxjs/add/operator/toPromise': 'Rx.Observable.prototype',
-        'rxjs/add/observable/of': 'Rx.Observable',
-        'rxjs/add/observable/throw': 'Rx.Observable'
-    },
-    onwarn: function(warning) {
-        // Skip certain warnings
-
-        // should intercept ... but doesn't in some rollup versions
-        if (warning.code === 'THIS_IS_UNDEFINED') { return; }
-        // intercepts in some rollup versions
-        if (typeof warning === 'string' && warning.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1) { return; }
-
-        // console.warn everything else
-        console.warn(warning.message);
-    },
-    plugins: [resolve({
-        customResolveOptions: {
-            moduleDirectory: 'node_modules'
-        }
-    })]
-}

src/ui_ng/lib/src/config/registry-config.component.ts

@@ -9,7 +9,7 @@ import {
     isEmptyObject,
     clone
 } from '../utils';
-import { ErrorHandler } from '../error-handler';
+import { ErrorHandler } from '../error-handler/index';
 import {
     SystemSettingsComponent,
     VulnerabilityConfigComponent

src/ui_ng/lib/src/config/vulnerability/vulnerability-config.component.ts

@@ -8,7 +8,7 @@ import {
     SystemInfo,
     SystemInfoService
 } from '../../service/index';
-import { ErrorHandler } from '../../error-handler';
+import { ErrorHandler } from '../../error-handler/index';
 import { toPromise } from '../../utils';
 import { TranslateService } from '@ngx-translate/core';
 import { ClairDBStatus, ClairDetail } from '../../service/interface';

src/ui_ng/lib/src/confirmation-dialog/index.ts

@@ -2,6 +2,11 @@ import { Type } from '@angular/core';
 
 import { ConfirmationDialogComponent } from './confirmation-dialog.component';
 
+export * from "./confirmation-dialog.component";
+export * from "./confirmation-batch-message";
+export * from "./confirmation-message";
+export * from "./confirmation-state-message";
+
 export const CONFIRMATION_DIALOG_DIRECTIVES: Type<any>[] = [
   ConfirmationDialogComponent
 ];

src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.spec.ts

@@ -71,21 +71,21 @@ describe('CreateEditEndpointComponent (inline template)', () => {
     expect(comp).toBeTruthy();
   });
 
-  it('should get endpoint be called', ()=>{
+  it('should get endpoint be called', async(() => {
     fixture.detectChanges();
-    fixture.whenStable().then(()=>{
+    fixture.whenStable().then(() => {
       fixture.detectChanges();
       expect(spy.calls.any()).toBeTruthy();
     });
-  });
+  }));
 
-  it('should get endpoint and open modal', ()=>{
+  it('should get endpoint and open modal', async(() => {
     fixture.detectChanges();
-    fixture.whenStable().then(()=>{
+    fixture.whenStable().then(() => {
       fixture.detectChanges();
       expect(comp.target.name).toEqual('target_01');
     });
-  });
+  }));
 
   it('should endpoint be initialized', () => {
     fixture.detectChanges();

src/ui_ng/lib/src/create-edit-label/create-edit-label.component.spec.ts

@@ -75,11 +75,11 @@ describe('CreateEditLabelComponent (inline template)', () => {
         expect(comp).toBeTruthy();
     });
 
-    it('should get label and open modal', () => {
+    it('should get label and open modal', async(() => {
         fixture.detectChanges();
         fixture.whenStable().then(() => {
             fixture.detectChanges();
             expect(comp.labelModel.name).toEqual('');
         });
-    });
+    }));
 });

src/ui_ng/lib/src/harbor-library.module.ts

@@ -26,7 +26,7 @@ import { CONFIGURATION_DIRECTIVES } from './config/index';
 import { JOB_LOG_VIEWER_DIRECTIVES } from './job-log-viewer/index';
 import { PROJECT_POLICY_CONFIG_DIRECTIVES } from './project-policy-config/index';
 import { HBR_GRIDVIEW_DIRECTIVES } from './gridview/index';
-import { REPOSITORY_GRIDVIEW_DIRECTIVES } from './repository-gridview';
+import { REPOSITORY_GRIDVIEW_DIRECTIVES } from './repository-gridview/index';
 
 import {
   SystemInfoService,
@@ -101,43 +101,43 @@ export const DefaultServiceConfig: IServiceConfig = {
  * @interface HarborModuleConfig
  */
 export interface HarborModuleConfig {
-  //Service endpoints
+  // Service endpoints
   config?: Provider,
 
-  //Handling error messages
+  // Handling error messages
   errorHandler?: Provider,
 
-  //Service implementation for system info
+  // Service implementation for system info
   systemInfoService?: Provider,
 
-  //Service implementation for log
+  // Service implementation for log
   logService?: Provider,
 
-  //Service implementation for endpoint
+  // Service implementation for endpoint
   endpointService?: Provider,
 
-  //Service implementation for replication
+  // Service implementation for replication
   replicationService?: Provider,
 
-  //Service implementation for repository
+  // Service implementation for repository
   repositoryService?: Provider,
 
-  //Service implementation for tag
+  // Service implementation for tag
   tagService?: Provider,
 
-  //Service implementation for vulnerability scanning
+  // Service implementation for vulnerability scanning
   scanningService?: Provider,
 
-  //Service implementation for configuration
+  // Service implementation for configuration
   configService?: Provider,
 
-  //Service implementation for job log
+  // Service implementation for job log
   jobLogService?: Provider,
 
-  //Service implementation for project policy
+  // Service implementation for project policy
   projectPolicyService?: Provider,
 
-  //Service implementation for label
+  // Service implementation for label
   labelService?: Provider,
 }
 

src/ui_ng/lib/src/index.ts

@@ -22,6 +22,6 @@ export * from './job-log-viewer/index';
 export * from './channel/index';
 export * from './project-policy-config/index';
 export * from './label/index';
-export * from './create-edit-label';
+export * from './create-edit-label/index';
 export * from './gridview/index';
 export * from './repository-gridview/index';

src/ui_ng/lib/src/list-replication-rule/index.ts

@@ -2,6 +2,8 @@ import { Type } from '@angular/core';
 
 import { ListReplicationRuleComponent } from './list-replication-rule.component';
 
+export * from './list-replication-rule.component';
+
 export const LIST_REPLICATION_RULE_DIRECTIVES: Type<any>[] = [
   ListReplicationRuleComponent
 ];

src/ui_ng/lib/src/replication/replication.component.spec.ts

@@ -21,7 +21,7 @@ import { EndpointService, EndpointDefaultService } from '../service/endpoint.ser
 import { JobLogViewerComponent } from '../job-log-viewer/job-log-viewer.component';
 import { JobLogService, JobLogDefaultService, ReplicationJobItem } from '../service/index';
 import {Project} from "../project-policy-config/project";
-import {ProjectDefaultService, ProjectService} from "service/project.service";
+import {ProjectDefaultService, ProjectService} from "../service/project.service";
 
 describe('Replication Component (inline template)', () => {
 

src/ui_ng/lib/src/repository-gridview/repository-gridview.component.css

@@ -1,4 +1,3 @@
-export const REPOSITORY_GRIDVIEW_STYLE = `
 .rightPos{
     position: absolute;
     z-index: 100;
@@ -77,4 +76,3 @@ export const REPOSITORY_GRIDVIEW_STYLE = `
     width: 24px;
     margin-right: 12px;
 }
-`;

src/ui_ng/lib/src/repository-gridview/repository-gridview.component.html

@@ -1,4 +1,3 @@
-export const REPOSITORY_GRIDVIEW_TEMPLATE = `
 <div>
     <div class="row" style="position:relative;">
         <div class="toolbar">
@@ -93,4 +92,3 @@ export const REPOSITORY_GRIDVIEW_TEMPLATE = `
     </hbr-gridview>
   <confirmation-dialog #confirmationDialog [batchInfors]="batchDelectionInfos" (confirmAction)="confirmDeletion($event)"></confirmation-dialog>
 </div>
-`;

src/ui_ng/lib/src/repository-gridview/repository-gridview.component.ts

@@ -5,8 +5,6 @@ import {Observable} from "rxjs/Observable";
 import { TranslateService } from '@ngx-translate/core';
 import { Comparator, State } from 'clarity-angular';
 
-import { REPOSITORY_GRIDVIEW_TEMPLATE } from './repository-gridview.component.html';
-import { REPOSITORY_GRIDVIEW_STYLE } from './repository-gridview.component.css';
 import { Repository, SystemInfo, SystemInfoService, RepositoryService, RequestQueryParams, RepositoryItem, TagService } from '../service/index';
 import { ErrorHandler } from '../error-handler/error-handler';
 import { toPromise, CustomComparator , DEFAULT_PAGE_SIZE, calculatePage, doFiltering, doSorting, clone} from '../utils';
@@ -16,13 +14,13 @@ import { ConfirmationMessage } from '../confirmation-dialog/confirmation-message
 import { ConfirmationAcknowledgement } from '../confirmation-dialog/confirmation-state-message';
 import { Tag, CardItemEvent } from '../service/interface';
 import {BatchInfo, BathInfoChanges} from "../confirmation-dialog/confirmation-batch-message";
-import { GridViewComponent } from '../gridview/grid-view.component'
+import { GridViewComponent } from '../gridview/grid-view.component';
 
 
 @Component({
   selector: 'hbr-repository-gridview',
-  template: REPOSITORY_GRIDVIEW_TEMPLATE,
+  templateUrl: './repository-gridview.component.html',
-  styles: [REPOSITORY_GRIDVIEW_STYLE],
+  styleUrls: ['./repository-gridview.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RepositoryGridviewComponent implements OnChanges, OnInit {

src/ui_ng/lib/src/repository/index.ts

@@ -1,6 +1,8 @@
 import { Type } from '@angular/core';
 import { RepositoryComponent } from './repository.component';
 
+export * from "./repository.component";
+
 export const REPOSITORY_DIRECTIVES: Type<any>[] = [
   RepositoryComponent
 ];

src/ui_ng/lib/src/repository/repository.component.ts

@@ -12,23 +12,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Component, OnInit, ViewChild, Input, Output, EventEmitter } from '@angular/core';
-
-import { RepositoryService } from '../service/repository.service';
-
-import { Repository, RepositoryItem, Tag, TagClickEvent,
-  SystemInfo, SystemInfoService, TagService } from '../service/index';
-
 import { TranslateService } from '@ngx-translate/core';
-
-import { ErrorHandler } from '../error-handler/error-handler';
-import { ConfirmationState, ConfirmationTargets } from '../shared/shared.const';
-
-import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component';
-import { ConfirmationMessage } from '../confirmation-dialog/confirmation-message';
-import { ConfirmationAcknowledgement } from '../confirmation-dialog/confirmation-state-message';
-
 import { State } from 'clarity-angular';
 
+import { RepositoryService } from '../service/repository.service';
+import { Repository, RepositoryItem, Tag, TagClickEvent,
+  SystemInfo, SystemInfoService, TagService } from '../service/index';
+import { ErrorHandler } from '../error-handler/index';
+import { ConfirmationState, ConfirmationTargets } from '../shared/shared.const';
+import { ConfirmationDialogComponent, ConfirmationMessage, ConfirmationAcknowledgement } from '../confirmation-dialog/index';
 import { toPromise } from '../utils';
 
 import { REPOSITORY_TEMPLATE } from './repository.component.html';

src/ui_ng/lib/src/shared/shared.module.ts

@@ -4,12 +4,13 @@ import { HttpModule, Http } from '@angular/http';
 import { ClarityModule } from 'clarity-angular';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TranslateModule, TranslateLoader, MissingTranslationHandler } from '@ngx-translate/core';
-import { MyMissingTranslationHandler } from '../i18n/missing-trans.handler';
+import { CookieService, CookieModule } from 'ngx-cookie';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+import { ClipboardModule } from '../third-party/ngx-clipboard/index';
+import { MyMissingTranslationHandler } from '../i18n/missing-trans.handler';
 import { TranslatorJsonLoader } from '../i18n/local-json.loader';
 import { IServiceConfig, SERVICE_CONFIG } from '../service.config';
-import { CookieService, CookieModule } from 'ngx-cookie';
-import { ClipboardModule } from '../third-party/ngx-clipboard/index';
 
 /*export function HttpLoaderFactory(http: Http) {
     return new TranslateHttpLoader(http, 'i18n/lang/', '-lang.json');

src/ui_ng/lib/tsconfig.json

@@ -1,52 +0,0 @@
-{
-    "compilerOptions": {
-        "baseUrl": "",
-        "rootDir": ".",
-        "declaration": true,
-        "stripInternal": true,
-        "emitDecoratorMetadata": true,
-        "experimentalDecorators": true,
-        "strictNullChecks": false,
-        "noImplicitAny": true,
-        "module": "es2015",
-        "moduleResolution": "node",
-        "paths": {
-            "@angular/core": ["node_modules/@angular/core"],
-            "@angular/common": ["node_modules/@angular/common"],
-            "@angular/forms": ["node_modules/@angular/forms"],
-            "@angular/http": ["node_modules/@angular/http"],
-            "clarity-angular": ["node_modules/clarity-angular"],
-            "rxjs/*": ["node_modules/rxjs/*"]
-        },
-        "outDir": "dist",
-        "sourceMap": true,
-        "inlineSources": true,
-        "target": "es5",
-        "skipLibCheck": true,
-        "lib": [
-            "es2015",
-            "es6",
-            "dom"
-        ],
-        "typeRoots": [
-            "node_modules/@types"
-        ],
-        "types": [
-            "jasmine",
-            "core-js",
-            "node"
-        ]
-    },
-    "exclude": [
-        "node_modules",
-        "dist",
-        "test.ts"
-    ],
-    "files": [
-        "index.ts"
-    ],
-    "angularCompilerOptions": {
-        "genDir": "dist",
-        "strictMetadataEmit": true
-    }
-}

src/ui_ng/lib/tslint.json

@@ -1,118 +0,0 @@
-{
-  "rulesDirectory": [
-    "node_modules/codelyzer"
-  ],
-  "rules": {
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space"
-    ],
-    "curly": true,
-    "eofline": false,
-    "forin": false,
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "label-position": true,
-    "label-undefined": true,
-    "max-line-length": false,
-    "member-access": false,
-    "member-ordering": [
-      true,
-      {
-        "order": [
-          "public-static-field",
-          "public-instance-field",
-          "public-constructor",
-          "private-static-field",
-          "private-instance-field",
-          "private-constructor",
-          "public-instance-method",
-          "protected-instance-method",
-          "private-instance-method"
-        ]
-      }
-    ],
-    "no-arg": true,
-    "no-bitwise": true,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-construct": true,
-    "no-debugger": true,
-    "no-duplicate-key": true,
-    "no-duplicate-variable": true,
-    "no-empty": false,
-    "no-eval": true,
-    "no-inferrable-types": true,
-    "no-shadowed-variable": true,
-    "no-string-literal": false,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unused-expression": true,
-    "no-unused-variable": true,
-    "no-unreachable": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
-    "radix": true,
-    "semicolon": [
-      "always"
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "variable-name": false,
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-decl",
-      "check-operator",
-      "check-separator",
-      "check-type"
-    ],
-
-    "directive-selector-prefix": [true, "app"],
-    "component-selector-prefix": [true, "app"],
-    "directive-selector-name": [true, "camelCase"],
-    "component-selector-name": [true, "kebab-case"],
-    "directive-selector-type": [true, "attribute"],
-    "component-selector-type": [true, "element"],
-    "use-input-property-decorator": true,
-    "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
-    "no-input-rename": true,
-    "no-output-rename": true,
-    "use-life-cycle-interface": true,
-    "use-pipe-transform-interface": true,
-    "component-class-suffix": true,
-    "directive-class-suffix": true,
-    "templates-use-public": true,
-    "invoke-injectable": true
-  }
-}

src/ui_ng/lib/typings.json

@@ -1,5 +0,0 @@
-{
-    "globalDependencies": {
-        "es6-shim": "registry:dt/es6-shim#0.31.2+20160602141504"
-    }
-}

src/ui_ng/package.json

@@ -9,7 +9,8 @@
         "test": "ng test --single-run",
         "pree2e": "webdriver-manager update",
         "e2e": "protractor",
-        "build": "ngc -p tsconfig-aot.json"
+        "build": "ngc -p tsconfig-aot.json",
+        "build:lib": "ng-packagr -p ./lib/ng-package.json"
     },
     "private": true,
     "dependencies": {
@@ -30,7 +31,7 @@
         "clarity-icons": "^0.10.27",
         "clarity-ui": "^0.10.27",
         "core-js": "^2.4.1",
-        "harbor-ui": "0.7.18",
+        "harbor-ui": "0.7.18-dev.1",
         "intl": "^1.2.5",
         "mutationobserver-shim": "^0.3.2",
         "ngx-cookie": "^1.0.0",
@@ -42,19 +43,21 @@
     "devDependencies": {
         "@angular/cli": "^1.0.0",
         "@angular/compiler-cli": "^4.3.0",
-        "@types/core-js": "^0.9.34",
+        "@types/core-js": "^0.9.41",
-        "@types/jasmine": "~2.2.30",
+        "@types/jasmine": "~2.5.53",
-        "@types/node": "^6.0.42",
+        "@types/node": "~6.0.60",
         "bootstrap": "4.0.0-alpha.5",
         "codelyzer": "~2.0.0-beta.4",
         "enhanced-resolve": "^3.0.0",
         "jasmine-core": "2.4.1",
         "jasmine-spec-reporter": "2.5.0",
-        "karma": "1.2.0",
+        "karma": "~1.7.0",
+        "karma-chrome-launcher": "~2.1.1",
         "karma-cli": "^1.0.1",
-        "karma-jasmine": "^1.0.2",
+        "karma-jasmine": "~1.1.0",
-        "karma-mocha-reporter": "^2.2.1",
+        "karma-mocha-reporter": "^2.2.4",
         "karma-remap-istanbul": "^0.2.1",
+        "ng-packagr": "^1.7.0",
         "protractor": "4.0.9",
         "rollup": "^0.41.6",
         "rollup-plugin-commonjs": "^8.0.2",
@@ -64,6 +67,7 @@
         "tslint": "^4.1.1",
         "typescript": "~2.2.0",
         "typings": "^1.4.0",
+        "uglify-js": "3.3.18",
         "webdriver-manager": "10.2.5"
     }
 }

src/ui_ng/src/app/repository/tag-repository/tag-repository.component.ts

@@ -13,12 +13,13 @@
 // limitations under the License.
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-// import { RepositoryComponent} from 'harbor-ui';
+import { RepositoryComponent } from 'harbor-ui';
+
 import { AppConfigService } from '../../app-config.service';
 import { SessionService } from '../../shared/session.service';
 import { TagClickEvent } from 'harbor-ui';
 import { Project } from '../../project/project';
-import { RepositoryComponent } from 'harbor-ui/src/repository/repository.component';
+
 
 @Component({
   selector: 'tag-repository',

src/ui_ng/src/test.ts

@@ -38,7 +38,7 @@ getTestBed().initTestEnvironment(
   platformBrowserDynamicTesting()
 );
 // Then we find all the tests.
-let context = require.context('./', true, /\.spec\.ts/);
+let context = require.context('../lib', true, /\.spec\.ts/);
 // And load the modules.
 context.keys().map(context);
 // Finally, start Karma to run the tests.

tests/run-clarity-ut.sh

@@ -7,4 +7,5 @@ cd /harbor_src
 mv /harbor_resources/node_modules ./
 
 npm install -q --no-progress
+npm run build
 npm run test > ./npm-ut-test-results