Angular 2. Resource's fails to load in html page

Question

I am building an Angular 2 application. When I ng-serve the application, the css and image filed to load, with the following errors.

I have moved the css link above the js link, which did not work.
I have also added the full path to the files, instead of the existing.

Below is the project structure.

The html code for index.html

<html>
<head>
  <meta charset="utf-8">
  <title>Front</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">


  <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
  <script src="resources/js/semantic.min.js"></script>

  <link rel="stylesheet" type="text/css" class="ui" href="resources/css/semantic.css" />
  <link rel="stylesheet" type="text/css" class="ui" href="resources/css/main.css" />

</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

I have ran into similar issues before with Angularjs and my fix was to, keep moving and changing the links until it worked. Could someone explain why this happens and what are the best practices to avoid this happening in the future.

Looks like your dev-server doesn't want give you the resources. Something wrong with settings... — dhilt
– dhilt, Commented Sep 25, 2017 at 16:50

LLai · Accepted Answer · 2017-09-25 17:25:23Z

1

You have to add your resources to your assets field in the angular-cli.json. This makes them available when you do ng serve

"assets": [
    "resources"
]

This will copy your resources directory into the assets folder (in your build) for both ng build & ng serve. Now replace resources with assets in your paths

<script src="assets/js/semantic.min.js"></script>

<link rel="stylesheet" type="text/css" class="ui" href="assets/css/semantic.css" />
<link rel="stylesheet" type="text/css" class="ui" href="assets/css/main.css" />

As an alternative, I would add these files to the angular-cli.json instead of loading them in index.html

"styles": [
    "resources/css/semantic.css",
    "resources/css/main.css"
],
"scripts": [
    "resources/js/semantic.min.js"
]

I prefer this because those files will be bundled together by webpack, saving on some http requests. Plus I believe the json file is easier to read then index.html, when it comes to dependencies.

answered Sep 25, 2017 at 17:25

LLai

13.5k3 gold badges45 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DevRight Over a year ago

That worked perfectly, thank you for your quick reply.

Collectives™ on Stack Overflow

Angular 2. Resource's fails to load in html page

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related