My goal is to streamline my routing process with AngularJS without having to duplicate route specifications in both Express and Angular. To achieve this, I set up a "catch all" route as shown below:
app.use('/api', api); // handling server-side functionality
app.use(express.static(__dirname + '/public')); // serving static files
app.get('*', function (req, res) { // managing Angular routes
res.render('index');
});
In my Angular application, I handle non-existent routes like this:
$routeProvider.otherwise({
templateUrl: '/partials/404.html',
controller: 'DummyCtrl'
});
The issue arises when the static() route fails to match a file in the public directory, leading it to trigger the next "catch all" route.
This poses problems because the server returns res.render('index'); (the entire page), which is then injected into the page by AngularJS resulting in a warning message stating
WARNING: Tried to load angular more than once.To address this issue, I am looking to refactor my "catch all" route to exclude routes that match existing files.
I believe the solution lies in using a regex for the Angular route that filters out paths resembling actual files, such as ".html," ".png," etc.