My Angular2 app started off as a simple 'hello world' project. However, I made the questionable decision to use different directory structures for my development environment and the final deployment folder on my spring backend.
This difference caused an issue with TypeScript imports, leading to 404 errors when trying to open the app in the browser. The problematic line was:
import {Component, View} from 'angular2/core';
To resolve the issue, I added back the /app folder and changed my import statements like so:
import {Component, View} from '../node_modules/angular2/core';
Unfortunately, this change resulted in some strange behavior. Specifying ../node_modules in the library paths triggered the loading of ALL Angular2 files individually through ajax calls, even though the script tag was correctly included in the HTML:
<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
Upon discovering the cause of the issue, I reverted the import statement back to its original form:
import {Component, View} from 'angular2/core';
With this adjustment, Angular2 loaded seamlessly from the script tag without any additional ajax calls for file retrieval.
I would appreciate it if someone could shed light on why specifying a detailed path in the import statement had such a significant impact on the loading mechanism of Angular2. It seemed like normal behavior, but I am still puzzled by how it all works.