Fix and update codes for AoT.

src/ui_ng/package.json

@@ -15,14 +15,17 @@
     "@angular/animations": "^4.0.1",
     "@angular/common": "^4.0.1",
     "@angular/compiler": "^4.0.1",
+    "@angular/compiler-cli": "^4.0.2",
     "@angular/core": "^4.0.1",
     "@angular/forms": "^4.0.1",
     "@angular/http": "^4.0.1",
     "@angular/platform-browser": "^4.0.1",
     "@angular/platform-browser-dynamic": "^4.0.1",
+    "@angular/platform-server": "^4.0.2",
     "@angular/router": "^4.0.1",
     "@ngx-translate/core": "^6.0.0",
     "@ngx-translate/http-loader": "0.0.3",
+    "@types/jquery": "^2.0.41",
     "@webcomponents/custom-elements": "1.0.0-alpha.3",
     "angular2-cookie": "^1.2.6",
     "clarity-angular": "^0.9.0",
@@ -30,6 +33,7 @@
     "clarity-ui": "^0.9.0",
     "core-js": "^2.4.1",
     "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",
@@ -53,6 +57,10 @@
     "karma-phantomjs-launcher": "^1.0.0",
     "karma-remap-istanbul": "^0.2.1",
     "protractor": "4.0.9",
+    "rollup": "^0.41.6",
+    "rollup-plugin-commonjs": "^8.0.2",
+    "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-plugin-uglify": "^1.0.1",
     "ts-node": "1.2.1",
     "tslint": "^4.1.1",
     "typescript": "~2.2.0",

src/ui_ng/rollup-config.js

@@ -0,0 +1,28 @@
+import nodeResolve from 'rollup-plugin-node-resolve';
+import commonjs    from 'rollup-plugin-commonjs';
+import uglify      from 'rollup-plugin-uglify';
+
+export default {
+  entry: 'src/main-aot.js',
+  dest: 'src/build.js', // output a single application bundle
+  sourceMap: false,
+  format: 'iife',
+  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: [
+      nodeResolve({jsnext: true, module: true, browser: true}),
+      commonjs({
+        include: ['node_modules/**']
+      }),
+      uglify()
+  ]
+}

src/ui_ng/src/app/account/account-settings/account-settings-modal.component.ts

@@ -31,21 +31,21 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
     account: SessionUser;
     error: any = null;
     originalStaticData: SessionUser;
-    private emailTooltip: string = 'TOOLTIP.EMAIL';
+    emailTooltip: string = 'TOOLTIP.EMAIL';
     private validationStateMap: any = {
         "account_settings_email": true,
         "account_settings_full_name": true
     };
-    private mailAlreadyChecked = {};
+    mailAlreadyChecked = {};
 
-    private isOnCalling: boolean = false;
+    isOnCalling: boolean = false;
-    private formValueChanged: boolean = false;
+    formValueChanged: boolean = false;
-    private checkOnGoing: boolean = false;
+    checkOnGoing: boolean = false;
 
     accountFormRef: NgForm;
     @ViewChild("accountSettingsFrom") accountForm: NgForm;
     @ViewChild(InlineAlertComponent)
-    private inlineAlert: InlineAlertComponent;
+    inlineAlert: InlineAlertComponent;
 
     constructor(
         private session: SessionService,
@@ -56,11 +56,11 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
         this.account = Object.assign({}, this.session.getCurrentUser());
     }
 
