The Javascript file failed to load correctly

After finding a beautiful HTML and CSS template (see source code here), I decided to integrate it into my Angular 2 app (check out the source code here).

The HTML template was sourced from this repository (index.html).

However, the issue lies within the Angular 2 source code

  1. You must clone the angular source.
  2. Execute npm install
  3. Run ng serve

Unfortunately, it appears that the 

<script src="assets/js/main.js"></script>
in index.html is not being added correctly. Even though there are no errors in the console, the left menu is malfunctioning. This problem usually arises when main.js does not appropriately align.

This is what the correct html page should look like:

https://i.sstatic.net/kddVc.png

And this is the Angular page with a broken header and menu:

https://i.sstatic.net/FPsix.png

Despite the fact that the codes are identical, I have separated the HTML template into 3 components (header, menu, and app for main content).

csshtmlangular

Answer №1

Instead of spending time troubleshooting your CSS issues, I decided to take the original template and transform it into an Angular 2 project using angular-cli. After addressing all the CSS problems, everything is now functioning perfectly. You can find the complete source code at https://github.com/Boyan-Kostadinov/angular2-miminium

Answer №2

After dismantling index.html, it's probable that some file paths were inadvertently modified.

The original relative path src="assets/js/main.js" may have been changed to src="../assets/js/main.js".

Adding ../ to the path indicates a move up one directory level. The current setup implies the browser is searching for the assets directory within an assumed htmlComponents directory.

For troubleshooting, consider using an absolute path to main.js.

Answer №3

I encountered a similar issue with a file in my complex application development process. The Angular seed was installed in a subdirectory, causing incorrect relative link locations when running npm start. For instance, the application was looking for style.css at http://localhost:3000/medface/RecordWriter/styles.css, instead of http://localhost:3000/styles.css as it should have been due to the web server root being created at /medface/RecordWriter/ by npm start.

https://i.sstatic.net/Tl8kB.png

To troubleshoot similar issues in your project, inspect network requests in the developer panel and share screenshots for assistance.

Solution that Worked for Me

To address this issue, I reconfigured the local web server to serve unserved pages from the Angular2 folder by returning the index file. After running npm start, I close the opened browser page and use my regular web server to view the application at localhost/medface/RecordWriter/ (or localhost:80/medface/RecordWriter). This approach ensures predictable resource loading, though changes require a manual refresh, allowing compatibility between Angular2 code and older sections of the website still using different technologies.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Elements on the left side are not properly aligned

I've successfully coded the head banner and news containers below the header. However, I'm facing an issue with my left menus: Instead of aligning properly with the header and news containers, they are overlapping them. Here is the HTML Code: ...

htmlcsscss-float

What is the most effective way to dynamically display or conceal sections of a string in Angular?

In the process of creating a template, I am faced with the challenge of constructing a URL string using various fields from a JSON response. The issue arises when some sections of the string may be empty, such as not having a value for 'path2', f ...

htmlangularangular-ng-if

How to identify an element based on the text content of the element that follows it using XPath

I am working with this specific piece of HTML code <div class="a-expander-content a-spacing-base a-expander-inline-content a-expander-inner a-expander-content-expanded" style="" aria-expanded="true"> <form id="pp-yT-23" class="pmts-add-cr ...

javahtmlseleniumxpath

Do input fields lacking a name tag get sent to the server during submission?

Imagine a scenario where there are two input fields within a form: <form class="my-form" method="POST" action="/my/receiver"> <input id="input1" name="inputfield1" /> <input id="input2" placeholder="More input" /> <input ...

htmlhttp

What is preventing Google Chrome from automatically breaking?

I seem to have made a mistake in this document, but I can't quite pinpoint what it is. There isn't much content in here yet as I am still in the process of building it for a WB. Interestingly, it works in Internet Explorer but not in Google Chrom ...

cssgoogle-chromehtmlpre

Using jQuery to transform HTML data attributes into an array

I have a set of stacks, each containing an h1, h2, and some paragraph text. Each element within the stack has a data-style attribute with the font family name as its value. For example: <h1 data-style="arial">Heading 1</h1> My goal is to use ...

jqueryarrayshtml

Issue arises during initialization with Slick.js

