AngularJS与Bower部署问题：控制台报Unexpected token <语法错误

Hey there, let's tackle that AngularJS error you're facing — uncaught SyntaxError: Unexpected token < in angular.js:1 is a super common gotcha, and I’ve helped tons of folks fix it. Here’s what’s going on and how to fix it:

First, let’s break down the error: Your browser is trying to load the AngularJS library file (angular.js), but instead of getting valid JavaScript code, it’s receiving an HTML file (like a 404 error page or your main index.html). Since HTML starts with <, the JavaScript parser throws a fit because it doesn’t expect that at the start of a JS file.

Let’s walk through the most likely fixes step by step:

• Double-check your AngularJS file path

  • If you’re using a local copy of AngularJS: Make sure the src attribute in your <script> tag matches the actual file location. For example, if angular.js lives in a lib/angular folder and your index.html is in the root, your tag should be <script src="lib/angular/angular.js"></script> — not a misspelled or incorrect path.
  • If you’re using a CDN: Verify the CDN link is correct. A reliable official CDN link is https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js — avoid typos or outdated links.

• Use a local web server instead of opening files directly

  • Opening HTML files via file:// protocol can cause path resolution issues in some browsers. Spin up a quick local server:
    • For Python 3: Run python -m http.server in your project folder, then visit http://localhost:8000/index.html
    • For PHP: Run php -S localhost:8000 and access the same URL
  • This ensures your file paths are parsed correctly, just like they would be on a live server.

• Check your server configuration (if using one)

  • If you’re using a backend server or SPA routing setup, make sure it’s not redirecting requests for static files (like angular.js) to your index.html file. This is a common issue with frameworks that handle client-side routing — you’ll need to configure exceptions for static assets.

• Verify your script load order and app.js syntax

  • Always load AngularJS before your app.js — the order matters! Your script tags should look like this:

    <script src="path/to/angular.js"></script>
    <script src="app.js"></script>
    

  • Ensure your app.js doesn’t have syntax errors or stray HTML code. A basic valid app.js looks like this:

    var myApp = angular.module('myApp', []);
    myApp.controller('MyController', function($scope) {
        $scope.greeting = 'Hello from AngularJS!';
    });
    

• Inspect the network request

  • Open your browser’s dev tools (F12), go to the Network tab, and refresh the page. Find the request for angular.js:
    • If the status code is 404: Your path is wrong — fix it.
    • If status is 200 but the response is HTML: Your server is sending the wrong file — check server config or path.

If you’ve tried all these and still run into issues, feel free to share the <script> section of your index.html and the full content of your app.js — that’ll help narrow down the problem further.

内容的提问来源于stack exchange，提问作者Babe