chore: add src folder (angular#362)

* chore: add src folder

* incorporate Jesus's feedback

* move tsconfig.json into src/e2e

* add base href

* ignore debug.log

* remove unused npm script

* some protractor changes

* remove appSrcBase

* explicitely list config for npm run serve

* add update instructions

* Add third party deps note to update section

.gitignore

@@ -1,9 +1,11 @@
 .idea
 node_modules
 jspm_packages
-npm-debug.*
-link-checker-results.txt
-app/**/*.js
+npm-debug.log
+debug.log
+src/**/*.js
+!src/systemjs.config.extras.js
+!src/systemjs.config.js
 *.js.map
 e2e/**/*.js
 e2e/**/*.js.map

.travis.yml

@@ -16,5 +16,5 @@ install:
   - npm install
 script:
   - npm run lint
-  - npm run test-once
+  - npm run test:once
   - npm run e2e

README.md

@@ -12,6 +12,24 @@ It exists primarily to get you started quickly with learning and prototyping in
 We are unlikely to accept suggestions about how to grow this QuickStart into something it is not.
 Please keep that in mind before posting issues and PRs.
 
+## Updating to a newer version of the Quickstart Repo
+
+From time to time the QuickStart will add be enhanced with support for new features or to reflect
+changes to the [official Style Guide](https://angular.io/docs/ts/latest/guide/style-guide.html).
+
+You can update your existing project to an up-to-date QuickStart by following these instructions:
+- Create a new project using the [instructions below](#create-a-new-project-based-on-the-quickstart)
+- Copy the code you have in your project's `main.ts` file onto `src/app/main.ts` in the new project
+- Copy your old `app` folder into `src/app`
+- Delete `src/app/main.ts` if you have one (we now use `src/main.ts` instead)
+- Copy your old `index.html`, `styles.css` and `tsconfig.json` into `src/`
+- Install all your third party dependencies
+- Copy your old `e2e/` folder into `e2e/`
+- Copy over any other files you added to your project
+- Copy your old `.git` folder into your new project's root
+
+Now you can continue working on the new project.
+
 ## Prerequisites
 
 Node.js and npm are essential to Angular development. 
@@ -106,16 +124,16 @@ You're ready to write your application.
 We've captured many of the most useful commands in npm scripts defined in the `package.json`:
 
 * `npm start` - runs the compiler and a server at the same time, both in "watch mode".
-* `npm run tsc` - runs the TypeScript compiler once.
-* `npm run tsc:w` - runs the TypeScript compiler in watch mode; the process keeps running, awaiting changes to TypeScript files and re-compiling when it sees them.
-* `npm run lite` - runs the [lite-server](https://www.npmjs.com/package/lite-server), a light-weight, static file server, written and maintained by
+* `npm run build` - runs the TypeScript compiler once.
+* `npm run build:w` - runs the TypeScript compiler in watch mode; the process keeps running, awaiting changes to TypeScript files and re-compiling when it sees them.
+* `npm run serve` - runs the [lite-server](https://www.npmjs.com/package/lite-server), a light-weight, static file server, written and maintained by
 [John Papa](https://github.com/johnpapa) and
 [Christopher Martin](https://github.com/cgmartin)
 with excellent support for Angular apps that use routing.
 
 Here are the test related scripts:
 * `npm test` - compiles, runs and watches the karma unit tests
-* `npm run e2e` - run protractor e2e tests, written in JavaScript (*e2e-spec.js)
+* `npm run e2e` - compiles and run protractor e2e tests, written in Typescript (*e2e-spec.ts)
 
 ## Testing
 
@@ -128,9 +146,9 @@ These tools are configured for specific conventions described below.
 We recommend that you shut down one before starting another.*
 
 ### Unit Tests
-TypeScript unit-tests are usually in the `app` folder. Their filenames must end in `.spec`.
+TypeScript unit-tests are usually in the `src/app` folder. Their filenames must end in `.spec.ts`.
 
-Look for the example `app/app.component.spec.ts`.
+Look for the example `src/app/app.component.spec.ts`.
 Add more `.spec.ts` files as you wish; we configured karma to find them.
 
 Run it with `npm test`
@@ -147,17 +165,17 @@ restart it. No worries; it's pretty quick.
 
 ### End-to-end (E2E) Tests
 
-E2E tests are in the `e2e` directory, side by side with the `app` folder.
+E2E tests are in the `e2e` directory, side by side with the `src` folder.
 Their filenames must end in `.e2e-spec.ts`.
 
 Look for the example `e2e/app.e2e-spec.ts`.
 Add more `.e2e-spec.js` files as you wish (although one usually suffices for small projects);
-we configured protractor to find them.
+we configured Protractor to find them.
 
 Thereafter, run them with `npm run e2e`.
 
-That command first compiles, then simultaneously starts the Http-Server at `localhost:8080`
-and launches protractor.  
+That command first compiles, then simultaneously starts the `lite-server` at `localhost:8080`
+and launches Protractor.  
 
 The pass/fail test results appear at the bottom of the terminal window.
 A custom reporter (see `protractor.config.js`) generates a  `./_test-output/protractor-results.txt` file

bs-config.e2e.json

@@ -0,0 +1,14 @@
+{
+  "open": false,
+  "logLevel": "silent",
+  "port": 8080,
+  "server": {
+    "baseDir": "src",
+    "routes": {
+      "/node_modules": "node_modules"
+    },
+    "middleware": {
+      "0": null
+    }
+  }
+}

bs-config.json

@@ -0,0 +1,8 @@
+{
+  "server": {
+    "baseDir": "src",
+    "routes": {
+      "/node_modules": "node_modules"
+    }
+  }
+}

karma-test-shim.js

@@ -7,8 +7,8 @@ Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing.
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
 
 // builtPaths: root paths for output ("built") files
-// get from karma.config.js, then prefix with '/base/' (default is 'app/')
-var builtPaths = (__karma__.config.builtPaths || ['app/'])
+// get from karma.config.js, then prefix with '/base/' (default is 'src/')
+var builtPaths = (__karma__.config.builtPaths || ['src/'])
                  .map(function(p) { return '/base/'+p;});
 
 __karma__.loaded = function () { };
@@ -34,7 +34,8 @@ var allSpecFiles = Object.keys(window.__karma__.files)
   .filter(isBuiltFile);
 
 System.config({
-  baseURL: 'base',
+  // Base URL for System.js calls. 'base/' is where Karma serves files from.
+  baseURL: 'base/src',
   // Extend usual application package list with test folder
   packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } },
 

karma.conf.js

@@ -1,8 +1,7 @@
 module.exports = function(config) {
 
-  var appBase    = 'app/';       // transpiled app JS and map files
-  var appSrcBase = 'app/';       // app source TS files
-  var appAssets  = '/base/app/'; // component assets fetched by Angular's compiler
+  var appBase    = 'src/';       // transpiled app JS and map files
+  var appSrcBase = appBase;      // app source TS files
 
   // Testing helpers (optional) are conventionally in a folder called `testing`
   var testingBase    = 'testing/'; // transpiled test JS and map files
@@ -57,8 +56,8 @@ module.exports = function(config) {
       { pattern: 'node_modules/@angular/**/*.js', included: false, watched: false },
       { pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false },
 
-      { pattern: 'systemjs.config.js', included: false, watched: false },
-      { pattern: 'systemjs.config.extras.js', included: false, watched: false },
+      { pattern: appBase + '/systemjs.config.js', included: false, watched: false },
+      { pattern: appBase + '/systemjs.config.extras.js', included: false, watched: false },
       'karma-test-shim.js', // optionally extend SystemJS mapping e.g., with barrels
 
       // transpiled application & spec code paths loaded via module imports
@@ -72,16 +71,16 @@ module.exports = function(config) {
       { pattern: appBase + '**/*.css', included: false, watched: true },
 
       // Paths for debugging with source maps in dev tools
-      { pattern: appSrcBase + '**/*.ts', included: false, watched: false },
+      { pattern: appBase + '**/*.ts', included: false, watched: false },
       { pattern: appBase + '**/*.js.map', included: false, watched: false },
       { pattern: testingSrcBase + '**/*.ts', included: false, watched: false },
       { pattern: testingBase + '**/*.js.map', included: false, watched: false}
     ],
 
     // Proxied base paths for loading assets
     proxies: {
-      // required for component assets fetched by Angular's compiler
-      "/app/": appAssets
+      // required for modules fetched by SystemJS
+      '/base/src/node_modules/': '/base/node_modules/'
     },
 
     exclude: [],

package.json

@@ -3,15 +3,22 @@
   "version": "1.0.0",
   "description": "QuickStart package.json from the documentation, supplemented with testing support",
   "scripts": {
-    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
-    "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
-    "lint": "tslint ./app/**/*.ts -t verbose",
-    "lite": "lite-server",
-    "pree2e": "webdriver-manager update",
-    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
-    "test-once": "tsc && karma start karma.conf.js --single-run",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w"
+    "build": "tsc -p src/",
+    "build:watch": "tsc -p src/ -w",
+    "build:e2e": "tsc -p e2e/",
+    "serve": "lite-server -c=bs-config.json",
+    "serve:e2e": "lite-server -c=bs-config.e2e.json",
+    "prestart": "npm run build",
+    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
+    "pree2e": "npm run build:e2e",
+    "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
+    "preprotractor": "webdriver-manager update",
+    "protractor": "protractor protractor.config.js",
+    "pretest": "npm run build",
+    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
+    "pretest:once": "npm run build",
+    "test:once": "karma start karma.conf.js --single-run",
+    "lint": "tslint ./src/**/*.ts -t verbose"
   },
   "keywords": [],
   "author": "",
@@ -38,7 +45,6 @@
     "typescript": "~2.0.10",
 
     "canonical-path": "0.0.2",
-    "http-server": "^0.9.0",
     "tslint": "^3.15.1",
     "lodash": "^4.16.4",
     "jasmine-core": "~2.4.1",

protractor.config.js

@@ -5,7 +5,7 @@
 //
 // AND THEN EVERYTIME ...
 //   1. Compile with `tsc`
-//   2. Make sure the test server (e.g., http-server: localhost:8080) is running.
+//   2. Make sure the test server (e.g., lite-server: localhost:8080) is running.
 //   3. ./node_modules/.bin/protractor protractor.config.js
 //
 //   To do all steps, try:  `npm run e2e`

index.html → src/index.html

@@ -4,6 +4,7 @@
     <title>Angular QuickStart</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <base href="/">
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
@@ -14,7 +15,7 @@
 
     <script src="systemjs.config.js"></script>
     <script>
-      System.import('app').catch(function(err){ console.error(err); });
+      System.import('main.js').catch(function(err){ console.error(err); });
     </script>
   </head>
 

app/main.ts → src/main.ts

@@ -1,5 +1,5 @@
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app.module';
+import { AppModule } from './app/app.module';
 
 platformBrowserDynamic().bootstrapModule(AppModule);

styles.css → src/styles.css

@@ -1,5 +1,5 @@
-h1 {
-  color: #369;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 250%;
-}
+h1 {
+  color: #369;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 250%;
+}

systemjs.config.js → src/systemjs.config.js

@@ -30,7 +30,6 @@
     // packages tells the System loader how to load when no filename and/or no extension
     packages: {
       app: {
-        main: './main.js',
         defaultExtension: 'js'
       },
       rxjs: {

src/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [ "es2015", "dom" ],
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true
+  }
+}