Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript AngularJS Basics (1.x) Getting Started with Angular Setting Up Your First Angular App

Terence Davis
Terence Davis
4,819 Points
Posted by Terence Davis
Terence Davis
4,819 Points

Error when previewing Default Angular Basics project

Hi, I've been trying to follow along with the videos, but keep getting an error saying that a resource is not available that the code is trying to download.

The code that I have it pretty much what comes up when you first launch Workspace for this module and I can't even find the reference to the resource that it is looking for.

Jake Lundberg
Jake Lundberg
13,965 Points
Jake Lundberg
Jake Lundberg
13,965 Points

Can you post the error your are getting, exactly as it is being displayed? and also your code so we can see where the issue is?

Terence Davis
Terence Davis
4,819 Points
Terence Davis
Terence Davis
4,819 Points

I'm not sure how to put images on here to list the screenshots I took, but the error says:

"Failed to load http://port-80-n46ba806ku.treehouse-app.com/favicon.ico resource: the server responded with a status of 404 (Not Found)"

My code in index.html file is:

<!doctype html>
<html lang="en">
<head>
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link href='styles/main.css' rel='stylesheet' type="text/css">
</head>
<body ng-app="todoListApp">

  <hello-world></hello-world>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script src="vendor/angular.js" type="text/javascript"></script>
  <script src="scripts/app.js" type="text/javascript"></script>
  <script src="scripts/hello-world.js" type="text/javascript"></script>
</body>
</html>

My code in app.js is:

angular.module("todoListApp", []);

and my code in hello-world.js is:

angular.module('todoListApp');
.directive('helloWorld', function() {
  return {
    template: "This is the hello world directive!"
  };
});

2 Answers

Ryan Chatterton
Ryan Chatterton
5,914 Points
Ryan Chatterton
Ryan Chatterton
5,914 Points

The error you are seeing is around the favicon (favicon.ico) because when you preview, the browser goes to the '/' and there is nothing there. The browser has "/" cached to go to and load the /favicon.ico.

A quick solution would be to download and add a favicon.ico file. (save image as) http://teamtreehouse.com/favicon.ico Then File Upload the favicon.ico file to the root of the project. But as this section has nothing yet, the error shouldn't cause an issue.. yet.

Andrew VanVlack
Andrew VanVlack
20,155 Points
Andrew VanVlack
Andrew VanVlack
20,155 Points

It looks like you are loading angular twice. One as a local copy and a second from a CDN.

If you still have a copy in your vendor files, remove the CDN:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

Other wise remove the other link to the local copy.

Terence Davis
Terence Davis
4,819 Points
Terence Davis
Terence Davis
4,819 Points

I added that line of code after reading the Teachers notes for the module and thought that maybe there was a resource in that link that would correct the error I was getting, it didn't work.