12221 comments found.
Hello all demo views have Html version or few views?
Hi 
,
Thanks for your interest in our theme – Metronic.
All demos have HTML versions. The HTML versions are default version so all demos have it by default. If you need any further clarifications please let us know.
Regards, Sean
Hello, the demo files of the default version are not working, they point to missing css/js files
Hi,
First of all thanks for choosing Metronic.
In order to launch the theme you will need to generate the “dist” folder from “src” folder by installing and running the build tools in command line. All the required steps are explained in the documentation https://keenthemes.com/metronic/?page=docs and also in the below video tutorials:
1. Installation jQuery/Bootstrap Version Using Gulp: https://youtu.be/d-pSVf8Xazk
2. Your First Project: https://youtu.be/yu0O2Y2NXxc
3. Customization: https://youtu.be/7PG5Qbg0-gM
Please note that in the video tutorials refer to an older version of Metronic so some information can be inaccurate(file paths, folder structure, etc) but the overall instructions are valid for all Keen versions.
If you need any further help please let us know. For any further info you can also check our detailed theme documentation: https://keenthemes.com/metronic/?page=docs
Please follow us at http://twitter.com/keenthemes to stay updated.
Regards, Sean
thanks!
You are most welcome
Can you add svg invoice icon?
Hi,
Could you please contact our support at support@keenthemes.com and let us know what kind of icon you are requesting ? Is it a font icon or SVG image icon ?
Regards, Sean
Hi Metronic,
I use KTDatatable/Ajax Data. I want to take action on the table row.
For example: 1-) https://prnt.sc/rqnum8
I want to update joycelin’s information.How can I do?
*Please don’t send web addresses as a code source.
Thanks.
Hi,
The buttons display is for example. You have to customize it to extend its functionality. At the moment, we have no edit feature for the datatable. Please check the example datatable js init.
Here is some general direction. You can do below example modification to make the edit button call for modal with form and pass the row id.
{
template: function (row) {
return '<a href="#" class="btn-class" data-id="' + row.product_master_id + '">Edit</a>';
}
}
datatable.on('click', '.btn-class', function() {
var id = $(this).data('id');
// your example function to call modal
OpenEditModal(id);
});
Then populate the form in modal with your selected row data. Make the changes and submit. Close the modal, then reload the datatable using datatable.reload() function.
Let us know if you need further clarifications.
Thanks
@PixelDots, it worked. Thanks a lot! (:
Glad it worked
Feel free to ask if you need any more help.
Hi @PixelDots, there is another problem. KTDatatable/Ajax Data search not working.
For example: 1-) https://prnt.sc/sm2hlp JS code snippet 2-) https://prnt.sc/sm2k56 HTML 3-) https://prnt.sc/sm2ku4
When I write a word, the table is refreshed but not working.
I’ll be glad, if you help me.
Hi,
Was it your backend service received the filter keyword and return the filtered value? Could you please verify this at the Network tab in browser dev tools.
Here is the example to check; https://developers.google.com/web/tools/chrome-devtools/network#detailsThanks
Yes, backend service is running. But not filter keyword. network console : https://prnt.sc/smlmfs js code : https://jsfiddle.net/rwnt7p20/
Hi denizfb,
You have to check your PHP file, data-author.php. Does it accept the search keyword parameters, and only populate the data based on the keywords.
https://ibb.co/dmZtwWMThanks
do we have any social network pages?
Like , user post box, where user will share his photo,idea ,video? and need timeline?
Hi ,
At the moment we do not have such template. You can contact our support at support@keenthemes.com and provide more details and we will consider implementing them in a future update.
Please follow us at http://twitter.com/keenthemes to stay updated and check out our video tuts channel on Youtube https://www.youtube.com/c/KeenThemesTuts/videos
Regards, Sean
When will you release your saas dashboard demo ? We are interested in that.
Hi ,
Thanks for your interest in our theme and demos.
We will release those new demos by end of April or latest by mid of May.
Please follow us at http://twitter.com/keenthemes to stay updated and check out our video tuts channel on Youtube https://www.youtube.com/c/KeenThemesTuts/videos
Regards, Sean
Hi. I bought this template because I saw it sometime ago, and now I want to use it in a react eCommerce platform I am building.
First, am quite impressed with your work, but it is sad to discover that there is no videos on how to work with this template in react.
Secondly, its good you Integrated Redux into this project, but I dont want it. Tou are using Redux Saga, and as someone new to Redux, am currently working with Redux Thunk.
So how do I go about deleting the store folder and removing redux from the project and including it in my own fashion.
Finally, I see axios mock and I dont really know what that means. I want to get rid of it and implement axios the way I understand it.
I understand the template came with a lot of features, but I really want to learn how to customize this template and get rid of superfluous features I might not really need.
This is urgent and I will appreciate any video guide or info on how to go about this or a detailed guide here. Thanks a lot.
And a big shout out to the theme. I bought a new theme, but your code is so well written that a junior developer like me could make sense of it.
Please help me, our company project depends on me getting and customizing this template for my team to work with and understand.
Thanks.
You didn’t answer or say anything about my post? Thanks anyways, I will figure out things for myself. But its funny you answered pre sale questions, but ignored my post buying challenges
Hi,
Very sorry for the delay. Since this is a technical question it was assigned to our React developer and he will attend to this shortly.
Please do not take this for ignoring. Our team members work in different timezones so sometimes replies can be made relatively slow or fast. We will get back to you as soon as possible.
Regards, Sean
Hi gabbyebook4study,
/// First, am quite impressed with your work, but it is sad to discover that there is no videos on how to work with this template in react ///
We have a huge code-base (12 demos of Default-jQuery version/10 Angular/4 React/2 Vue). Video tuts don’t cover whole code, We are preparing it one by one. Follow official docs there: https://keenthemes.com/metronic/?page=docs§ion=react-quick-start
/// Secondly, its good you Integrated Redux into this project, but I dont want it. Tou are using Redux Saga, and as someone new to Redux, am currently working with Redux Thunk. ///
It was our developers choice, many users work with Redux. For using our template user should be familiar with Redux. About chosing Redux-Saga, again in React world we have hundreds solutions of one problem and Redux-Saga was our choice. There is the article for moving from Thunk to Saga: https://medium.com/javascript-in-plain-english/redux-thunk-vs-redux-saga-8c93fc822de
/// So how do I go about deleting the store folder and removing redux from the project and including it in my own fashion. ///
Our application uses Redux (layout/authorization/builder). There are no options for removing Redux from our React application.
/// Finally, I see axios mock and I dont really know what that means. I want to get rid of it and implement axios the way I understand it. ///
Follow the documentation: https://keenthemes.com/metronic/?page=docs§ion=react-mock-back-end
/// You didn’t answer or say anything about my post? Thanks anyways, I will figure out things for myself. But its funny you answered pre sale questions, but ignored my post buying challenges ///
We don’t ingore you. Our support generally operates from 9AM – 6PM GMT+8 time from Monday – Friday. The support response time is 24-72 hours but normally we tend to settle the questions as earlier as possible(even earlier than 24 hours when possible). You message was 10 hours ago. https://keenthemes.com/theme-support/
/// Please help me, our company project depends on me getting and customizing this template for my team to work with and understand. /// Write concrete case of your issue, we will try to help you.
Regards, Keenthemes support
Ok. Thanks for your reply. Am sorry for assuming you ignored me. I saw other people that left comment after my own and they got replied. I didn’t know you were contacting your developer for my question.
That said, my main challenge or issue is the Redux. I like the fact that the admin template came with a lot of React Components already designed. But, the beauty of React is its declarative and non opinionated approach to UI development.
I could understand the codes and work with the components. But I want to use this template for a medium size application, which using redux is an overkill for me.
To make matters worse, you are using redux saga, which actually defeats the purpose and idea behind react. I could setup redux myself, and make use of redux thunk or redux promise or any other middleware i am proficient in.
Redux is a pretty broad topic to wrap my head around, am even thinking of using context API for this dashboard, but you have already built the template to work with redux alone.
I understand that we cannot remove redux from this project, at least, can you guys come up with a guide on how to work with this template using redux.
It will go a long way for me.
And plus, I want to know, if it I can use the plain bootstrap version and build components out of it and create my UI without any functionality.
Thanks for your support.
((I understand that we cannot remove redux from this project, at least, can you guys come up with a guide on how to work with this template using redux))
In the theme redux is used only for Layout+Authorization. If you are working only with pages, you don’t need to change anything depending redux. If you want do changes in layout, try to pass this tutorial, it will be enough for work with layout: https://react-redux.js.org/introduction/basic-tutorial
Much better will be if you ask us concrete question, which moment do you need and can’t change by yourself.
((And plus, I want to know, if it I can use the plain bootstrap version and build components out of it and create my UI without any functionality.))
There are no any restrictions for do it.
Regards, Keenthemes support
Ok. Thanks alot. Since Redux was used only for layout and authentication, I guess, I will have to figure out how to create a new store and do my stuff there. with Redux, one can have more than one store right?
In Redux methodology store should be one, but you able write your reducers and combine them.
Regards, Keenthemes support
When is the update coming?
Hi ,
We are almost finalizing the next update and targeting to release it in a a few weeks.
Please follow us at http://twitter.com/keenthemes to stay updated and check out our video tuts channel on Youtube https://www.youtube.com/c/KeenThemesTuts/videos
Regards, Sean
Ok. Few weeks would late for me. Appreciate if its sooner
Hi,
We will do our best. We need to make sure it will be fully complete and stable.
Regards, Sean
Is possible to buy the another metronic version, like this http://keenthemes.com/preview/metronic/theme/admin_1/index.html ???
Hi ,
Sure, you can purchase a new license for the current version in themeforest and email our support with your purchase code and we will provide a link do download the older version that you need.
Regards, Sean
Hi, We purchased this item – Our angular CLI Version is 9.1.0 and our Node version is 12.16.1 , NPM Version 6.13.4 – We are trying to install the theme with these versions but we are getting errors like -
“E:\Angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\build\binding.sln” (default target) (1) -> “E:\Angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\build\binding.vcxproj.metaproj” (default target) (2) -> “E:\Angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\build\binding.vcxproj” (default target) (4) -> (ClCompile target) -> e:\angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\src\create_string.cpp(17): error C2664: ‘v8::String::Utf8Value: :Utf8Value(const v8::String::Utf8Value &)’: cannot convert argument 1 from ‘v8::Local<v8::Value>’ to ‘const v8::String::Utf8Value &’ [E:\Angular\dem o2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\build\binding.vcxproj]
8 Warning(s)
1 Error(s)Time Elapsed 00:05:07.04
gyp ERR! build error
gyp ERR! stack Error: `C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools\MSBuild\15.0\Bin\MSBuild.exe` failed with exit code: 1
gyp ERR! stack at ChildProcess.onExit (E:\Angular\demo2\node_modules\node-gyp\lib\build.js:262:23)
gyp ERR! stack at ChildProcess.emit (events.js:311:20)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
gyp ERR! System Windows_NT 10.0.18362
gyp ERR! command “C:\\Program Files\\nodejs\\node.exe” “E:\\Angular\\demo2\\node_modules\\node-gyp\\bin\\node-gyp.js” “rebuild” “-verbose” “-libsass_ext=” “-libsass_cflags=” “-libsass_ldflags=” “—libsass_library=”
gyp ERR! cwd E:\Angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass
gyp ERR! node -v v12.16.1
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
Hi leel_vino.
Please show your packages.json file. Have you updated smth there? Right now we don’t cover support of Angular 9 version.
Angular version will be updated in 2 phases:
Next release (during 2 weeks) => Update till 9 without IVY support. (HTML+SASS structure will be updated too)
Next 3 releases (during next 2 months) => Update architecture of application (Will be removed overdated patterns/solutions) with IVY support (Goals are performance+reusable controls/services/directives+extensible).
Regards, Keenthemes support
hi,
we did not do any changes on packages.json file -
NOw tried Angular version 7 – still we get the error given below – same error .
Again i uninstall the angular/cli and downgrade the details are
Angular CLI: 7.3.10 Node: 12.16.1 OS: win32×64 Angular: ...
Package Version
@angular-devkit/architect 0.13.10 @angular-devkit/core 7.3.10 @angular-devkit/schematics 7.3.10 @schematics/angular 7.3.10 @schematics/update 0.13.10 rxjs 6.3.3 typescript 3.2.4
ERROR : Done Building Project “E:\Angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\build\binding.vcxproj” (default targets) - - FAILED.
win_delay_load_hook.ccDone Building Project “E:\Angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\build\binding.vcxproj.metaproj” (default t argets)—FAILED.
Done Building Project “E:\Angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\build\binding.sln” (default targets)—FA ILED.
Build FAILED.
“E:\Angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\build\binding.sln” (default target) (1) -> “E:\Angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\build\binding.vcxproj.metaproj” (default target) (2) -> “E:\Angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\build\src\libsass.vcxproj” (default target) (3) -> (ClCompile target) -> cl : Command line warning D9025: overriding ’/GR-’ with ’/GR’ [E:\Angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\ build\src\libsass.vcxproj] cl : Command line warning D9025: overriding ’/GR-’ with ’/GR’ [E:\Angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\ build\src\libsass.vcxproj] cl : Command line warning D9025: overriding ’/GR-’ with ’/GR’ [E:\Angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\ build\src\libsass.vcxproj] cl : Command line warning D9025: overriding ’/GR-’ with ’/GR’ [E:\Angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\ build\src\libsass.vcxproj] cl : Command line warning D9025: overriding ’/GR-’ with ’/GR’ [E:\Angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\ build\src\libsass.vcxproj] e:\angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\src\libsass\src\json.cpp(26): warning C4005: ‘_CRT_NONSTDC_NO_D EPRECATE’: macro redefinition [E:\Angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\build\src\libsass.vcxproj] e:\angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\src\libsass\src\sass2scss.cpp(9): warning C4005: ‘CRT_NONSTDC NO_DEPRECATE’: macro redefinition [E:\Angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\build\src\libsass.vcxproj]
“E:\Angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\build\binding.sln” (default target) (1) -> “E:\Angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\build\binding.vcxproj.metaproj” (default target) (2) -> “E:\Angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\build\src\libsass.vcxproj” (default target) (3) -> cl : Command line warning D9025: overriding ’/GR-’ with ’/GR’ [E:\Angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\ build\src\libsass.vcxproj]
“E:\Angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\build\binding.sln” (default target) (1) -> “E:\Angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\build\binding.vcxproj.metaproj” (default target) (2) -> “E:\Angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\build\binding.vcxproj” (default target) (4) -> (ClCompile target) -> e:\angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\src\create_string.cpp(17): error C2664: ‘v8::String::Utf8Value: :Utf8Value(const v8::String::Utf8Value &)’: cannot convert argument 1 from ‘v8::Local<v8::Value>’ to ‘const v8::String::Utf8Value &’ [E:\Angular\dem o2\node_modules\@angular-devkit\build-angular\node_modules\node-sass\build\binding.vcxproj]
8 Warning(s)
1 Error(s)Time Elapsed 00:03:19.86
gyp ERR! build error
gyp ERR! stack Error: `C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools\MSBuild\15.0\Bin\MSBuild.exe` failed with exit code: 1
gyp ERR! stack at ChildProcess.onExit (E:\Angular\demo2\node_modules\node-gyp\lib\build.js:262:23)
gyp ERR! stack at ChildProcess.emit (events.js:311:20)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
gyp ERR! System Windows_NT 10.0.18362
gyp ERR! command “C:\\Program Files\\nodejs\\node.exe” “E:\\Angular\\demo2\\node_modules\\node-gyp\\bin\\node-gyp.js” “rebuild” “-verbose” “-libsass_ext=” “-libsass_cflags=” “-libsass_ldflags=” “—libsass_library=”
gyp ERR! cwd E:\Angular\demo2\node_modules\@angular-devkit\build-angular\node_modules\node-sass
gyp ERR! node -v v12.16.1
gyp ERR! node-gyp -v v3.8.0
Build failed with error code: 1
Hi, leel_vino.
No need to downgrade the CLI version. I’ve just checked installation with params: Node v: 12.14.1 NPM: 6.13.4 CLI: 9.0.1
Works fine.
Try to do these: 1) run ‘npm uninstall -g @angular-cli’ 2) run ‘npm cache verify’ 3) run ‘npm install -g @angular/cli@latest’ 4) from application remove node_modules and *lock files 5) install yarn 6) restart your pc 7) in app folder run ‘yarn’ (with administrator rights)
I hope, it helps you.
Regards, Keenthemes support
After exporting html files from layout builder , how should i implement in my application , i am using demo1 default theme ,do you have any details document about layout builder implementation
Hi ,
Sure, please check this video tutorials to understand how to use the layout builder with your development sass/js assets: https://www.youtube.com/watch?v=yu0O2Y2NXxc&t=8s
For more info please check https://keenthemes.com/metronic/?page=docs to get started with build tools and theme compilation.
Regards, Sean
Greetings,
I followed all the steps for generating the default theme dist folder but don’t see the folder in the refered location.
Howeever, the app served at http://localhost:8080 is running with no problems
But I need teh dist folder in order to upload it to other projects.
Hi jmpulgar,
Which type of Metronic are you using? Angular/React/Default(jQyery)/Vue.
Regards, Keenthemes support
Hi, so I have followed your Laravel integration instructions and it worked smoothly, thanks for the ease steps. But I am stuck now on how to enable RTL version on my Laravel integration. Is there any easy way to switch from LTR to RTL ?
Thanks a lot!
Hello,
We have a documentation page for RTL version too. Please feel free to check t out https://keenthemes.com/metronic/?page=docs§ion=rtl-version
Regards, Mind
I’ve checked it already, but that doesn’t apply to Laravel. Or is it a step I should perform before copying the demo folder to Laravel proeject? It’s not quite clear.
I would suggest to do it this way: Build theme with RTL option separately and copy /dist/assets folder in your Laravel /public folder. This way might not be perfect, but it’s faster and much easier. Many users who don’t want to bother with mix integration just build theme separately and copy assets.
Ok I will try that, thank you for the tip. The big question is that I would like my application to be bilingual, meaning I need to the user to be able to switch from LTR to RTL. Can I make both coexist? and how?
Also, what impact would your option carry? Does that mean every update I should copy manually? In that case it will be easier if you include the option of “classic” theme (introduced in v6.1.0) in every sub version??
Thanks for your support!
Well, yes – that means manual copy is required with this method. I normally recommend this method in cases where users struggle with webpack implementation due to particular reasons. Other option is to learn technologies in depth along with theme structure, which takes time – that is why the “easy” option.
However we have scheduled an update for theme where we provide full Laravel assets integration for easier use. Just hang on
Regards, Mind
Great news! I’ll manage to use your way till you publish your Laravel integration. Many thanks!
When will you finally bring to mind the angular template? When will the angular version of KtDatatable finally appear?
Hi,
We are working a upcoming update and after the next major update we will schedule the KTDatatable porting to Vue,React, Angular frameworks. At the moment we can’t confirm the release date but we will do our best to release it as soon as possible.
Regards, Sean
I bought your product and downloaded all the files. When I open my Chrome browser under – Theme – > Default – > demo7 – > SRC – > index.html file, it is different from the demo I see when I open it on the website. I want to know why?
I just want to make his static HTML simple and practical
Hi Envato,
First of all thanks for choosing Metronic.
To use the classic version(with static precompiled assets) please email our support at support@keenthemes.com and you will get a download link.
If you like to use the buildable version(this is a new version that uses current development tools) you will need to generate the “dist” folder from “src” folder by installing and running the build tools in command line. All the required steps are explained in the documentation https://keenthemes.com/metronic/?page=docs and also in the below video tutorials:
1. Installation jQuery/Bootstrap Version Using Gulp: https://youtu.be/d-pSVf8Xazk 2. Your First Project: https://youtu.be/yu0O2Y2NXxc 3. Customization: https://youtu.be/7PG5Qbg0-gM
Please note that in the video tutorials refer to an older version of Metronic so some information can be inaccurate(file paths, folder structure, etc) but the overall instructions are valid for all Keen versions.
If you need any further help please let us know. For any further info you can also check our detailed theme documentation: https://keenthemes.com/metronic/?page=docs
Please follow us at http://twitter.com/keenthemes to stay updated.
Regards, Sean
Sticky Portlet
Please Help me For Sticky Portlet which plugin you used and where located
Hi ,
The sticky portlet is based on our custom JS code and you can locate it under “initPageStickyPortlet” function in your demos layout ini script “metronic\theme\default\demo1\src\assets\js\global\layout\layout.js”
Regards, Sean
I know I dont have support but I have downloaded the latest version and DEMO0 seems to be missing the global folder in the default assets/plugins folder.
Hi ,
First of all thanks for choosing Metronic.
In order to launch the theme you will need to generate the “dist” folder from “src” folder by installing and running the build tools in command line. All the required steps are explained in the documentation https://keenthemes.com/metronic/?page=docs and also in the below video tutorials:
1. Installation jQuery/Bootstrap Version Using Gulp: https://youtu.be/d-pSVf8Xazk or Webpack: https://youtu.be/gMUbZMdDRCo
2. Installation Angular 8 Version: https://youtu.be/48HeVjnKIqI
3. Your First Project: https://youtu.be/yu0O2Y2NXxc
4. Customization: https://youtu.be/7PG5Qbg0-gM
Please note that in the video tutorials refer to an older version of Metronic so some information can be inaccurate(file paths, folder structure, etc) but the overall instructions are valid for all Keen versions.
If you need any further help please let us know. For any further info you can also check our detailed theme documentation: https://keenthemes.com/metronic/?page=docs
Please follow us at http://twitter.com/keenthemes to stay updated.
PS: If you need the classic version with precompiled assets please email our support(support@keenthemes.com) your purchase key and we will send you a download link.
Regards, Sean
Infact it may be better for you to test it yourself. Extracting several of the templated (Although Ill use 8 as an example) if you load it up in a browser you fail to get CSS. I use Firefox and check the console and there are 4 or 5 files failing to load causing errors because they dont exist.
Hi,
As we explained to use the new version of Metronic you will need to install the build tools in order to generate the assets files from the src folder.
However If you need the classic version with precompiled assets please email our support(support@keenthemes.com) your purchase key and we will send you a download link.
Regards, Sean
I apologize, I did not see that. I will send an email
No problem. If you need any further help just let us know. All the best
Hi Currently we are using Angular 8 version of metronic theme, As part of optimzsing performance of our application we need to update it to angular 9, How can we update this project to Angular 9
Hi AMERICANMALAYALEE,
Angular version will be updated in 2 phases.
1) Next release (during 2 weeks) => Update till 9 without IVY support. (HTML+SASS structure will be updated too)
2) Next 3 releases (during next 2 months) => Update architecture of application (Will be removed overdated patterns/solutions) with IVY support (Goals are performance+reusable controls/services/directives+extensible).
If you don’t want wait, follow the official instructions https://update.angular.io/#8.0:9.0l3 and update by yourself.
Regards, Keenthemes support
Hi guys, i have a problem why when i download the package and run it i cannot find the Stylesheet ? can you please advice
Hi ,
First of all thanks for choosing Metronic.
In order to launch the theme you will need to generate the “dist” folder from “src” folder by installing and running the build tools in command line. All the required steps are explained in the documentation https://keenthemes.com/metronic/?page=docs and also in the below video tutorials:
1. Installation jQuery/Bootstrap Version Using Gulp: https://youtu.be/d-pSVf8Xazk or Webpack: https://youtu.be/gMUbZMdDRCo
2. Installation Angular 8 Version: https://youtu.be/48HeVjnKIqI
3. Your First Project: https://youtu.be/yu0O2Y2NXxc
4. Customization: https://youtu.be/7PG5Qbg0-gM
Please note that in the video tutorials refer to an older version of Metronic so some information can be inaccurate(file paths, folder structure, etc) but the overall instructions are valid for all Keen versions.
If you need any further help please let us know. For any further info you can also check our detailed theme documentation: https://keenthemes.com/metronic/?page=docs
Please follow us at http://twitter.com/keenthemes to stay updated.
PS: If you need the classic version with precompiled assets please email our support(support@keenthemes.com) your purchase key and we will send you a download link.
Regards, Sean
Can you actually reduce the bundle size because it’s 4-5mb per page load.
Hi
If you are using the gulp build tool, you can reduce the js bundle size from this assets config file. You can remove any plugins that you do not need for your project. /theme/default/demo1/tools/gulp.config.json gulp.config.json optional mostly for the 3rd party plugins bundled into plugins.bundle.js and plugins.bundle.css. The bundle size can be reduced.
Please take a look on this scss file include also. You may remove any widgets style that you don’t need or use. /theme/default/[demo]/src/assets/sass/global/_include.scss
This will reduce more size in bundle CSS.
Let us know if you need further clarifications.
Thanks
Hi there,
Just a follow-up reply for your question about optimizing the CSS/JS size:
I assume you are using the new Metronic 8 now has lots of components and it also extendeds the original Bootstrap components with customization and extra options.
To fully optimize your output JS/CSS files please refer to the below steps:
1) Remove unused 3rd-party plugins by excluding optional plugins from your gulp config or webpack config files: Gulp: https://youtu.be/UGDsQLADmaM Webpack: https://youtu.be/LIawCI5jfLU
2) Remove unused custom components SASS includes in “core\html\src\sass\components\components.scss” Please note that most of the components are used in layout and pages so before removing you will need to check the HTML code and look at the code references by the component css class names.
3) Rebuild your assets using gulp or webpack with “prod” build option to minify the output css/js files.
4) Enable gzip in your server to compress your css/js files right in your server(this allows 30-40% efficiency)
If you need any further help please let us know.
Regards, Sean
This item was featured on ThemeForest
Power Elite Author
Contact the Envato Market Help Team
