Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

Metronic 8.2.5 & Node.JS - Demo1 & Demo30 issues


Good morning,

To begin with, I am using the "Getting Started" (Located: https://preview.keenthemes.com/nodejs/metronic/docs/getting-started) to look at the base application. It has been some time and I was wanting to refresh myself; however, I've hit a snag.

The first time I installed this I used the full download package from "ThemeForest" then extracted the nodejs package and attempted to follow the steps. I used the following procedure:

1. cd starterkit/_keenthemes/tools
2. npm install
3. gulp --demo1
4. ../../ (starterkit)
5. yarn
6. npm run start

I can then access HTTP://localhost:3000 using my browser and the demo dashboard loads just fine. Here is the snag. Every link goes back to the default dashboard. Pages, layouts, apps, ... any link I click takes me back to the "Default" dashboard. The URL at the top changes, for instance to http://localhost:3000/?page=dashboards/marketing, but it is still the "Default" dashboard.

I thought I did something wrong so I wiped away the directory and started over but tried --demo30 this time, but still got the same result.

I again blew the directory away and this time I used this procedure:

1. cd starterkit/_keenthemes/tools
2. npm install
3.a. Modified starterkit/_keenthemes/tools/package.json and removed "type": "Module"
3.b. npm run build --demo1
4. ../../ (starterkit)
5. yarn
6. npm run start

When trying to use this procedure, I get to 3.b. and I get webpack compiled with 2 errors.


//========== Begin Error One ==========//
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
â•·
9 │ @import "../../../tools/node_modules/bootstrap/scss/bootstrap";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
..\src\demo1\sass\components\components.scss 9:9 @import
..\src\demo1\sass\style.scss 9:9 root stylesheet
//========== End Error One ==========//



//========== Begin Error Two ==========//
Generated code for A:\WebAppProjects\ngr_apps\app_two\ngrwebmanagmentapp\starterkit\_keenthemes\tools\node_modules\css-loader\dist\cjs.js!A:\WebAppProjects\ngr_apps\app_two\ngrwebmanagmentapp\starterkit\_keenthemes\tools\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[1].use[2]!A:\WebAppProjects\ngr_apps\app_two\ngrwebmanagmentapp\starterkit\_keenthemes\src\demo1\sass\style.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nCan't find stylesheet to import.\n ╷\n9 │ @import \"../../../tools/node_modules/bootstrap/scss/bootstrap\";\n │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n ╵\n ..\\src\\demo1\\sass\\components\\components.scss 9:9 @import\n ..\\src\\demo1\\sass\\style.scss 9:9 root stylesheet");
//========== End Error Two ==========//


Anyone have any idea what I might be doing incorrectly here?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (8)


Hi Jason Macer

Apologise for the inconvenience. For the Angular issue, please refer to this post for the workaround.

https://devs.keenthemes.com/question/error-at-installing-metronic-angular-theme

Or you can download the updated angular demo1 from here:

https://drive.google.com/file/d/1AVPrkAShU6d4KNLBlz7tJuOEN2mBhpW3/view?usp=share_link


Thank you



@faizal, thank you for the link to the work around; however, that did not quite work correctly, so I went ahead and just downloaded the new version and was able to install and compile to run it.

I do have a question, and it pretty well relates to the above question for react, and missing "examples." In this angular demo1 I see that in the src > app > modules > wizards there is a "steps" option, but on the links listed under pages > wizards there is only horizontal and vertical, but no steps. Is there a reason that things like this are missing?

Like with the above-referenced node.js demo 1, there are all these links and non-links for samples and examples that just do not work. Part of the biggest reason behind us going this route is that you supposedly had all of these examples and samples, but when we try to start using them they just don't exist. Is that going to get addressed/resolved?

Thank you,

Jason



Hi Jason Macer,

The /src/app/modules/wizards/components/steps folder contains the content of the steps used on Horizontal and Vertical wizard pages.

You can find our React demo1 preview page here https://preview.keenthemes.com/metronic8/react/demo1/dashboard.

Currently, we are working on a new Metronic version which will have more pre-built pages and will be based on React Material UI.

You can find Metronic roadmap for 2024 here:
https://devs.keenthemes.com/question/metronics-roadmap-for-2024

If this prevents you from using Metronic further you can request a refund using this form. 100% money back is guaranteed.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Update: I was able to get the node package to build with npm run build --demo1

There is an error in _keenthemes/src/demo1/sass/components/components.scss

Line 9 is: @import "../../../tools/node_modules/bootstrap/scss/bootstrap";

Line 9 SHOULD BE: @import "../../../../tools/node_modules/bootstrap/scss/bootstrap";

One of the "../" is missing from the @import statement.

The packages builds then you can go to the starterkit directory and "yarn" followed by "npm run start" and the app runs on port 3000; however, it is still all one link and none of the other dashboards are viewable. All links go directly to the "default" dashboard.



Thank you for your feedback and for sharing the solution you found! We will make sure to address this issue and fix it in future updates. If you encounter any further issues or have any more feedback, please don't hesitate to let us know.



The starter kit provided with the template is intended to offer a few pages for demonstration purposes. For additional pages and functionality, you can refer to the HTML version of the template. The HTML version provides more pages and components that you can integrate into your application by copying the HTML code and adapting it to create your components.



@falzal, thank you for the reply, though I do have to say this is interesting as the links all show that they are calling the various pages, but nothing is there. WIth most of the other themes, those links are activate and gives you the various dashboard options as references and shows you how it works; however, with the react there is nothing other than the default dashboard, so you do not see how any of that works.

Thank you, again.



Update.
I was unable to update my posting from earlier, so I am going to list my system environment here:

OS: Windows 10 Pro
Node: v18.18.0
Npm: 10.1.0
angular/cli: 17.3.6
node-gyp: 6.1.0
nodemon: 3.0.1
pkg: 4.4.2
utils: 0.3.1
yarn: 1.22.22

I am also using JetBrains' Webstorm IDE.

I have also now tried deploying the angular demo1, and when I use the instructions provided in the docs.

With angular demo1 I get to "ng serve" and it starts to compile but then there are a series of errors:


  • Error: node_modules/angular-datatables/src/angular-datatables.directive.d.ts:31:25 - error TS2314: Generic type 'Api<T>' requires 1 type argument(s).
    31 dtInstance: Promise<Api>;
  • Error: src/app/modules/crud/crud.component.ts:17:29 - error TS2503: Cannot find namespace 'DataTables'.
    17 @Input() datatableConfig: DataTables.Settings = {};
  • Error: src/app/modules/crud/crud.component.ts:30:14 - error TS2503: Cannot find namespace 'DataTables'.
    30 dtOptions: DataTables.Settings = {};
  • Error: src/app/modules/crud/crud.component.ts:71:60 - error TS2503: Cannot find namespace 'DataTables'.
    71 this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => dtInstance.ajax.reload());
  • Error: src/app/pages/permission/permission-listing/permission-listing.component.ts:22:20 - error TS2503: Cannot find namespace 'DataTables'.

    22 datatableConfig: DataTables.Settings = {};
  • there are too many to copy/paste here




Please see my first message for my environment.

Thank you,

J
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(