AngularJS启用Clean URL时出现[$compile] tpload错误求助

Hey there, let's figure out why you're hitting that [$compile] tpload error when setting up clean URLs in AngularJS. This error usually means Angular can't load one of your template files, and there are a few common culprits we can check:

1. You Have Duplicate otherwise Route Configurations #

Looking at your JS code, you've defined $routeProvider.otherwise twice:

$routeProvider.otherwise({redirectTo: '/page-404'});
// ... later ...
$routeProvider.otherwise({ redirectTo: '/datatables' });

The second otherwise overrides the first, which can cause unexpected routing behavior. Let's clean that up by keeping only one:

.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
  $locationProvider.html5Mode(true);
  
  $routeProvider
    .when('/', {redirectTo: '/datatables'})
    .when('/documentation/index', { templateUrl: 'documentation/index.html' })
    .when('/datatables', { templateUrl: 'datatables.html' })
    .otherwise({ redirectTo: '/datatables' }); // Only one otherwise rule here
} ]);

2. Your Template Paths Might Be Incorrect #

The tpload error often pops up when Angular can't find the template file specified in templateUrl. Let's verify these paths:

• Check if datatables.html exists in your project's root directory (same level as your main index.html).
• Check if documentation/index.html exists in a documentation folder at your project root.

You can test this directly in your browser: try visiting http://your-domain/datatables.html and http://your-domain/documentation/index.html. If either returns a 404, adjust the templateUrl paths to match where your files are located (e.g., if templates are in a templates folder, use 'templates/datatables.html').

3. Server Configuration is Missing for HTML5 Mode #

When using html5Mode(true), your server needs to redirect all non-static requests to index.html. Without this, if you refresh a page like /datatables, your server will look for a file named datatables (which doesn't exist) and return a 404—this breaks Angular's ability to load templates.

Here's how to fix this for common servers:

Apache (add to .htaccess): #

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Nginx (add to your server block): #

location / {
  try_files $uri $uri/ /index.html;
}

4. Verify Your <base href> is Correct #

Your <base href="/"> assumes your app is deployed at the root of your domain. If your app is deployed in a subfolder (e.g., http://localhost:8080/my-app/), update the base href to match:

<base href="/my-app/">

A mismatched base href can throw off all your template and asset paths.

Final Testing Steps #

1. Apply the fixes above (clean up routes, verify paths, configure server, check base href).
2. Restart your server to apply any configuration changes.
3. Reload your app and test navigating between routes—your tpload error should be gone!

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