I'm facing an issue while trying to load my Angular 1.5.2 app (developed with Typescript) using JSPM 0.17.0.
This is the structure of my HTML:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<title>My App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="index.css">
<script src="jspm_packages/system.js"></script>
<script src="jspm.browser.js"></script>
<script src="jspm.config.js"></script>
</head>
<body>
<main first-name="huh" last-name="what"></main>
<script>
SystemJS.import('app.ts');
</script>
</body>
</html>
In my ./app.ts file, I encountered an error in the following code snippet:
import $ from 'jquery'
import angular from 'angular'
import main from './components/main/main.ts';
module app {
angular.module('MyApp', [
'main'
])
}
// The above code throws "[$injector:nomod] Module 'main' is not available!"
However, upon making a slight modification as shown below, everything worked smoothly:
import $ from 'jquery'
import angular from 'angular'
import main from './components/main/main.ts';
module app {
angular.module('MyApp', [
'main'
])
console.log(main);
}
// After adding the console log, the error disappeared.
I am curious as to why referencing the imported module explicitly with console.log(main) fixed the issue. Is there something wrong with how I'm importing modules?