Javascript file not loaded properly

Question

I have a good html, css template (source code here ).

I am going to use this template in my angular2 application (source code here ).

I got the html template from this repository ( index.html ).

My problem is in angular2 source code

• You need a clone angular source.
• Run npm install
• Run ng serve

Unfortunately, it seems that <script src="assets/js/main.js"></script> in index.html not added properly. Although there are no errors in the console, a broken menu . I know this problem occurs when main.js is not suitable.

Here is the correct html page:

Here is the angular page ( broken title and menu):

The codes are identical, but I decomposed the html-template into 3 components (title, menu and application (main content)).

Answer 1

Instead of trying to figure out what happened to your CSS, I took the original template, converted it to Angular 2 with angular-cli and fixed CSS issues. It all works now, and the full source is at https://github.com/Boyan-Kostadinov/angular2-miminium

Answer 2

When you fell apart index.html , you probably also changed some file paths.

The relative path will go from src="assets/js/main.js" to something like src="../assets/js/main.js" .

Turning ../ into a path returns from the current directory to the next level up. Since you have it now, the browser is looking for the assets directory in what I assume you split as the htmlComponents directory.

Consider using the absolute path to main.js , at least to diagnose the problem.

Answer 3

I had a similar problem with the same file. In my case, I have a complex application that is being developed in stages. I installed the Angular seed in a subdirectory. Due to my file structure, when I start npm start , the server on which the server is running has poor relative link locations. For example, in the screenshot below, you will see that the application is trying to find style.css in http: // localhost: 3000 / medface / RecordWriter / styles.css ; however, it should look at http: // localhost: 3000 / styles.css , since the root of the web server created by npm start is in / medface / RecordWriter /.

As for your project. The key to detecting a problem with your link is opening the developer panel and checking the actual network request. If you share screenshots, we can help you better understand your copy.

What worked for me

In my case, I reconfigured my local web server to handle any non-reserved pages in the Angular2 folder and returned the index instead. When I start npm start , I close the open browser page and use my regular web server. Instead of viewing my application on localhost: 3000, I am viewing the application at localhost / medface / RecordWriter / (which is equivalent to localhost: 80 / medface / RecordWriter ).

The immediate side of my temporary approach is that the page should be updated before changes occur, but it reliably and reliably loads all resources and allows my Angular2 code to work along with some old code base in other areas of the website that have not been converted to Angular2 . Regardless, this may work for you.