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

The Metronic 8.1.8 Angular Demo1 fail to display web pages


Hello I have done as you said in the documentation
https://preview.keenthemes.com/metronic8/angular/docs/quick-start

cd angular/demo1
npm clear cache --force
npm install --legacy-peer-deps
ng serve

and then in the http://localhost:4200/auth/login , the web page show correctly, but when I enter in the http://localhost:4200/dashboard , the page is not rendered, all the images are not there and the page has lot of errors such this one

src_app_pages_dashboard_dashboard_module_ts.js:2 ERROR TypeError: Cannot read properties of undefined (reading 'name')
at UserInnerComponent_ng_container_0_Template (user-inner.component.html:123:11)
at executeTemplate (core.mjs:10534:9)
at refreshView (core.mjs:10419:13)
at refreshEmbeddedViews (core.mjs:11434:17)
at refreshView (core.mjs:10443:9)
at refreshComponent (core.mjs:11480:13)
at refreshChildComponents (core.mjs:10210:9)
at refreshView (core.mjs:10469:13)
at refreshComponent (core.mjs:11480:13)
at refreshChildComponents (core.mjs:10210:9)

Can you help me to fix that?

Best regards,
Paulo


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 (6)


Hey Paulo,

I feel your frustration with the Metronic 8.1.8 Angular Demo1 issues. Debugging can be a real puzzle, but let's try to crack it together.

First off, that error you're seeing in 'user-inner.component.html' seems to be related to an undefined 'name' property. It's crucial to trace where this property is supposed to be defined and ensure it's populated correctly. Double-check your data sources and make sure everything is set up as expected. Try checking it out with these guys: https://andersenlab.com/services/web-development

Also, when dealing with rendering problems, the browser's developer console is your best friend. Check for any console errors or failed network requests when you try to load the dashboard. This might give you more clues about what's going wrong.

If you've already tried reinstalling dependencies and clearing the cache without luck, diving into the specifics of the error messages and your code structure should bring you closer to a solution. Hang in there, and feel free to share more details if you need further assistance.



Hello Paulo,

I'm glad to hear that you were able to resolve the issue by clearing the cache in your Google Chrome browser. Cache issues can sometimes interfere with the proper loading of web pages, so clearing the cache can often help in such cases.

If you have any further questions or need additional assistance, feel free to ask.

Best regards,
Faizal


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.

Hi Paulo,

I apologize for the continued issues you're facing with the Metronic 8.1.8 Angular Demo1.

If removing the node_modules folder and reinstalling the dependencies using npm install or yarn did not resolve the problem, it's a good idea to debug and understand the root cause.

Here are a few suggestions to help you with the debugging process:

Check the console: Open the browser's developer console and look for any error messages or warnings that might provide insights into the issue. Pay attention to any specific file or component mentioned in the error messages.

Review the code: Take a closer look at the component mentioned in the error message (UserInnerComponent) and the template file (user-inner.component.html). Check if there are any issues with accessing the "name" property or any other undefined properties.

Verify data binding: Ensure that the necessary data is properly passed to the component and that the bindings in the template are correctly referencing the data.

Check network requests: Use the Network tab in the browser's developer console to check if the images or any other required assets are being loaded correctly. Look for any failed requests or missing assets.

By following these steps, you should be able to identify the specific cause of the issue and work towards resolving it. If you encounter any specific error messages or need further assistance, feel free to provide more details, and I'll be happy to help.

Best regards,
Faizal



Hello Faizal,

Thanks again for the quick anwser.

I was able to put the website working, I just clean all the cache of my google chrome browser, then reload the website, and now is working.

Best regards,
Paulo



Hello Paulo,

I apologize for the inconvenience you're experiencing with the Metronic 8.1.8 Angular Demo1.

Try to remove node_modules folder, then retry with installation using "npm install" or "yarn" command.

Try also updating the Angular dependencies to the latest versions. You can do this by running the following command in the project directory:

ng update

This will update the Angular dependencies to their latest compatible versions.

Thanks



Hi Faizal,

Thanks for the reply, but it still not working.

I will try to debug to understand what is the problem.

Best regards.
Paulo


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  :(