My project structure My project structure
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. The '/customer' in the URL is the main difference from the home app
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? 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
"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>