primefaces / sakai-ng

Free Angular Admin Template by PrimeNG

Sakai

This project was generated with Angular CLI version 13.0.4.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

sakai-ng's Issues

Bad CSS Layer Management

Hi,

We are using sakai-ng to develop our PrimeNg application theme, as it's now the new way to do.

Sakai comes with a bunch of scss files (visible in src\assets\layout\styles\layout*), and this is ok.

The problem is those file are considered as anonymous layers and they have a bigger priority in the rendering process.
For example, using css custom layers while templating the h1 tag will never be rendered as expected because the applied rule will be the one specified in _typography.scss.

Adding a '@layer sakai' for all the files in src\assets\layout\styles\layout will be, I think, a good idea to prevent this behavior and let teams render has expected their styles.

Update to v16?

Are there any plans to upgrade to v16?

Request for sass files and/or documentation on compiling

Hi,

I can see that we have got the primeng theme files are present to support v17.

But sakai-ng is still in v16.
I wanted to compile sakai-ng with v17 theme. Tried using the sass folder and sakai-ng layout folder.
But had no luck.

Can anyone guide/document on how the sakai-ng upgrade can be done with latest prime-ng theme resource?

Thank you.

Font files are missing

Hi!

There is no font files for lara (blue, indigo) themes:

@font-face {
font-family: "Inter var";
font-weight: 100 900;
font-display: swap;
font-style: normal;
font-named-instance: "Regular";
src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); /* Missing */
}

@font-face {
font-family: "Inter var";
font-weight: 100 900;
font-display: swap;
font-style: italic;
font-named-instance: "Italic";
src: url("./fonts/Inter-italic.var.woff2?v=3.19") format("woff2"); /* Missing */
}

Menu icon not showing that has submenu

I am using sakai-ng in my angular application. I have copy and paste all the code for sidemenu items. But in my case menu icon not showing that has submenu items. Can anyone help me to figure out what i am doing wrong.

Width Issue on NotFound Page in Angular 14.0.0

The content on the NotFound page did not correctly adapt its width, The problem was due to the min-w-screen class being applied to a parent div.

Solution
I found that the min-w-screen class applied to the parent div of the NotFound page's content was causing the issue. Removing this class resolved the problem, allowing the content to adjust dynamically to the screen size.

_responsive incorrect .layout-main width

_responsive.scss

@media screen and (min-width: 1729px) {
    .layout-main {
        width: 1478px;
        margin: 0 auto;
    }
}

This line causes the layout-main to overlap the left menu

Missing Inter fonts in lara-*-blue themes

After downloading sakai-ng v.17 and unpacking it, it turns out that the Inter-roman and Inter-talic font files mentioned in layout/styles/theme/lara-light-blue/theme.css and layout/styles/theme/lara-dark-blue/theme.css do not exist:

Error when running ng build

I encountered this error when running ng build, just after cloning. ng serve is working fine

./node_modules/css-loader/dist/runtime/api.js - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Transform failed with 1 error:
error: Invalid version: "15.2-15.3"

./node_modules/css-loader/dist/runtime/noSourceMaps.js - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Transform failed with 1 error:
error: Invalid version: "15.2-15.3"

./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Transform failed with 1 error:
error: Invalid version: "15.2-15.3"

./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Transform failed with 1 error:
error: Invalid version: "15.2-15.3"

