Error at installing
Hello support. I got an error at installing. I am stuck. Would you help me to solve the issue?
alirio@alirio-PC:~/Desktop/demo1$ npm install -g @angular/cli
added 236 packages in 8s
44 packages are looking for funding
run `npm fund` for details
alirio@alirio-PC:~/Desktop/demo1$ node -v
v20.9.0
alirio@alirio-PC:~/Desktop/demo1$ ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ â–³ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 17.3.5
Node: 20.9.0
Package Manager: npm 10.1.0
OS: linux x64
Angular: 17.3.5
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, material, platform-browser
... platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1703.5
@angular-devkit/build-angular 17.3.5
@angular-devkit/core 17.3.5
@angular-devkit/schematics 17.3.5
@schematics/angular 17.3.5
rxjs 7.8.1
typescript 5.2.2
webpack 5.91.0
zone.js 0.14.4
alirio@alirio-PC:~/Desktop/demo1$ npm clear cache --force
npm WARN using --force Recommended protections disabled.
Unknown command: "clear"
To see a list of supported npm commands, run:
npm help
alirio@alirio-PC:~/Desktop/demo1$ npm install --legacy-peer-deps
up to date, audited 1241 packages in 2s
170 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
alirio@alirio-PC:~/Desktop/demo1$ ng serve
✔ Browser application bundle generation complete.
Initial chunk files | Names | Raw size
vendor.js | vendor | 4.10 MB |
styles.css, styles.js | styles | 2.28 MB |
polyfills.js | polyfills | 336.47 kB |
scripts.js | scripts | 173.06 kB |
main.js | main | 108.89 kB |
runtime.js | runtime | 14.45 kB |
| Initial total | 7.00 MB
Lazy chunk files | Names | Raw size
src_app__metronic_layout_index_ts-src_app__metronic_layout_layout_module_ts-src_app__metronic-5e1dbc.js | _metronic-layout-layout-module | 2.22 MB |
default-src_app_modules_crud_crud_module_ts-node_modules_moment_moment_js.js | user-user-module | 613.51 kB |
src_app_pages_user_user_module_ts.js | user-user-module | 321.25 kB |
src_app_modules_account_account_module_ts.js | modules-account-account-module | 228.85 kB |
node_modules_sweetalert2_dist_sweetalert2_all_js.js | sweetalert2 | 130.13 kB |
default-src_app__metronic_kt_components_index_ts.js | modules-errors-errors-module | 113.06 kB |
src_app_modules_wizards_wizards_module_ts.js | modules-wizards-wizards-module | 105.02 kB |
src_app_modules_auth_auth_module_ts.js | modules-auth-auth-module | 79.43 kB |
src_app_modules_profile_profile_module_ts.js | modules-profile-profile-module | 69.10 kB |
src_app_modules_widgets-examples_widgets-examples_module_ts.js | modules-widgets-examples-widgets-examples-module | 65.57 kB |
src_app_modules_apps_chat_chat_module_ts.js | modules-apps-chat-chat-module | 58.55 kB |
src_app_pages_builder_builder_module_ts.js | builder-builder-module | 44.38 kB |
src_app_pages_role_role_module_ts.js | role-role-module | 44.10 kB |
src_app_pages_permission_permission_module_ts.js | permission-permission-module | 30.38 kB |
src_app_modules_errors_errors_module_ts.js | modules-errors-errors-module | 18.01 kB |
src_app_pages_dashboard_dashboard_module_ts.js | dashboard-dashboard-module | 15.29 kB |
common.js | common | 4.67 kB |
Build at: 2024-04-22T09:45:01.111Z - Hash: dc4bc5f65e76cc55 - Time: 10791ms
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 = {};
~~~~~~~~~~
.....
✖ Failed to compile.
Replies (5)
Hi Alirio Lancheros
It looks like there was an update to the DataTable plugin that requires some changes to your code.
You'll need to change your import statement and how you define the datatableConfig variable. Here's how you can update your code:
Before:
datatableConfig: DataTables.Settings = {};After:
import { Config } from "datatables.net";
datatableConfig: Config = {};Please make these changes in your code, and the issue should be resolved. Or you can download the updated angular demo1 from here:
https://drive.google.com/file/d/1AVPrkAShU6d4KNLBlz7tJuOEN2mBhpW3/view?usp=share_link
If you need further assistance, feel free to ask.
Hi Faizal. Thank you for your help. Your solution worked. The matter is that I need the following demo for angular 17. See the image below by clicking the link below:
https://drive.google.com/file/d/1M18iT2Bu5XogPEO8Dg4Go-PWAPZjRYBk/view?usp=sharing.
I really need this design for my project, particularly the left side navigation bar.
I appreciate your help!
Hi Alirio Lancheros
You're welcome! To achieve the design you're looking for in your Angular 17 project, refer to the HTML version of the demo you mentioned. Copy the HTML code for the left-side navigation bar and customize the menu logic to work in your Angular project. It's important to note that the customization must be done manually, as no automation is available for changing the layout. If you encounter any specific issues during the implementation, please ask for further assistance!
Hi Faizal. I wish it could be as easy as you said: "refer to the HTML version of the demo you mentioned. Copy the HTML code for the left-side navigation bar and customize the menu logic to work in your Angular project". In fact, I did it but it didn't work. Let me tell you the details so that you can help me.
I am using angular demo1 app. This app is so close to what I need for my project. I just need some mild changes. As I got the Demo1 from factory, in light mode, its menu sidebar is dark (the rest is light) and in dark mode, everything is dark.
See the demo1 factory I am talking about on https://preview.keenthemes.com/metronic8/demo1/index.html?mode=light
So far, all works fine. Since I want everything on Demo1 to be light (including the menu sidebar) on light mode and everything to be dark on dark mode, I changed on src/app/_metronic/layout/core/layout.service.ts file:
const defaultBaseLayoutType: LayoutType = 'dark-sidebar';
const defaultLayoutConfig: ILayout = DarkSidebarConfig;
to
const defaultBaseLayoutType: LayoutType = 'light-sidebar';
const defaultLayoutConfig: ILayout = LightSidebarConfig;.
Now demo1 is even closer to what I want. In light mode, everything is light and in dark mode, everything is dark.
THE PROBLEM:
The problem comes up as I want to change anything of the sidebar when demo1 is in light mode; ie, to change the background color to, let's say, green, because the change is displayed on the dark mode as well, breaking colors on the theme dark mode. Diving deep into the issue I found that it comes from the fact that the light sidebar is being used for both demo1 dark mode and light mode. At inspecting on the browser you can see:
[data-kt-app-layout=light-sidebar] .app-sidebar {
background-color: var(--bs-app-sidebar-light-bg-color);
border-right: 1px solid var(--bs-gray-200);
},
in the <app-sidebar> tag. In the theme light mode the background-color is #f1f1f4 and in the dark mode the background-color is #0d0e12.
What I need now is that changes made on the sidebar menu when theme's mode is light, do not be reflected on the sidebar menu when the theme's mode is dark. I tried to solve it without success. I really appreciate your help .
Hi Alirio Lancheros
Apologise for the delay in response. Could you please try to change from the sass config file:
Open the /src/assets/sass/layout/_variables.custom.scss file and update the variables for the sidebar background color:
$app-sidebar-light-bg-color: $body-bg; // Use light background color
$app-sidebar-light-bg-color-dark: $coal-500; // Use dark background colorReplace $body-bg and $coal-500 with the actual colors you want to use
