diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade
index 4ad34e2290..79966ee413 100644
--- a/public/docs/ts/latest/quickstart.jade
+++ b/public/docs/ts/latest/quickstart.jade
@@ -345,15 +345,23 @@ code-example(format="").
become more concerned about production qualities such as
load times and memory footprint.
- a(id="systemjs")
- :marked
- ### SystemJS Configuration
+a(id="systemjs")
+.l-main-section
+:marked
+ ### SystemJS Configuration
- The QuickStart uses SystemJS
- to load application and library modules.
+ The QuickStart uses SystemJS
+ to load application and library modules.
+
+ Add this `systemjs.config.js` file to the project root.
++makeExample('quickstart/ts/systemjs.config.1.js', null, 'systemjs.config.js')(format=".")
+
+.l-verbose-section
+ :marked
There are alternatives that work just fine including the well-regarded
webpack.
- SystemJS happens to be a good choice but we want to be clear that it was a choice and not a preference.
+ SystemJS happens to be a good choice.
+ But we want to be clear that it was a *choice* and not a *preference*.
All module loaders require configuration and all loader configuration
becomes complicated rather quickly as soon as the file structure diversifies and
@@ -364,19 +372,18 @@ code-example(format="").
here.
With those cautions in mind, what are we doing in this QuickStart configuration?
- +makeExample('quickstart/ts/systemjs.config.1.js', null, 'systemjs.config.js')(format=".")
- :marked
+
First, we create a map to tell SystemJS where to look when we import some module.
-
- Then, we give all our packages to SystemJS. That means all the project dependencies and our application package, `app`.
+ Then, we register all our packages to SystemJS:
+ all the project dependencies and our application package, `app`.
.l-sub-section
:marked
- Our QuickStart doesn't use the Reactive Extensions
- but any substantial application will want them
- when working with observables.
- We added the library here in QuickStart so we don't forget later.
+ Our QuickStart doesn't use all of the listed packages
+ but any substantial application will want many of them
+ and all of the listed packages are required by at least one of the documentation samples.
+ There is no runtime harm in listing packages that we don't need as they will only be loaded when requested.
:marked
The `app` package tells SystemJS what to do when it sees a request for a
module from the `app/` folder.
@@ -390,7 +397,7 @@ code-example(format="").
That makes sense because we transpile TypeScript to JavaScript
before running the application.
-
+
.l-sub-section
:marked
#### Transpiling in the browser
@@ -489,12 +496,12 @@ figure.image-display
.file index.html
.file package.json
.file styles.css
- .file system.config.js
+ .file systemjs.config.js
.file tsconfig.json
.file typings.json
:marked
- And here are the files:,
- quickstart/ts/typings/typings.d.1.ts
+ And here are the files:
+
+makeTabs(`
quickstart/ts/app/app.component.ts,
quickstart/ts/app/main.ts,
@@ -503,7 +510,7 @@ figure.image-display
quickstart/ts/tsconfig.1.json,
quickstart/ts/typings.1.json,
quickstart/ts/styles.1.css,
- quickstart/ts/system.config.1.js`
+ quickstart/ts/systemjs.config.1.js`
,null,
`app/app.component.ts,
app/main.ts,
@@ -512,7 +519,7 @@ figure.image-display
tsconfig.json,
typings.json,
styles.css,
- system.config.js`)
+ systemjs.config.js`)
:marked
.l-main-section