./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Transform failed with 1 error:
error: Invalid version: "15.2-15.3"
    at tryRunOrWebpackError (C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\webpack\lib\HookWebpackError.js:88:9)
    at __webpack_require_module__ (C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\webpack\lib\Compilation.js:4979:12)
    at __webpack_require__ (C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\webpack\lib\Compilation.js:4936:18)
    at Module.<anonymous> (C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[3].rules[0].oneOf[1].use[1]!C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[3].rules[0].oneOf[1].use[2]!C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[3].rules[1].use[0]!C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[3].rules[1].use[1]!C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\src\styles.scss:5:111)
    at C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:432:11
    at Hook.eval [as call] (eval at create (C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\webpack\lib\Compilation.js:4981:39
    at tryRunOrWebpackError (C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\webpack\lib\HookWebpackError.js:83:7)
    at __webpack_require_module__ (C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\webpack\lib\Compilation.js:4979:12)
    at __webpack_require__ (C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\webpack\lib\Compilation.js:4936:18)
-- inner error --
Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Transform failed with 1 error:
error: Invalid version: "15.2-15.3"
    at Object.<anonymous> (C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\@angular-devkit\build-angular\src\babel\webpack-loader.js??ruleSet[1].rules[1].use[0]!C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\@ngtools\webpack\src\ivy\index.js!C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\css-loader\dist\runtime\noSourceMaps.js:1:7)
    at C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:432:11
    at Hook.eval [as call] (eval at create (C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\webpack\lib\Compilation.js:4981:39
    at tryRunOrWebpackError (C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\webpack\lib\HookWebpackError.js:83:7)
    at __webpack_require_module__ (C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\webpack\lib\Compilation.js:4979:12)
    at __webpack_require__ (C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\webpack\lib\Compilation.js:4936:18)
    at Module.<anonymous> (C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[3].rules[0].oneOf[1].use[1]!C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[3].rules[0].oneOf[1].use[2]!C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[3].rules[1].use[0]!C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[3].rules[1].use[1]!C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\src\styles.scss:5:111)
    at C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:432:11
    at Hook.eval [as call] (eval at create (C:\Users\guillaume.schurck\Desktop\TOTEM\sakai-ng\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)

PrimeNG 17.17.0 Stepper Component Support

Hello,

I just cloned the template and tried the Stepper component and the functionality works but feels like it's missing some styling.

I am quite new to the libraries wanted to make sure if i am missing something or this component is not supported yet.

Link to the component documentation:
https://primeng.org/stepper

Here is my code:
https://github.com/ericaskari/sakai-ng-primeng-stepper
And the commit:
ericaskari/sakai-ng-primeng-stepper@704755c

Few pictures of how it looks like:

And how it should look like:

Thank you.

Support PrimeNg version 17

The current template did not support PrimeNg version 17

Dropdown inside modal

the dropdown inside a modal and placing it in the footer of the modal when collapsing it, the elements cannot be seen correctly, that is, it does not overlap the buttons or the footer of the modal
There is any solution for this?

Why this template overrides primeng themes?

Hey there..

Just wondering why this template overrides themes from primeng?
It is overring and distribute over the assets layout themes folder.

Why not just use the theme from primeng/resources, and then add specific classes when needed?

Its seems will become harder to mantein when it get an update, wouldnt it?

Thanks

License file missing

I found this on the PrimeNG site indicating it is open source. It would help if you include the appropriate license.md file. Thanks.

Drop-down on lef nav

How the drop-down is coming for Auth and Hierarchy in the left navigation?

net::ERR_CERT_AUTHORITY_INVALID

Hi Team,

While loading the application on SSL i am getting the below error
net::ERR_CERT_AUTHORITY_INVALID

Index.html File Url Not Found

this is reffer image. where when i build angular 17 application then assets image, css not found. how i can resolve this??

npm install error

Hello!

npm install returns error due to a conflict between package.json primeicons version 6.0.1 and primeng 14.1.1 one which is 5.0.x
Updating package.json to primeng 14.1.2 solves the problem.

Hope to help!
Bye

Make Demo router Relative and optional

Dear,

It would be nice to have demo features using relatives paths, and be a optional module, so we can use it as a boilerplate and having the module enabled only when is development mode, for devs references.
like localhost/demo

When in prod , demo could be out of building

What do you think?

Thanks

The style is not properly visible after cloning the source code

Menu Popup Error

When we scroll down, then click on popup menu button on the TopBar, it show popup menu but it so far from button "Show"

Please help me how to use overlay menu on TopBar. Thanks!!!

Schema validation failed on ng serve

Schema validation failed with the following errors:
Data path "['build']" should NOT have additional properties(defaultConfiguration).
Error: Schema validation failed with the following errors:
Data path "['build']" should NOT have additional properties(defaultConfiguration).

Sidebar: Mobile mode alignment issue

I had an issue with the sidebar when scrolling down in mobile mode.

How add this project in Angular and .Netcore Web api preview

how to add this project as a template to my Angular and ASP.Net core (preview) Project?

i was tried but some of designs are not working properly so kindly guide me how to do that.

Thanks.

Remove Feedback from password (login page)

It would be better if there was no feedback in password in login component

[feedback]="false"

Tests are failing

attempting to run npm test throws the following error

Error during loading: Uncaught TypeError: __webpack_require__(...).context is not a function in http://localhost:9876/_karma_webpack_/main.js line 22

I tried on Windows 11 with

Angular CLI: 15.2.9
Node: 18.16.0
Package Manager: yarn 1.22.19
OS: win32 x64
Angular: 15.2.9

$ npm test

> [email protected] test
> ng test

⠋ Generating browser application bundles (phase: setup)...    TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI. To control ECMA version and features use the Browerslist configuration. For more information, see https://angular.io/guide/build#configuring-browser-compatibility
    NOTE: You can set the "target" to "ES2022" in the project's tsconfig to remove this warning.
✔ Browser application bundle generation complete.
14 07 2023 01:43:39.183:WARN [karma]: No captured browser, open http://localhost:9876/
14 07 2023 01:43:39.192:INFO [karma-server]: Karma v6.3.20 server started at http://localhost:9876/
14 07 2023 01:43:39.192:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
14 07 2023 01:43:39.194:INFO [launcher]: Starting browser Chrome
14 07 2023 01:43:39.708:INFO [Chrome 114.0.0.0 (Windows 10)]: Connected on socket NzxaOOPXS1SvRFBeAAAB with id 50648254
Chrome 114.0.0.0 (Windows 10) ERROR
  An error was thrown in afterAll
  Uncaught TypeError: __webpack_require__(...).context is not a function
  TypeError: __webpack_require__(...).context is not a function
      at Object.4289 (http://localhost:9876/_karma_webpack_/webpack:/src/test.ts:24:25)
      at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
      at __webpack_exec__ (http://localhost:9876/_karma_webpack_/main.js:48:48)
      at http://localhost:9876/_karma_webpack_/main.js:49:54
      at Function.__webpack_require__.O (http://localhost:9876/_karma_webpack_/webpack:/webpack/runtime/chunk loaded:23:1)
      at http://localhost:9876/_karma_webpack_/main.js:50:56
      at webpackJsonpCallback (http://localhost:9876/_karma_webpack_/webpack:/webpack/runtime/jsonp chunk loading:34:1)
      at http://localhost:9876/_karma_webpack_/main.js:1:69
Chrome 114.0.0.0 (Windows 10): Executed 0 of 0 ERROR (0 secs / 0 secs)
Chrome 114.0.0.0 (Windows 10) ERROR
  An error was thrown in afterAll
  Uncaught TypeError: __webpack_require__(...).context is not a function
  TypeError: __webpack_require__(...).context is not a function
      at Object.4289 (http://localhost:9876/_karma_webpack_/webpack:/src/test.ts:24:25)
      at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
      at __webpack_exec__ (http://localhost:9876/_karma_webpack_/main.js:48:48)
      at http://localhost:9876/_karma_webpack_/main.js:49:54
      at Function.__webpack_require__.O (http://localhost:9876/_karma_webpack_/webpack:/webpack/runtime/chunk loaded:23:1)
      at http://localhost:9876/_karma_webpack_/main.js:50:56
      at webpackJsonpCallback (http://localhost:9876/_karma_webpack_/webpack:/webpack/runtime/jsonp chunk loading:34:1)

Cross-site Scripting in quill

The following npm audit report occur and the cross-site scripting in quill found.

=============================

npm audit report

quill <=1.3.7
Severity: moderate
Cross-site Scripting in quill - GHSA-4943-9vgg-gr5r
No fix available
node_modules/quill

1 moderate severity vulnerability

I'd like to know your policy. About standalone.

Will you support standalone components?

AutoComplete, Calendar and InputNumber buttons are bigger than normal on PrimeNG >= 16.4.0

URL: uikit/input

The buttons are bigger than normal on PrimeNG >= 16.4.0. The input border also gets a rounded corner before merging with the button.

Tested that the problem does not occur in versions of PrimeNG < 16.4.0

Support Angular 14

Provide support for Angular 14 (released on 2022-06-02): https://blog.angular.io/angular-v14-is-now-available-391a6db736af

Right to Left support

Question: is Right to Left supported by Sakai?

Responsive

How to make it responsive when ever the screen size got decreased the design was not responsive

Error when running ng build

Hello,
First, this template is very nice, always Prime Tech making a good job for the community.

Is it possible helpe me ?

15 | // Exports
16 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
17 |

Thanks