Fragment Resource could not be Loaded. Check for 'file not found'

I'm trying to code a fragment in my View2, yet system can't find the file. This is what I did:

View 2 code:

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="e24.controller.View2"
	xmlns:html="http://www.w3.org/1999/xhtml" xmlns:t="sap.ui.table">
	<Page title="View 2">
		<content>
			<core:Fragment fragmentName="e24.fragments.tableData" type="XML"></core:Fragment>
		</content>
	</Page>
</mvc:View>

Directory:

Namespace (defined in below Component.js code):

sap.ui.define(					
	["sap/ui/core/UIComponent"],				
	function(UIComponent){				
		return UIComponent.extend("e24.Component",{			
			metadata: { manifest:"json" },		
			init: function(){		
				UIComponent.prototype.init.apply(this);
				var oRouter= this.getRouter();
				oRouter.initialize();
			}		
		});			
});					

Full Error Message:

As an added note, here is my fragment code if(?) that might be useful:

<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:t="sap.ui.table">
	<Button text="hi"></Button>
</core:FragmentDefinition>