tikey-soft-web v1.0.5

TikeySoftWeb

This Project is a base library for speeding up development process for TikeySoft team.

Installation

Add these packages into the package.json

"tikey-soft-web": "^1.0.4",

"ngx-spinner": "^16.0.2",
"primeflex": "^3.3.1",
"primeicons": "^7.0.0",
"primeng": "^17.13.0",

Add styles for ngx-spinner and primeNG

Add style module in angular.json

"styles": [
  "src/styles.scss",
  "node_modules/ngx-spinner/animations/line-scale-party.css"
],

Change line-scale-party.css in case using other spinner type. Find out more at: ngx-spinner

Add these into styles.scss

@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.css";
@import "primeicons/primeicons.css";
@import "primeflex/primeflex.css";

Add environments

Create environments folder with 2 files environement.ts and environment.development.ts with values.

export const environment = {
  production: false, // false for environment.development.ts and true for environment.ts
  apiUrl: 'http://localhost:8001/',
  language: 'vi',
  appName: 'Hệ thống kiểm soát Công đoạn đùn nhôm',
  customerHomepage: "https://www.vmd-jsc.com/",
  menuItems: [
    {label: 'Dashboard', icon: 'pi pi-home', routerLink: '/main/dashboard'},
    {label: 'Sản phẩm', icon: 'pi pi-list', routerLink: '/main/products'},
  ]
};

These are examples, please adjust according to the working project. In this, there will be 2 pages in the application: Dashboard and Sản phẩm

Config routes

Update app.routes.ts

Import library components, services and import environment

import {LoginPageComponent, MainPageComponent, LandingPageComponent, AuthGuard} from "../../../TikeySoft-Web/dist/auth";
import {environment} from "../environments/environment";

Create components and define routes in the application, these are examples for 2 components Dashboard and Product

import {ProductComponent} from "./product/product.component";
import {DashboardComponent} from "./dashboard/dashboard.component";

const mainRoutes: Routes = [
  {path: '', component: LandingPageComponent},
  {path: 'dashboard', component: DashboardComponent},
  {path: 'products', component: ProductComponent},
];

Update the routes variable

export const routes: Routes = [
  {path: '', component: LoginPageComponent},
  {
    path: 'main',
    component: MainPageComponent,
    data: {appName: environment.appName, menuItems: environment.menuItems, customerHomepage: environment.customerHomepage},
    canActivate: [AuthGuard],
    children: mainRoutes
  },
  {path: '**', redirectTo: ''}
];

Config application

Update app.config.ts

Add providers for the application

//import { provideRouter } from '@angular/router'; update this line to
import {provideRouter, withComponentInputBinding} from '@angular/router';
import {provideAnimations} from "@angular/platform-browser/animations";

Import library components, services and import environment

import {HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi} from "@angular/common/http";
import {MessageService} from "primeng/api";
import {ResponseInterceptor,HeaderInterceptor, AuthService, LanguageService} from "../../../TikeySoft-Web/dist/auth";
import {environment} from "../environments/environment";

Update appConfig variable

export const appConfig: ApplicationConfig = {
  providers: [
    AuthService, {provide: 'apiUrl', useValue: environment.apiUrl},
    LanguageService, {provide: 'language', useValue: environment.language},
    provideRouter(routes, withComponentInputBinding()),
    provideAnimations(),
    provideHttpClient(withInterceptorsFromDi()),
    { provide:HTTP_INTERCEPTORS, useClass:ResponseInterceptor, multi:true},
    { provide:HTTP_INTERCEPTORS, useClass:HeaderInterceptor, multi:true},
    { provide: MessageService }]
};

Update App module

Update app.component.ts

import { Component } from '@angular/core';
import {RouterOutlet} from "@angular/router";
import {ToastModule} from "primeng/toast";
import {NgxSpinnerModule} from "ngx-spinner";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: true,
  imports: [
    RouterOutlet,
    ToastModule, //Add this line
    NgxSpinnerModule, //Add this line
  ],
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'Application Name';
}

Update app.component.html

<p-toast></p-toast>
<ngx-spinner type="line-scale-party" [fullScreen] = "true"></ngx-spinner>
<router-outlet></router-outlet>

Change the spinner type (line-scale-party) in case using other spinner type (remember to change according to angular.json style). Find out more at: ngx-spinner

Add Customer Logo asset

Add customer logo with the name customer-logo.png into assets folder