I recently attempted to implement the slick.js function on my webpage by following the guidelines provided on . I copied the "center mode" function as my Jquery function, but unfortunately, the arrows/buttons and nav-docs were not generated in my slideshow ...

jqueryhtmlslick.js

The benefits of exporting a component from one module and using it in another module

After putting in long hours trying to figure this out on my own, I've finally decided to seek help from the community. Thank you in advance for any assistance! I have a Web Projects Module that utilizes a Webpage Component. Within the Webprojects Mod ...

angulartypescriptangular-directiveangular-componentsangular-module

Identical HTML elements appearing across multiple DOM pages

My question might seem silly, but I'm facing an issue. I have several HTML pages such as index.html and rooms.html, along with a main.js file containing scripts for all of these pages. The problem arises because I have variables like const HTMLelemen ...

javascripthtmldomcode-separation

Exploring Array Iteration with RxJS' Filter and Map Functions

Can someone help me figure out the correct way to iterate over an array using map and filter in my Angular project? Currently, both methods expect a single value, but I am dealing with an Observable that contains an array. Any guidance on how to do this co ...

angularrxjsrxjs-pipeable-operators

Enhancing Dropdown Functionality Using Jquery

Hey there, I am looking to create a dropdown list/menu similar to the one shown in this image: (a screenshot). Could you please guide me on how to achieve this? Can it be done using JQUERY? Thank you in advance, Andrea ...

jquerycssinterfacemenudrop-down-menu

Using CSS transition on the height property does not produce the desired effect

I'm currently working on a menu interaction that activates on click. Here is the code snippet for reference: let btn = document.querySelector('.trigger'); let icons = document.querySelector('.icons'); let labels = document.query ...

javascripthtmlcssmenuinteraction

Although hiding and showing elements in jQuery is quick, the rendering engine is too sluggish

Experiencing a performance problem when toggling the visibility of all "tr.content" elements within a complex dom structure like this:    <tbody class="collapsible">        <tr class="handler">            <td>Collaps ...

javascriptjqueryhtmlbrowserperformance

Is there a way to enable ad-block plugins to effectively hide an entire div from visitors, preventing the website from appearing incomplete?

I have set up a div element specifically for ads, giving it some padding and a border to make it stand out. Surprisingly, this approach is not counter-productive. However, considering the percentage of users who use adblock, I am concerned that they will ...

csshtmladsadblock

The React sidebar expanded to cover the entire screen width

As I work on creating a dashboard page that will display a sidebar after the user logs in, I am facing an issue where the sidebar is taking up the full width of the page, causing my Dashboard component to drop to the bottom. You can view the image link of ...

cssreactjsreact-routerreact-router-domsidebar

Leverage the navigator clipboard feature to save an image in PNG format from a canvas

I've been attempting to save a canvas blob to the navigator clipboard graphicDiv.addEventListener( 'click', (event) => { const canvas = <HTMLCanvasElement> document.getElementById('canvas'); can ...

javascripthtmltypescriptchart.jsangular12

Implementing a Flexible YouTube Video Display with API Integration

Is there a way to recreate this design? Check out the DEMO HTML <header role="banner"> <div id="wrapper-video"> <video poster="" autoplay loop> <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/156843/cut.mp4" ...

phphtmlcssyoutube

"Mute printing of a PDF file that is integrated within the document

I’m working on a web page that includes an embedded PDF file. Here’s a snippet of my code: <embed type="application/pdf" src="path_to_pdf_document.pdf" id="pdfDocument" width="100%" height="100%"> </embed> To print the ...

javascripthtmlpdfacrobat

Struggling with implementing Angular and TypeScript in this particular method

I'm dealing with a code snippet that looks like this: myMethod(data: any, layerId: string, dataSubstrings): void { someObject.on('click', function(e) { this.api.getSomething(a).subscribe((result: any) => { // ERROR CALL 1. It ...

javascriptangulartypescript

switching between div and fixed positioning for lightbox functionality

I am working on an HTML file <html> <body> <div #main> <a click to open lightbox> <img> <more images> </a> </div> </body> </html> After the lightbox opens, the code looks like this: <html&g ...

jquerycss