I'm just getting started with Angular2, and I've followed the Angular2 quickstart and the tutorial.
Some context... When the user clicks a link in the top navbar of my webapp it makes a server side request. The page returned to the browser is an Angular2 app (index.html). The user can click localhost the home app or click localhost/customer the customer app. I don't understand how Angular2, and more likely SystemJS, is treating the difference in URL when loading/importing modules.
When I load the home page the angular code works as expected where the view is rendered. The home index.html has System.config 'packages' = '/home' and the System.import references 'home/boot'.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout">
<head>
<title>Home</title>
<link href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css" rel="stylesheet" media="screen" />
<script>
System.config({
packages: {
// the browser url is http://localhost
"/home": {
format: 'register',
defaultExtension: 'js'
}
}
});
// the browser url is http://localhost
System.import('home/boot').then(null, console.error.bind(console));
</script>
</head>
<body>
<div layout:fragment="content">
<div>
<p th:text="#{home.welcome(${name})}">Welcome Message</p>
</div>
<div>
<!-- ANGULAR HOME APP -->
<home>Loading...</home>
</div>
</div>
</body>
</html>
When I load the customer page the browser gets a 404 loading browser.js and core.js. It is system.src.js that cannot find localhost/customer/angular2/platform/browser.js or localhost/customer/angular2/core.js. These imports are defined in my boot.ts and customer.component.ts.
boot.ts
import {bootstrap} from 'angular2/platform/browser'
and customer.component.ts
import {Component, View} from 'angular2/core';
This is where I am stuck and not sure what system.src.js is trying to do or why it isn't loading the modules.
My customer index.html has System.config packages set as '/' which I'm not clear on but seemed necessary as the browser url is localhost/customer. How should the System.config 'packages' option for this scenario be set?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout">
<head>
<title>Customer</title>
<link href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css" rel="stylesheet" media="screen" />
<script>
System.config({
packages: {
// the browser url is http://localhost/customer
'/': {
format: 'register',
defaultExtension: 'js'
}
}
});
// the browser url is http://localhost/customer
System.import('boot').then(null, console.error.bind(console));
</script>
</head>
<body>
<div layout:fragment="content">
<div th:object="${customer}">
<p>First Name: <span th:text="*{firstName}">FirstName</span></p>
<p>Last Name: <span th:text="*{lastName}">LastName</span></p>
</div>
<div>
<!-- ANGULAR CUSTOMER APP -->
<customer>Loading...</customer>
</div>
</div>
</body>
</html>
If I change the System.config packages to 'customer' the browser gets a 404 loading my customer boot.js (the compiled customer boot.ts). This lead me down the road to a few other changes
Change customer index.html System.import('boot').then(...) to have .js on 'boot' so the browser can find it
<script>
System.config({
packages: {
// the browser url is http://localhost/customer
"customer": {
format: 'register',
defaultExtension: 'js'
}
}
});
// the browser url is http://localhost/customer
System.import('boot.js').then(null, console.error.bind(console));
</script>
Change customer/boot.js to have .js on the name of my registered component './customer.component'.
System.register(['angular2/platform/browser', './customer.component.js'], function(exports_1) {
...
}
These changes result in the customer app working albeit with a typescript compiler error "cannot find module ./customer.component.js".
It doesn't seem right to hand edit the compiled boot.js file. Is there a way to compile the .ts files so the generated .js files explicitly reference .js files? This seems like I am barking up the wrong tree.
I feel there is something I am missing with the customer index.html and how one can configure the System.config options.
