Angular.JS on Firefox Junk after document element error

Question

When I test my index.html on Firefox with console.log it reads a strange error that says. I can't make the oage run on Google Chrome or IE.

junk after document element

This error is caused by the main.html page

<h1>This is my main</h1>

<h3>Scope value: {{ name }}  </h3>

I'm just learning angular.js, in fact my code is exactly like this tutorial I was following, but I can't figure out why is not working. Can anyone point me in the right direction and tell me:

Why am I getting the console log error: Junk after document error, and why can't I make ngview and templateURL work on my site?

Thanks!

My Plnkr Example

App.JS:

var myApp = angular.module('myApp', ['ngRoute']);



myApp.config(function ($routeProvider) {


             $routeProvider

             .when('/', {
                 templateUrl: 'pages/main.html',
                 controller: 'mainController'



             })

                   .when('/second', {
                 templateURL: 'pages/second.html',
                 controller: 'secondController'




             })


});

myApp.controller('mainController', ['$scope', '$log', function($scope, $log) {

                                    $scope.name = 'Main';


   }]);


myApp.controller('secondController', ['$scope', '$log', function($scope, $log) {

                                    $scope.name = 'Second';


   }]);

Index.HTML

<header>            <nav class="navbar navbar-default">             <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="/">AngularJS</a>
        </div>

        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><i class="fa fa-home"></i>Home</a></li>


            <li><a href="#/second"><i></i>Second</a></li>

        </ul>           </div>          </nav>      </header>

<div class="container">

    <div ng-view></div>
            </div>

Main.HTML

<h1>This is my main</h1>

<h3>Scope value: {{ name }}  </h3>

Second.HTML

<h1>This is my second</h1>

<h3>Scope value (on second page): {{ name }}  </h3>

Answer 1

the code does not run on IE or Chrome cause they don't have a built in localhost feature. Firefox does.

Regarding the Error, I am not 100% sure but I believe that it has to do with Angular HTML format support in the browser itself. I am taking the same course now and facing the same issue. But the app is working fine except for those errors in Firefox.

Chrome: no errors.

MS Edge: no errors.

IE: no errors

===========================

update

Try using Brackets text editor, and use the Live Preview feature.

Open the Index.HTML page in Brackets and hit the button on the top right corner.