-    private getValidationState(key: string): boolean {
+    getValidationState(key: string): boolean {
         return this.validationStateMap[key];
     }
 
-    private handleValidation(key: string, flag: boolean): void {
+    handleValidation(key: string, flag: boolean): void {
         if (flag) {
             //Checking
             let cont = this.accountForm.controls[key];
@@ -104,7 +104,7 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
         }
     }
 
-    private isUserDataChange(): boolean {
+    isUserDataChange(): boolean {
         if (!this.originalStaticData || !this.account) {
             return false;
         }
@@ -215,7 +215,7 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
             });
     }
 
-    confirmCancel(): void {
+    confirmCancel($event: any): void {
         this.inlineAlert.close();
         this.opened = false;
     }

src/ui_ng/src/app/account/password/forgot-password.component.ts

@@ -25,14 +25,14 @@ import { InlineAlertComponent } from '../../shared/inline-alert/inline-alert.com
 })
 export class ForgotPasswordComponent {
     opened: boolean = false;
-    private onGoing: boolean = false;
+    onGoing: boolean = false;
-    private email: string = "";
+    email: string = "";
-    private validationState: boolean = true;
+    validationState: boolean = true;
-    private isSuccess: boolean = false;
+    isSuccess: boolean = false;
 
     @ViewChild("forgotPasswordFrom") forgotPwdForm: NgForm;
     @ViewChild(InlineAlertComponent)
-    private inlineAlert: InlineAlertComponent;
+    inlineAlert: InlineAlertComponent;
 
     constructor(private pwdService: PasswordSettingService) { }
 

src/ui_ng/src/app/account/password/password-setting.component.ts

@@ -33,8 +33,8 @@ export class PasswordSettingComponent implements AfterViewChecked {
     reNewPwd: string = "";
     error: any = null;
 
-    private formValueChanged: boolean = false;
+    formValueChanged: boolean = false;
-    private onCalling: boolean = false;
+    onCalling: boolean = false;
     private validationStateMap: any = {
         "newPassword": true,
         "reNewPassword": true
@@ -43,7 +43,7 @@ export class PasswordSettingComponent implements AfterViewChecked {
     pwdFormRef: NgForm;
     @ViewChild("changepwdForm") pwdForm: NgForm;
     @ViewChild(InlineAlertComponent)
-    private inlineAlert: InlineAlertComponent;
+    inlineAlert: InlineAlertComponent;
 
     constructor(
         private passwordService: PasswordSettingService,
@@ -68,11 +68,11 @@ export class PasswordSettingComponent implements AfterViewChecked {
         return this.onCalling;
     }
 
-    private getValidationState(key: string): boolean {
+    getValidationState(key: string): boolean {
         return this.validationStateMap[key];
     }
 
-    private handleValidation(key: string, flag: boolean): void {
+    handleValidation(key: string, flag: boolean): void {
         if (flag) {
             //Checking
             let cont = this.pwdForm.controls[key];
@@ -139,7 +139,7 @@ export class PasswordSettingComponent implements AfterViewChecked {
         }
     }
 
-    confirmCancel(): void {
+    confirmCancel($event: any): void {
         this.opened = false;
     }
 

src/ui_ng/src/app/account/password/password-setting.service.ts

@@ -23,11 +23,11 @@ const resetPasswordEndpoint = "/reset";
 
 @Injectable()
 export class PasswordSettingService {
-    private headers: Headers = new Headers({
+    headers: Headers = new Headers({
         "Accept": 'application/json',
         "Content-Type": 'application/json'
     });
-    private options: RequestOptions = new RequestOptions({
+    options: RequestOptions = new RequestOptions({
         'headers': this.headers
     });
 

src/ui_ng/src/app/account/password/reset-password.component.ts

@@ -27,19 +27,19 @@ import { CommonRoutes } from '../../shared/shared.const';
 })
 export class ResetPasswordComponent implements OnInit {
     opened: boolean = true;
-    private onGoing: boolean = false;
+    onGoing: boolean = false;
-    private password: string = "";
+    password: string = "";
     private validationState: any = {
         "newPassword": true,
         "reNewPassword": true
     };
-    private resetUuid: string = "";
+    resetUuid: string = "";
-    private resetOk: boolean = false;
+    resetOk: boolean = false;
     confirmPwd: string = "";
 
     @ViewChild("resetPwdForm") resetPwdForm: NgForm;
     @ViewChild(InlineAlertComponent)
-    private inlineAlert: InlineAlertComponent;
+    inlineAlert: InlineAlertComponent;
 
     constructor(
         private pwdService: PasswordSettingService,
@@ -131,7 +131,7 @@ export class ResetPasswordComponent implements OnInit {
         }
     }
 
-    private getControlValidationState(key: string): boolean {
+    getControlValidationState(key: string): boolean {
         if (this.resetPwdForm) {
             let control = this.resetPwdForm.controls[key];
             if (control) {
@@ -142,7 +142,7 @@ export class ResetPasswordComponent implements OnInit {
         return false;
     }
 
-    private samePassword(): boolean {
+    samePassword(): boolean {
         if (this.resetPwdForm) {
             let control1 = this.resetPwdForm.controls["newPassword"];
             let control2 = this.resetPwdForm.controls["reNewPassword"];

src/ui_ng/src/app/account/sign-in/sign-in.component.ts

@@ -27,7 +27,7 @@ import { AppConfigService } from '../../app-config.service';
 import { AppConfig } from '../../app-config';
 import { User } from '../../user/user';
 
-import { CookieService, CookieOptions } from 'angular2-cookie/core';
+import { CookieService, CookieOptions } from 'ngx-cookie';
 
 //Define status flags for signing in states
 export const signInStatusNormal = 0;
@@ -43,11 +43,11 @@ const expireDays = 10;
 })
 
 export class SignInComponent implements AfterViewChecked, OnInit {
-    private redirectUrl: string = "";
+    redirectUrl: string = "";
-    private appConfig: AppConfig = new AppConfig();
+    appConfig: AppConfig = new AppConfig();
     //Remeber me indicator
-    private rememberMe: boolean = false;
+    rememberMe: boolean = false;
-    private rememberedName: string = "";
+    rememberedName: string = "";
     //Form reference
     signInForm: NgForm;
     @ViewChild('signInForm') currentForm: NgForm;
@@ -126,7 +126,7 @@ export class SignInComponent implements AfterViewChecked, OnInit {
         return this.appConfig.auth_mode != 'ldap_auth';
     }
 
-    private clickRememberMe($event): void {
+    clickRememberMe($event: any): void {
         if ($event && $event.target) {
             this.rememberMe = $event.target.checked;
             if (!this.rememberMe) {
@@ -137,23 +137,23 @@ export class SignInComponent implements AfterViewChecked, OnInit {
         }
     }
 
-    private remeberMe(): void {
+    remeberMe(): void {
         if (this.rememberMe) {
             if (this.rememberedName != this.signInCredential.principal) {
                 //Set expire time
                 let expires: number = expireDays * 3600 * 24 * 1000;
                 let date = new Date(Date.now() + expires);
-                let cookieptions = new CookieOptions({
+                let cookieptions: CookieOptions = {
                     path: "/",
                     expires: date
-                });
+                };
                 this.cookie.put(remCookieKey, this.signInCredential.principal, cookieptions);
             }
         }
     }
 
     //General error handler
-    private handleError(error) {
+    handleError(error: any) {
         //Set error status
         this.signInStatus = signInStatusError;
 
@@ -162,7 +162,7 @@ export class SignInComponent implements AfterViewChecked, OnInit {
     }
 
     //Hande form values changes
-    private formChanged() {
+    formChanged() {
         if (this.currentForm === this.signInForm) {
             return;
         }
@@ -177,7 +177,7 @@ export class SignInComponent implements AfterViewChecked, OnInit {
     }
 
     //Fill the new user info into the sign in form
-    private handleUserCreation(user: User): void {
+    handleUserCreation(user: User): void {
         if (user) {
             this.currentForm.setValue({
                 "login_username": user.username,

src/ui_ng/src/app/account/sign-in/sign-in.service.ts

@@ -27,14 +27,14 @@ const signInUrl = '/login';
  */
 @Injectable()
 export class SignInService {
-    private headers = new Headers({
+    headers = new Headers({
         "Content-Type": 'application/x-www-form-urlencoded'
     });
 
     constructor(private http: Http) {}
 
     //Handle the related exceptions
-    private handleError(error: any): Promise<any>{
+    handleError(error: any): Promise<any>{
         return Promise.reject(error.message || error);
     }
 

src/ui_ng/src/app/account/sign-up/sign-up-page.component.ts

@@ -29,9 +29,9 @@ import { MessageService } from '../../global-message/message.service';
     templateUrl: "sign-up-page.component.html"
 })
 export class SignUpPageComponent implements OnInit {
-    private error: any;
+    error: any;
-    private onGoing: boolean = false;
+    onGoing: boolean = false;
-    private formValueChanged: boolean = false;
+    formValueChanged: boolean = false;
 
     constructor(
         private userService: UserService,
@@ -39,9 +39,9 @@ export class SignUpPageComponent implements OnInit {
         private router: Router) { }
 
     @ViewChild(NewUserFormComponent)
-    private newUserForm: NewUserFormComponent;
+    newUserForm: NewUserFormComponent;
 
-    private getNewUser(): User {
+    getNewUser(): User {
         return this.newUserForm.getData();
     }
 

src/ui_ng/src/app/account/sign-up/sign-up.component.ts

@@ -30,9 +30,9 @@ import { Modal } from 'clarity-angular';
 export class SignUpComponent {
     opened: boolean = false;
     staticBackdrop: boolean = true;
-    private error: any;
+    error: any;
-    private onGoing: boolean = false;
+    onGoing: boolean = false;
-    private formValueChanged: boolean = false;
+    formValueChanged: boolean = false;
 
     @Output() userCreation = new EventEmitter<User>();
 
@@ -41,15 +41,15 @@ export class SignUpComponent {
         private userService: UserService) { }
 
     @ViewChild(NewUserFormComponent)
-    private newUserForm: NewUserFormComponent;
+    newUserForm: NewUserFormComponent;
 
     @ViewChild(InlineAlertComponent)
-    private inlienAlert: InlineAlertComponent;
+    inlienAlert: InlineAlertComponent;
 
     @ViewChild(Modal)
-    private modal: Modal;
+    modal: Modal;
 
-    private getNewUser(): User {
+    getNewUser(): User {
         return this.newUserForm.getData();
     }
 
@@ -97,7 +97,7 @@ export class SignUpComponent {
         }
     }
 
-    confirmCancel(): void {
+    confirmCancel($event: any): void {
         this.opened = false;
         this.modal.close();
     }

src/ui_ng/src/app/app-config.service.ts

@@ -16,7 +16,7 @@ import { Headers, Http, RequestOptions } from '@angular/http';
 import 'rxjs/add/operator/toPromise';
 
 import { AppConfig } from './app-config';
-import { CookieService } from 'angular2-cookie/core';
+import { CookieService } from 'ngx-cookie';
 import { CookieKeyOfAdmiral, HarborQueryParamKey } from './shared/shared.const';
 import { maintainUrlQueryParmas } from './shared/shared.utils';
 
@@ -30,15 +30,15 @@ export const systemInfoEndpoint = "/api/systeminfo";
  */
 @Injectable()
 export class AppConfigService {
-    private headers = new Headers({
+    headers = new Headers({
         "Content-Type": 'application/json'
     });
-    private options = new RequestOptions({
+    options = new RequestOptions({
         headers: this.headers
     });
 
     //Store the application configuration
-    private configurations: AppConfig = new AppConfig();
+    configurations: AppConfig = new AppConfig();
 
     constructor(
         private http: Http,

src/ui_ng/src/app/app.component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 import { Component, ReflectiveInjector, LOCALE_ID } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { CookieService } from 'angular2-cookie/core';
+import { CookieService } from 'ngx-cookie';
 
 import { supportedLangs, enLang } from './shared/shared.const';
 import { SessionService } from './shared/session.service';
@@ -56,7 +56,7 @@ export class AppComponent {
         });
     }
 
-    private isLangMatch(browserLang: string, supportedLangs: string[]) {
+    isLangMatch(browserLang: string, supportedLangs: string[]) {
         if (supportedLangs && supportedLangs.length > 0) {
             return supportedLangs.find(lang => lang === browserLang);
         }

src/ui_ng/src/app/base/global-search/global-search.component.ts

@@ -32,15 +32,15 @@ const deBounceTime = 500; //ms
 })
 export class GlobalSearchComponent implements OnInit, OnDestroy {
     //Keep search term as Subject
-    private searchTerms = new Subject<string>();
+    searchTerms = new Subject<string>();
 
     //Keep subscription for future use
-    private searchSub: Subscription;
+    searchSub: Subscription;
-    private closeSub: Subscription;
+    closeSub: Subscription;
 
     //To indicate if the result panel is opened
-    private isResPanelOpened: boolean = false;
+    isResPanelOpened: boolean = false;
-    private searchTerm: string = "";
+    searchTerm: string = "";
 
     //Placeholder text
     placeholderText: string = "GLOBAL_SEARCH.PLACEHOLDER";

src/ui_ng/src/app/base/global-search/global-search.service.ts

@@ -27,10 +27,10 @@ const searchEndpoint = "/api/search";
  */
 @Injectable()
 export class GlobalSearchService {
-    private headers = new Headers({
+    headers = new Headers({
         "Content-Type": 'application/json'
     });
-    private options = new RequestOptions({
+    options = new RequestOptions({
         headers: this.headers
     });
 

src/ui_ng/src/app/base/global-search/search-result.component.ts

@@ -30,22 +30,22 @@ import { MessageHandlerService } from '../../shared/message-handler/message-hand
 })
 
 export class SearchResultComponent implements OnInit, OnDestroy {
-    private searchResults: SearchResults = new SearchResults();
+    searchResults: SearchResults = new SearchResults();
-    private originalCopy: SearchResults;
+    originalCopy: SearchResults;
 
-    private currentTerm: string = "";
+    currentTerm: string = "";
 
     //Open or close
-    private stateIndicator: boolean = false;
+    stateIndicator: boolean = false;
     //Search in progress
-    private onGoing: boolean = false;
+    onGoing: boolean = false;
 
     //Whether or not mouse point is onto the close indicator
-    private mouseOn: boolean = false;
+    mouseOn: boolean = false;
 
     //Watch message channel
-    private searchSub: Subscription;
+    searchSub: Subscription;
-    private closeSearchSub: Subscription;
+    closeSearchSub: Subscription;
 
     constructor(
         private search: GlobalSearchService,
@@ -71,7 +71,7 @@ export class SearchResultComponent implements OnInit, OnDestroy {
         }
     }
 
-    private clone(src: SearchResults): SearchResults {
+    clone(src: SearchResults): SearchResults {
         let res: SearchResults = new SearchResults();
 
         if (src) {

src/ui_ng/src/app/base/global-search/search-trigger.service.ts

@@ -18,9 +18,9 @@ import { AlertType } from '../../shared/shared.const';
 @Injectable()
 export class SearchTriggerService {
 
-  private searchTriggerSource = new Subject<string>();
+  searchTriggerSource = new Subject<string>();
-  private searchCloseSource = new Subject<boolean>();
+  searchCloseSource = new Subject<boolean>();
-  private searchClearSource = new Subject<boolean>();
+  searchClearSource = new Subject<boolean>();
 
   searchTriggerChan$ = this.searchTriggerSource.asObservable();
   searchCloseChan$ = this.searchCloseSource.asObservable();
@@ -37,7 +37,7 @@ export class SearchTriggerService {
   }
 
   //Clear search term
-  clear(event): void {
+  clear(event: any): void {
     this.searchClearSource.next(event);
   }
 

src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.ts

@@ -39,23 +39,23 @@ import { CommonRoutes } from '../../shared/shared.const';
 export class HarborShellComponent implements OnInit, OnDestroy {
 
     @ViewChild(AccountSettingsModalComponent)
-    private accountSettingsModal: AccountSettingsModalComponent;
+    accountSettingsModal: AccountSettingsModalComponent;
 
     @ViewChild(PasswordSettingComponent)
-    private pwdSetting: PasswordSettingComponent;
+    pwdSetting: PasswordSettingComponent;
 
     @ViewChild(NavigatorComponent)
-    private navigator: NavigatorComponent;
+    navigator: NavigatorComponent;
 
     @ViewChild(AboutDialogComponent)
-    private aboutDialog: AboutDialogComponent;
+    aboutDialog: AboutDialogComponent;
 
     //To indicator whwther or not the search results page is displayed
     //We need to use this property to do some overriding work
-    private isSearchResultsOpened: boolean = false;
+    isSearchResultsOpened: boolean = false;
 
-    private searchSub: Subscription;
+    searchSub: Subscription;
-    private searchCloseSub: Subscription;
+    searchCloseSub: Subscription;
 
     constructor(
         private route: ActivatedRoute,

src/ui_ng/src/app/base/navigator/navigator.component.ts

@@ -20,7 +20,7 @@ import { modalEvents } from '../modal-events.const';
 
 import { SessionUser } from '../../shared/session-user';
 import { SessionService } from '../../shared/session.service';
-import { CookieService, CookieOptions } from 'angular2-cookie/core';
+import { CookieService, CookieOptions } from 'ngx-cookie';
 
 import { supportedLangs, enLang, languageNames, CommonRoutes } from '../../shared/shared.const';
 import { AppConfigService } from '../../app-config.service';
@@ -38,8 +38,8 @@ export class NavigatorComponent implements OnInit {
     @Output() showAccountSettingsModal = new EventEmitter<ModalEvent>();
     @Output() showPwdChangeModal = new EventEmitter<ModalEvent>();
 
-    private selectedLang: string = enLang;
+    selectedLang: string = enLang;
-    private appTitle: string = 'APP_TITLE.HARBOR';
+    appTitle: string = 'APP_TITLE.HARBOR';
 
     constructor(
         private session: SessionService,
@@ -54,10 +54,10 @@ export class NavigatorComponent implements OnInit {
 
     ngOnInit(): void {
         this.selectedLang = this.translate.currentLang;
-        this.translate.onLangChange.subscribe(langChange => {
+        this.translate.onLangChange.subscribe((langChange: {lang: string}) => {
             this.selectedLang = langChange.lang;
             //Keep in cookie for next use
-            let opt = new CookieOptions({path: '/', expires: new Date(Date.now() + 3600*1000*24*31)});
+            let opt:CookieOptions = {path: '/', expires: new Date(Date.now() + 3600*1000*24*31)};
             this.cookie.put("harbor-lang", langChange.lang, opt);
         });
         if (this.appConfigService.isIntegrationMode()) {

src/ui_ng/src/app/base/start-page/start.component.ts

@@ -22,7 +22,7 @@ import { SessionUser } from '../../shared/session-user';
     styleUrls: ['start.component.css']
 })
 export class StartPageComponent implements OnInit{
-    private isSessionValid: boolean = false;
+    isSessionValid: boolean = false;
 
     constructor(
         private session: SessionService

src/ui_ng/src/app/config/auth/config-auth.component.ts

@@ -23,7 +23,7 @@ import { Configuration } from '../config';
     styleUrls: ['../config.component.css']
 })
 export class ConfigurationAuthComponent {
-    private changeSub: Subscription;
+    changeSub: Subscription;
     @Input("ldapConfig") currentConfig: Configuration = new Configuration();
 
     @ViewChild("authConfigFrom") authForm: NgForm;
@@ -44,7 +44,7 @@ export class ConfigurationAuthComponent {
         }
     }
 
-    private disabled(prop: any): boolean {
+    disabled(prop: any): boolean {
         return !(prop && prop.editable);
     }
 
@@ -52,7 +52,7 @@ export class ConfigurationAuthComponent {
         return this.authForm && this.authForm.valid;
     }
 
-    private handleOnChange($event): void {
+    handleOnChange($event: any): void {
         if ($event && $event.target && $event.target["value"]) {
             let authMode = $event.target["value"];
             if (authMode === 'ldap_auth') {

src/ui_ng/src/app/config/config.component.ts

@@ -44,13 +44,13 @@ const TabLinkContentMap = {
     styleUrls: ['config.component.css']
 })
 export class ConfigurationComponent implements OnInit, OnDestroy {
-    private onGoing: boolean = false;
+    onGoing: boolean = false;
     allConfig: Configuration = new Configuration();
-    private currentTabId: string = "config-auth";//default tab
+    currentTabId: string = "config-auth";//default tab
-    private originalCopy: Configuration;
+    originalCopy: Configuration;
-    private confirmSub: Subscription;
+    confirmSub: Subscription;
-    private testingMailOnGoing: boolean = false;
+    testingMailOnGoing: boolean = false;
-    private testingLDAPOnGoing: boolean = false;
+    testingLDAPOnGoing: boolean = false;
 
     @ViewChild("repoConfigFrom") repoConfigForm: NgForm;
     @ViewChild("systemConfigFrom") systemConfigForm: NgForm;
@@ -64,15 +64,15 @@ export class ConfigurationComponent implements OnInit, OnDestroy {
         private appConfigService: AppConfigService,
         private session: SessionService) { }
 
-    private isCurrentTabLink(tabId: string): boolean {
+    isCurrentTabLink(tabId: string): boolean {
         return this.currentTabId === tabId;
     }
 
-    private isCurrentTabContent(contentId: string): boolean {
+    isCurrentTabContent(contentId: string): boolean {
         return TabLinkContentMap[this.currentTabId] === contentId;
     }
 
-    private hasUnsavedChangesOfCurrentTab(): any {
+    hasUnsavedChangesOfCurrentTab(): any {
         let allChanges = this.getChanges();
         if (this.isEmpty(allChanges)) {
             return null;
@@ -331,7 +331,7 @@ export class ConfigurationComponent implements OnInit, OnDestroy {
             });
     }
 
-    private confirmUnsavedChanges(changes: any) {
+    confirmUnsavedChanges(changes: any) {
         let msg = new ConfirmationMessage(
             "CONFIG.CONFIRM_TITLE",
             "CONFIG.CONFIRM_SUMMARY",
@@ -343,7 +343,7 @@ export class ConfigurationComponent implements OnInit, OnDestroy {
         this.confirmService.openComfirmDialog(msg);
     }
 
-    private confirmUnsavedTabChanges(changes: any, tabId: string) {
+    confirmUnsavedTabChanges(changes: any, tabId: string) {
         let msg = new ConfirmationMessage(
             "CONFIG.CONFIRM_TITLE",
             "CONFIG.CONFIRM_SUMMARY",
@@ -358,7 +358,7 @@ export class ConfigurationComponent implements OnInit, OnDestroy {
         this.confirmService.openComfirmDialog(msg);
     }
 
-    private retrieveConfig(): void {
+    retrieveConfig(): void {
         this.onGoing = true;
         this.configService.getConfiguration()
             .then(configurations => {
@@ -387,7 +387,7 @@ export class ConfigurationComponent implements OnInit, OnDestroy {
      * 
      * @memberOf ConfigurationComponent
      */
-    private getChanges(): any {
+    getChanges(): any {
         let changes = {};
         if (!this.allConfig || !this.originalCopy) {
             return changes;
@@ -419,7 +419,7 @@ export class ConfigurationComponent implements OnInit, OnDestroy {
      * 
      * @memberOf ConfigurationComponent
      */
-    private clone(src: Configuration): Configuration {
+    clone(src: Configuration): Configuration {
         let dest = new Configuration();
         if (!src) {
             return dest;//Empty
@@ -443,7 +443,7 @@ export class ConfigurationComponent implements OnInit, OnDestroy {
      * 
      * @memberOf ConfigurationComponent
      */
-    private reset(changes: any): void {
+    reset(changes: any): void {
         if (!this.isEmpty(changes)) {
             for (let prop in changes) {
                 if (this.originalCopy[prop]) {
@@ -456,7 +456,7 @@ export class ConfigurationComponent implements OnInit, OnDestroy {
         }
     }
 
-    private isEmpty(obj) {
+    isEmpty(obj: any) {
         for (let key in obj) {
             if (obj.hasOwnProperty(key))
                 return false;
@@ -464,7 +464,7 @@ export class ConfigurationComponent implements OnInit, OnDestroy {
         return true;
     }
 
-    private disabled(prop: any): boolean {
+    disabled(prop: any): boolean {
         return !(prop && prop.editable);
     }
 }

src/ui_ng/src/app/config/config.service.ts

@@ -23,11 +23,11 @@ const ldapEndpoint = "/api/ldap/ping";
 
 @Injectable()
 export class ConfigurationService {
-    private headers: Headers = new Headers({
+    headers: Headers = new Headers({
         "Accept": 'application/json',
         "Content-Type": 'application/json'
     });
-    private options: RequestOptions = new RequestOptions({
+    options: RequestOptions = new RequestOptions({
         'headers': this.headers
     });
 

src/ui_ng/src/app/config/email/config-email.component.ts

@@ -28,7 +28,7 @@ export class ConfigurationEmailComponent {
 
     constructor() { }
 
-    private disabled(prop: any): boolean {
+    disabled(prop: any): boolean {
         return !(prop && prop.editable);
     }
 

src/ui_ng/src/app/core/core.module.ts

@@ -17,6 +17,7 @@ import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ClarityModule } from 'clarity-angular';
+import { CookieModule } from 'ngx-cookie';
 
 @NgModule({
   imports: [
@@ -24,6 +25,7 @@ import { ClarityModule } from 'clarity-angular';
       FormsModule,
       HttpModule,
       ClarityModule.forRoot(),
+      CookieModule.forRoot(),
       BrowserAnimationsModule
   ],
   exports: [

src/ui_ng/src/app/global-message/message.component.ts

@@ -31,11 +31,11 @@ export class MessageComponent implements OnInit, OnDestroy {
   globalMessage: Message = new Message();
   globalMessageOpened: boolean;
   messageText: string = "";
-  private timer: any = null;
+  timer: any = null;
 
-  private appLevelMsgSub: Subscription;
+  appLevelMsgSub: Subscription;
-  private msgSub: Subscription;
+  msgSub: Subscription;
-  private clearSub: Subscription;
+  clearSub: Subscription;
 
   constructor(
     private messageService: MessageService,

src/ui_ng/src/app/global-message/message.service.ts

@@ -19,9 +19,9 @@ import { AlertType } from '../shared/shared.const';
 @Injectable()
 export class MessageService {
 
-  private messageAnnouncedSource = new Subject<Message>();
+  messageAnnouncedSource = new Subject<Message>();
-  private appLevelAnnouncedSource = new Subject<Message>();
+  appLevelAnnouncedSource = new Subject<Message>();
-  private clearSource = new Subject<boolean>();
+  clearSource = new Subject<boolean>();
 
   messageAnnounced$ = this.messageAnnouncedSource.asObservable();
   appLevelAnnounced$ = this.appLevelAnnouncedSource.asObservable();

src/ui_ng/src/app/log/audit-log.service.ts

@@ -25,7 +25,7 @@ export const logEndpoint = "/api/logs";
 
 @Injectable()
 export class AuditLogService {
-  private httpOptions = new RequestOptions({
+  httpOptions = new RequestOptions({
     headers: new Headers({
       "Content-Type": 'application/json',
       "Accept": 'application/json'

src/ui_ng/src/app/log/recent-log.component.ts

@@ -30,11 +30,11 @@ import { errorHandler, accessErrorHandler } from '../shared/shared.utils';
 })
 
 export class RecentLogComponent implements OnInit {
-    private sessionUser: SessionUser = null;
+    sessionUser: SessionUser = null;
-    private recentLogs: AuditLog[];
+    recentLogs: AuditLog[];
-    private logsCache: AuditLog[];
+    logsCache: AuditLog[];
-    private onGoing: boolean = false;
+    onGoing: boolean = false;
-    private lines: number = 10; //Support 10, 25 and 50
+    lines: number = 10; //Support 10, 25 and 50
     currentTerm: string;
 
     constructor(
@@ -48,7 +48,7 @@ export class RecentLogComponent implements OnInit {
         this.retrieveLogs();
     }
 
-    private handleOnchange($event: any) {
+    handleOnchange($event: any) {
         this.currentTerm = '';
         if ($event && $event.target && $event.target["value"]) {
             this.lines = $event.target["value"];
@@ -80,7 +80,7 @@ export class RecentLogComponent implements OnInit {
         this.retrieveLogs();
     }
 
-    private retrieveLogs(): void {
+    retrieveLogs(): void {
         if (this.lines < 10) {
             this.lines = 10;
         }
@@ -102,7 +102,7 @@ export class RecentLogComponent implements OnInit {
             );
     }
 
-    private isMatched(terms: string, log: AuditLog): boolean {
+    isMatched(terms: string, log: AuditLog): boolean {
         let reg = new RegExp('.*' + terms + '.*', 'i');
         return reg.test(log.username) ||
             reg.test(log.repo_name) ||

src/ui_ng/src/app/project/create-project/create-project.component.ts

@@ -47,7 +47,7 @@ export class CreateProjectComponent implements AfterViewChecked {
 
   @Output() create = new EventEmitter<boolean>();
   @ViewChild(InlineAlertComponent)
-  private inlineAlert: InlineAlertComponent;
+  inlineAlert: InlineAlertComponent;
 
   constructor(private projectService: ProjectService,             
               private translateService: TranslateService,

src/ui_ng/src/app/project/list-project/list-project.component.html

@@ -17,7 +17,7 @@
         <clr-dg-cell>{{p.creation_time | date: 'short'}}</clr-dg-cell>
     </clr-dg-row>
     <clr-dg-footer>
-        {{totalRecordCount || (projects ? projects.length : 0)}} {{'PROJECT.ITEMS' | translate}}
+        {{(projects ? projects.length : 0)}} {{'PROJECT.ITEMS' | translate}}
         <clr-dg-pagination [clrDgPageSize]="15"></clr-dg-pagination>
     </clr-dg-footer>
 </clr-datagrid>

src/ui_ng/src/app/project/member/member.component.ts

@@ -49,7 +49,7 @@ export class MemberComponent implements OnInit, OnDestroy {
   members: Member[];
   projectId: number;
   roleInfo = RoleInfo;
-  private delSub: Subscription;
+  delSub: Subscription;
 
   @ViewChild(AddMemberComponent)
   addMemberComponent: AddMemberComponent;
@@ -124,7 +124,7 @@ export class MemberComponent implements OnInit, OnDestroy {
     this.addMemberComponent.openAddMemberModal();
   }
 
-  addedMember() {
+  addedMember($event: any) {
     this.searchMember = '';
     this.retrieve(this.projectId, '');
   }
@@ -154,7 +154,7 @@ export class MemberComponent implements OnInit, OnDestroy {
     this.deletionDialogService.openComfirmDialog(deletionMessage);
   }
 
-  doSearch(searchMember) {
+  doSearch(searchMember: string) {
     this.searchMember = searchMember;
     this.retrieve(this.projectId, this.searchMember);
   }

src/ui_ng/src/app/replication/destination/destination.component.ts

@@ -57,7 +57,7 @@ export class DestinationComponent implements OnInit {
           .subscribe(
           response => {
             this.messageHandlerService.showSuccess('DESTINATION.DELETED_SUCCESS');
-            this.reload();
+            this.reload('');
           },
           error => { 
             if(error && error.status === 412) {
@@ -105,7 +105,7 @@ export class DestinationComponent implements OnInit {
     this.retrieve('');
   }
 
-  reload() {
+  reload($event: any) {
     this.targetName = '';
     this.retrieve('');
   }

src/ui_ng/src/app/repository/list-repository/list-repository.component.html

@@ -11,7 +11,7 @@
      <clr-dg-cell>{{r.pull_count}}</clr-dg-cell>
   </clr-dg-row>
   <clr-dg-footer>
-    {{totalRecordCount || (repositories ? repositories.length : 0)}} {{'REPOSITORY.ITEMS' | translate}}
+    {{(repositories ? repositories.length : 0)}} {{'REPOSITORY.ITEMS' | translate}}
     <clr-dg-pagination [clrDgPageSize]="15"></clr-dg-pagination>
   </clr-dg-footer>
 </clr-datagrid>

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

@@ -59,7 +59,7 @@ export class TagRepositoryComponent implements OnInit, OnDestroy {
 
   selectAll: boolean = false;
 
-  private subscription: Subscription;
+  subscription: Subscription;
 
   constructor(
     private route: ActivatedRoute,
@@ -133,7 +133,7 @@ export class TagRepositoryComponent implements OnInit, OnDestroy {
     }
   }
 
-  private listTags(tags: Tag[]): void {
+  listTags(tags: Tag[]): void {
     tags.forEach(t => {
       let tag = new TagView();
       tag.tag = t.tag;
@@ -190,7 +190,7 @@ export class TagRepositoryComponent implements OnInit, OnDestroy {
       this.showTagManifestOpened = true;
     }
   }
-  selectAndCopy($event) {
+  selectAndCopy($event: any) {
     $event.target.select();
   }
 }

src/ui_ng/src/app/repository/top-repo/top-repo.component.ts

@@ -27,7 +27,7 @@ import { Repository } from '../repository';
     providers: [TopRepoService]
 })
 export class TopRepoComponent implements OnInit{
-    private topRepos: Repository[] = [];
+    topRepos: Repository[] = [];
 
     constructor(
         private topRepoService: TopRepoService,

src/ui_ng/src/app/repository/top-repo/top-repository.service.ts

@@ -27,10 +27,10 @@ export const topRepoEndpoint = "/api/repositories/top?detail=1";
  */
 @Injectable()
 export class TopRepoService {
-    private headers = new Headers({
+    headers = new Headers({
         "Content-Type": 'application/json'
     });
-    private options = new RequestOptions({
+    options = new RequestOptions({
         headers: this.headers
     });
 

src/ui_ng/src/app/shared/about-dialog/about-dialog.component.ts

@@ -21,8 +21,8 @@ import { AppConfigService } from '../../app-config.service';
     styleUrls: ["about-dialog.component.css"]
 })
 export class AboutDialogComponent {
-    private opened: boolean = false;
+    opened: boolean = false;
-    private build: string = "4276418";
+    build: string = "4276418";
 
     constructor(private appConfigService: AppConfigService) { }
 

src/ui_ng/src/app/shared/confirmation-dialog/confirmation-dialog.component.ts

@@ -33,7 +33,7 @@ export class ConfirmationDialogComponent implements OnDestroy {
     buttonKey: string = 'BUTTON.OK';
     confirmOnly: boolean = false;
     message: ConfirmationMessage;
-    private annouceSubscription: Subscription;
+    annouceSubscription: Subscription;
 
     constructor(
         private confirmationService: ConfirmationDialogService,

src/ui_ng/src/app/shared/confirmation-dialog/confirmation-dialog.service.ts

@@ -20,8 +20,8 @@ import { ConfirmationAcknowledgement } from './confirmation-state-message';
 
 @Injectable()
 export class ConfirmationDialogService {
-    private confirmationAnnoucedSource = new Subject<ConfirmationMessage>();
+    confirmationAnnoucedSource = new Subject<ConfirmationMessage>();
-    private confirmationConfirmSource = new Subject<ConfirmationAcknowledgement>();
+    confirmationConfirmSource = new Subject<ConfirmationAcknowledgement>();
 
     confirmationAnnouced$ = this.confirmationAnnoucedSource.asObservable();
     confirmationConfirm$ = this.confirmationConfirmSource.asObservable();

src/ui_ng/src/app/shared/filter/filter.component.ts

@@ -27,12 +27,12 @@ import 'rxjs/add/operator/distinctUntilChanged';
 
 export class FilterComponent implements OnInit {
     
-    private placeHolder: string = "";
+    placeHolder: string = "";
-    private filterTerms = new Subject<string>();
+    filterTerms = new Subject<string>();
 
     @Output("filter") private filterEvt = new EventEmitter<string>();
 
-    @Input() currentValue;
+    @Input() currentValue: string;
     @Input("filterPlaceholder")
     public set flPlaceholder(placeHolder: string) {
         this.placeHolder = placeHolder;

src/ui_ng/src/app/shared/gauge/gauge.component.ts

@@ -37,13 +37,13 @@ const RESOURCE_COLOR_GREY600: string = '#C7D1D6';
 })
 
 export class GaugeComponent implements AfterViewInit {
-      private _backgroundColor: string;
+      _backgroundColor: string;
-      private _colorOne: string;
+      _colorOne: string;
-      private _colorTwo: string;
+      _colorTwo: string;
-      private _size: string = "small"; //Support small, medium, large
+      _size: string = "small"; //Support small, medium, large
-      private _title: string = "UNKNOWN"; //Lang key
+      _title: string = "UNKNOWN"; //Lang key
-      private _free: number = 0;
+      _free: number = 0;
-      private _threasHold: number = 0;
+      _threasHold: number = 0;
 
       /**
        * Background color of the component. Default is white.
@@ -60,7 +60,7 @@ export class GaugeComponent implements AfterViewInit {
             this._backgroundColor = value;
       }
 
-      private _positionOne: number;
+      _positionOne: number;
       /**
        * Keep these two properties
        * Percentage of the total width for the first portion of the bar.
@@ -77,7 +77,7 @@ export class GaugeComponent implements AfterViewInit {
             this.setBars();
       }
 
-      private _positionTwo: number;
+      _positionTwo: number;
       /**
        * Percentage of the total width for the second portion of the bar
        */
@@ -91,7 +91,7 @@ export class GaugeComponent implements AfterViewInit {
             this.setBars();
       }
 
-      private _animate: boolean;
+      _animate: boolean;
       /**
        * Whether to animate transitions in the bars
        */
@@ -170,7 +170,7 @@ export class GaugeComponent implements AfterViewInit {
       @ViewChild('barOne') private barOne: ElementRef;
       @ViewChild('barTwo') private barTwo: ElementRef;
 
-      private determineColors() {
+      determineColors() {
             let percent: number = 0;
             if (this._threasHold !== 0) {
                   let used: number = this._threasHold - this._free;
@@ -200,7 +200,7 @@ export class GaugeComponent implements AfterViewInit {
             this.setAnimate();
       }
 
-      private setBars() {
+      setBars() {
             if (!this.barOne || !this.barTwo) {
                   return;
             }
@@ -238,7 +238,7 @@ export class GaugeComponent implements AfterViewInit {
             });
       }
 
-      private setColors() {
+      setColors() {
             if (!this.barOne || !this.barTwo) {
                   return;
             }
@@ -259,7 +259,7 @@ export class GaugeComponent implements AfterViewInit {
             });
       }
 
-      private setAnimate() {
+      setAnimate() {
             if (!this.barOne || !this.barTwo) {
                   return;
             }

src/ui_ng/src/app/shared/inline-alert/inline-alert.component.ts

@@ -24,15 +24,15 @@ import { Subscription } from "rxjs";
     styleUrls: ['inline-alert.component.css']
 })
 export class InlineAlertComponent {
-    private inlineAlertType: string = 'alert-danger';
+    inlineAlertType: string = 'alert-danger';
-    private inlineAlertClosable: boolean = false;
+    inlineAlertClosable: boolean = false;
-    private alertClose: boolean = true;
+    alertClose: boolean = true;
-    private displayedText: string = "";
+    displayedText: string = "";
-    private showCancelAction: boolean = false;
+    showCancelAction: boolean = false;
-    private useAppLevelStyle: boolean = false;
+    useAppLevelStyle: boolean = false;
-    private timer: Subscription = null;
+    timer: Subscription = null;
-    private count: number = 0;
+    count: number = 0;
-    private blinking: boolean = false;
+    blinking: boolean = false;
 
     @Output() confirmEvt = new EventEmitter<boolean>();
 
@@ -90,7 +90,7 @@ export class InlineAlertComponent {
     public blink() {
     }
 
-    private confirmCancel(): void {
+    confirmCancel(): void {
         this.confirmEvt.emit(true);
     }
 }

src/ui_ng/src/app/shared/list-project-ro/list-project-ro.component.html

@@ -10,7 +10,7 @@
         <clr-dg-cell>{{p.creation_time | date: 'short'}}</clr-dg-cell>
     </clr-dg-row>
     <clr-dg-footer>
-        {{totalRecordCount || (projects ? projects.length : 0)}} {{'PROJECT.ITEMS' | translate}}
+        {{(projects ? projects.length : 0)}} {{'PROJECT.ITEMS' | translate}}
         <clr-dg-pagination [clrDgPageSize]="5"></clr-dg-pagination>
     </clr-dg-footer>
 </clr-datagrid>

src/ui_ng/src/app/shared/list-project-ro/list-project-ro.component.ts

@@ -27,6 +27,7 @@ import { State } from 'clarity-angular';
 export class ListProjectROComponent {
   @Input() projects: Project[];
   @Output() paginate = new EventEmitter<State>();
+  
 
   constructor(
     private searchTrigger: SearchTriggerService,

src/ui_ng/src/app/shared/list-repository-ro/list-repository-ro.component.html

@@ -8,7 +8,7 @@
         <clr-dg-cell>{{r.pull_count}}</clr-dg-cell>
     </clr-dg-row>
     <clr-dg-footer>
-        {{totalRecordCount || (repositories ? repositories.length : 0)}} {{'REPOSITORY.ITEMS' | translate}}
+        {{(repositories ? repositories.length : 0)}} {{'REPOSITORY.ITEMS' | translate}}
         <clr-dg-pagination [clrDgPageSize]="3"></clr-dg-pagination>
     </clr-dg-footer>
 </clr-datagrid>

src/ui_ng/src/app/shared/max-length-ext.directive.ts

@@ -45,7 +45,7 @@ export function maxLengthExtValidator(length: number): ValidatorFn {
 
 export class MaxLengthExtValidatorDirective implements Validator, OnChanges {
     @Input() maxLengthExt: number;
-    private valFn = Validators.nullValidator;
+    valFn = Validators.nullValidator;
 
     ngOnChanges(changes: SimpleChanges): void {
         const change = changes['maxLengthExt'];

src/ui_ng/src/app/shared/message-handler/message-handler.service.ts

@@ -82,7 +82,7 @@ export class MessageHandlerService {
         this.msgService.clear();
     }
 
-    public isAppLevel(error): boolean {
+    public isAppLevel(error: any): boolean {
         return error && error.statusCode === httpStatusCode.Unauthorized;
     }
 }

src/ui_ng/src/app/shared/new-user-form/new-user-form.component.ts

@@ -42,23 +42,25 @@ export class NewUserFormComponent implements AfterViewChecked, OnInit {
     //Notify the form value changes
     @Output() valueChange = new EventEmitter<boolean>();
 
+    confirmedPwd: string;
+
     constructor(private session: SessionService) { }
 
     ngOnInit() {
         this.resetState();
     }
 
-    private validationStateMap: any = {};
+    validationStateMap: any = {};
 
-    private mailAlreadyChecked: any = {};
+    mailAlreadyChecked: any = {};
-    private userNameAlreadyChecked: any = {};
+    userNameAlreadyChecked: any = {};
-    private emailTooltip: string = 'TOOLTIP.EMAIL';
+    emailTooltip: string = 'TOOLTIP.EMAIL';
-    private usernameTooltip: string = 'TOOLTIP.USER_NAME';
+    usernameTooltip: string = 'TOOLTIP.USER_NAME';
-    private formValueChanged: boolean = false;
+    formValueChanged: boolean = false;
 
-    private checkOnGoing: any = {};
+    checkOnGoing: any = {};
 
-    private resetState(): void {
+    resetState(): void {
         this.mailAlreadyChecked = {};
         this.userNameAlreadyChecked = {};
         this.emailTooltip = 'TOOLTIP.EMAIL';
@@ -82,11 +84,11 @@ export class NewUserFormComponent implements AfterViewChecked, OnInit {
         return !this.checkOnGoing[key];
     }
 
-    private getValidationState(key: string): boolean {
+    getValidationState(key: string): boolean {
         return !this.validationStateMap[key];
     }
 
-    private handleValidation(key: string, flag: boolean): void {
+    handleValidation(key: string, flag: boolean): void {
         if (flag) {
             //Checking
             let cont = this.newUserForm.controls[key];

src/ui_ng/src/app/shared/not-found/not-found.component.ts

@@ -23,8 +23,8 @@ const defaultLeftTime = 5;
     styleUrls: ['not-found.component.css']
 })
 export class PageNotFoundComponent implements OnInit, OnDestroy{
-    private leftSeconds: number = defaultLeftTime;
+    leftSeconds: number = defaultLeftTime;
-    private timeInterval: any = null;
+    timeInterval: any = null;
 
     constructor(private router: Router){}
 

src/ui_ng/src/app/shared/port.directive.ts

@@ -42,7 +42,7 @@ export function portValidator(): ValidatorFn {
 })
 
 export class PortValidatorDirective implements Validator {
-    private valFn = portValidator();
+    valFn = portValidator();
 
     validate(control: AbstractControl): { [key: string]: any } {
         return this.valFn(control);

src/ui_ng/src/app/shared/route/auth-user-activate.service.ts

@@ -35,7 +35,7 @@ export class AuthCheckGuard implements CanActivate, CanActivateChild {
     private msgHandler: MessageHandlerService,
     private searchTrigger: SearchTriggerService) { }
 
-  private isGuest(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+  isGuest(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
     const proRegExp = /\/harbor\/projects\/[\d]+\/.+/i;
     const libRegExp = /\/harbor\/tags\/[\d]+\/.+/i;
     if (proRegExp.test(state.url) || libRegExp.test(state.url)) {

src/ui_ng/src/app/shared/session.service.ts

@@ -44,18 +44,18 @@ export class SessionService {
 
     projectMembers: Member[];
 
-    private headers = new Headers({
+    headers = new Headers({
         "Content-Type": 'application/json'
     });
 
-    private formHeaders = new Headers({
+    formHeaders = new Headers({
         "Content-Type": 'application/x-www-form-urlencoded'
     });
 
     constructor(private http: Http) { }
 
     //Handle the related exceptions
-    private handleError(error: any): Promise<any> {
+    handleError(error: any): Promise<any> {
         return Promise.reject(error.message || error);
     }
 

src/ui_ng/src/app/shared/shared.module.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 import { NgModule } from '@angular/core';
 import { CoreModule } from '../core/core.module';
-import { CookieService } from 'angular2-cookie/core';
+import { CookieService } from 'ngx-cookie';
 
 import { SessionService } from '../shared/session.service';
 import { MessageComponent } from '../global-message/message.component';

src/ui_ng/src/app/shared/statictics/statistic-handler.service.ts

@@ -17,7 +17,7 @@ import { Subject } from 'rxjs/Subject';
 @Injectable()
 export class StatisticHandler {
 
-  private refreshSource = new Subject<boolean>();
+  refreshSource = new Subject<boolean>();
 
   refreshChan$ = this.refreshSource.asObservable();
 

src/ui_ng/src/app/shared/statictics/statistics-panel.component.ts

@@ -32,10 +32,11 @@ import { StatisticHandler } from './statistic-handler.service';
 
 export class StatisticsPanelComponent implements OnInit, OnDestroy {
 
-    private originalCopy: Statistics = new Statistics();
+    originalCopy: Statistics = new Statistics();
-    private volumesInfo: Volumes = new Volumes();
+    volumesInfo: Volumes = new Volumes();
     refreshSub: Subscription;
-
+    small: number;
+    
     constructor(
         private statistics: StatisticsService,
         private msgHandler: MessageHandlerService,
@@ -97,7 +98,7 @@ export class StatisticsPanelComponent implements OnInit, OnDestroy {
         return this.volumesInfo.storage.total != 0;
     }
 
-    private getGBFromBytes(bytes: number): number {
+    getGBFromBytes(bytes: number): number {
         return Math.round((bytes / (1024 * 1024 * 1024)));
     }
 }

src/ui_ng/src/app/shared/statictics/statistics.service.ts

@@ -29,10 +29,10 @@ const volumesEndpoint = "/api/systeminfo/volumes";
  */
 @Injectable()
 export class StatisticsService {
-    private headers = new Headers({
+    headers = new Headers({
         "Content-Type": 'application/json'
     });
-    private options = new RequestOptions({
+    options = new RequestOptions({
         headers: this.headers
     });
 

src/ui_ng/src/app/shared/target-exists-directive.ts

@@ -30,7 +30,7 @@ export class TargetExistsValidatorDirective implements Validator, OnChanges {
   @Input() targetExists: string;
   @Input() projectId: number;
 
-  private valFn = Validators.nullValidator;
+  valFn = Validators.nullValidator;
 
   constructor(
     private projectService: ProjectService,

src/ui_ng/src/app/user/new-user-modal.component.ts

@@ -29,9 +29,9 @@ import { MessageHandlerService } from '../shared/message-handler/message-handler
 
 export class NewUserModalComponent {
     opened: boolean = false;
-    private error: any;
+    error: any;
-    private onGoing: boolean = false;
+    onGoing: boolean = false;
-    private formValueChanged: boolean = false;
+    formValueChanged: boolean = false;
 
     @Output() addNew = new EventEmitter<User>();
 
@@ -40,11 +40,11 @@ export class NewUserModalComponent {
         private msgHandler: MessageHandlerService) { }
 
     @ViewChild(NewUserFormComponent)
-    private newUserForm: NewUserFormComponent;
+    newUserForm: NewUserFormComponent;
     @ViewChild(InlineAlertComponent)
-    private inlineAlert: InlineAlertComponent;
+    inlineAlert: InlineAlertComponent;
 
-    private getNewUser(): User {
+    getNewUser(): User {
         return this.newUserForm.getData();
     }
 

src/ui_ng/src/app/user/user.component.ts

@@ -38,15 +38,15 @@ import { AppConfigService } from '../app-config.service';
 export class UserComponent implements OnInit, OnDestroy {
   users: User[] = [];
   originalUsers: Promise<User[]>;
-  private onGoing: boolean = false;
+  onGoing: boolean = false;
-  private adminMenuText: string = "";
+  adminMenuText: string = "";
-  private adminColumn: string = "";
+  adminColumn: string = "";
-  private deletionSubscription: Subscription;
+  deletionSubscription: Subscription;
 
   currentTerm: string;
 
   @ViewChild(NewUserModalComponent)
-  private newUserDialog: NewUserModalComponent;
+  newUserDialog: NewUserModalComponent;
 
   constructor(
     private userService: UserService,
@@ -67,7 +67,7 @@ export class UserComponent implements OnInit, OnDestroy {
     setTimeout(()=>clearInterval(hnd), 1000);
   }
 
-  private isMySelf(uid: number): boolean {
+  isMySelf(uid: number): boolean {
     let currentUser = this.session.getCurrentUser();
     if (currentUser) {
       if (currentUser.user_id === uid) {
@@ -78,7 +78,7 @@ export class UserComponent implements OnInit, OnDestroy {
     return false;
   }
 
-  private isMatchFilterTerm(terms: string, testedItem: string): boolean {
+  isMatchFilterTerm(terms: string, testedItem: string): boolean {
     return testedItem.indexOf(terms) != -1;
   }
 
@@ -193,7 +193,7 @@ export class UserComponent implements OnInit, OnDestroy {
     this.deletionDialogService.openComfirmDialog(msg);
   }
 
-  private delUser(user: User): void {
+  delUser(user: User): void {
     this.userService.deleteUser(user.user_id)
       .then(() => {
         //Remove it from current user list

src/ui_ng/src/app/user/user.service.ts

@@ -27,7 +27,7 @@ const userMgmtEndpoint = '/api/users';
  */
 @Injectable()
 export class UserService {
-    private httpOptions = new RequestOptions({
+    httpOptions = new RequestOptions({
         headers: new Headers({
             "Content-Type": 'application/json'
         })
@@ -36,7 +36,7 @@ export class UserService {
     constructor(private http: Http) { }
 
     //Handle the related exceptions
-    private handleError(error: any): Promise<any> {
+    handleError(error: any): Promise<any> {
         return Promise.reject(error.message || error);
     }
 

src/ui_ng/src/main-aot.ts

@@ -0,0 +1,11 @@
+import './polyfills.ts';
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from '@angular/core';
+import { environment } from './environments/environment';
+import { AppModuleNgFactory } from '../aot/src/app/app.module.ngfactory';
+
+
+enableProdMode();
+
+platformBrowserDynamic().bootstrapModuleFactory(AppModuleNgFactory);

src/ui_ng/tsconfig-aot.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": ["es2015", "dom"],
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
+    "typeRoots": [
+      "./node_modules/@types/"
+    ]
+  },
+  "files": [
+    "src/app/app.module.ts",
+    "src/main-aot.ts"
+  ],
+  "angularCompilerOptions": {
+    "genDir": "aot",
+    "skipMetadataEmit" : true
+  }
+}