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 (13)
You are not actually facing an installation problem with Angular itself, because Angular CLI and your project are working correctly. The real issue is caused by a compatibility mismatch between angular-datatables and datatables.net when used with Angular 17 and TypeScript 5.2. The error occurs because newer versions of DataTables introduced a generic type Api<T>, while angular-datatables still expects the older non-generic Api type. Due to this mismatch, TypeScript throws an error during compilation even though the application builds successfully.
It looks like Angular CLI installed successfully, but you're still experiencing an issue when trying to run or use it. From the logs, Node and Angular CLI versions are showing correctly, which means the installation itself worked. luxepress.us The problem may be related to your project setup, missing dependencies inside the project folder, or a corrupted node_modules directory.
Using clinical decision rules or deciding on an approach ahead of time such as when to perform a thoracotomy in blunt traumatic cardiac arrest or when to obtain CT-A carotids in high-velocity trauma helps minimize cognitive load when it matters most. He also highlights the value of clearly sign-posting key decision points to maintain clarity during critical moments.
Your Angular CLI installation was actually successful. Although the CLI logo shows strange characters this is just a display issue in your Linux terminal and does not affect functionality. The CLI version 17.3.5 is installed correctly, and Node 20.9.0 is being used.
Installation issues really do feel like misalignments during a sometimes tiny overlooked steps cause big problems. I’ve also seen similar challenges in online education platforms where login setups or university portals require precise configuration to work smoothly. For example, platforms like vportal.me emphasize seamless access to academic resources, showing how important proper setup is in any digital workflow.
I know the feeling installation errors can be just as tricky as orcaslicer3d misalignments. Sometimes the solution is as simple as double-checking the setup or environment, just like re-slicing a model before printing. If you’re interested in exploring how 3D workflows manage similar troubleshooting.
Facing installation errors can be frustrating, just like craving Chick-fil-A nuggets but finding out they’re out of stock! A little troubleshooting (or patience) can fix both situations.
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ â–³ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|101 Games___/
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
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
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:
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:
I really need this design for my project, particularly the left side navigation bar.
I appreciate your help!
