From fdc11391dd3062bb7c12d6a644df54eb69cf04ef Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Sat, 25 Feb 2017 16:15:01 +0000 Subject: [PATCH] docs: update CLI quickstart to rc.0 (#3295) All shown boilerplate is copy paste of a new CLI generated project using the rc.0 blueprints. Formatting might be a bit different from the norm in the angular.io repo but it should be left as is, since the shown files should match a generated project. --- .../docs/_examples/_boilerplate/package.json | 2 +- .../{angular-cli.json => .angular-cli.json} | 38 ++++----- .../_examples/cli-quickstart/ts/.editorconfig | 13 +++ .../_examples/cli-quickstart/ts/.gitignore | 5 +- .../_examples/cli-quickstart/ts/README.md | 10 +-- .../cli-quickstart/ts/e2e/tsconfig.e2e.json | 19 +++++ .../_examples/cli-quickstart/ts/karma.conf.js | 44 ++++++++++ .../cli-quickstart/ts/protractor.conf.js | 31 +++++++ .../ts/src/app/app.component.spec.ts | 9 +- .../cli-quickstart/ts/src/app/app.module.ts | 6 +- .../ts/src/environments/environment.ts | 2 +- .../_examples/cli-quickstart/ts/src/main.ts | 7 +- .../cli-quickstart/ts/src/polyfills.ts | 83 +++++++++++++++---- .../_examples/cli-quickstart/ts/src/test.ts | 2 +- .../cli-quickstart/ts/src/tsconfig.app.json | 22 +++++ .../cli-quickstart/ts/src/tsconfig.json | 21 ----- .../cli-quickstart/ts/src/tsconfig.spec.json | 26 ++++++ .../_examples/cli-quickstart/ts/tsconfig.json | 14 ++++ public/docs/_examples/package.json | 2 +- public/docs/ts/latest/cli-quickstart.jade | 61 ++++++++------ 20 files changed, 309 insertions(+), 108 deletions(-) rename public/docs/_examples/cli-quickstart/ts/{angular-cli.json => .angular-cli.json} (59%) create mode 100644 public/docs/_examples/cli-quickstart/ts/.editorconfig create mode 100644 public/docs/_examples/cli-quickstart/ts/e2e/tsconfig.e2e.json create mode 100644 public/docs/_examples/cli-quickstart/ts/karma.conf.js create mode 100644 public/docs/_examples/cli-quickstart/ts/protractor.conf.js create mode 100644 public/docs/_examples/cli-quickstart/ts/src/tsconfig.app.json delete mode 100644 public/docs/_examples/cli-quickstart/ts/src/tsconfig.json create mode 100644 public/docs/_examples/cli-quickstart/ts/src/tsconfig.spec.json create mode 100644 public/docs/_examples/cli-quickstart/ts/tsconfig.json diff --git a/public/docs/_examples/_boilerplate/package.json b/public/docs/_examples/_boilerplate/package.json index 5ac9fa9de2..2e4bc19f91 100644 --- a/public/docs/_examples/_boilerplate/package.json +++ b/public/docs/_examples/_boilerplate/package.json @@ -38,7 +38,7 @@ "license": "MIT", "dependencies": {}, "devDependencies": { - "angular-cli": "^1.0.0-beta.26" + "angular-cli": "^1.0.0-rc.0" }, "repository": {} } diff --git a/public/docs/_examples/cli-quickstart/ts/angular-cli.json b/public/docs/_examples/cli-quickstart/ts/.angular-cli.json similarity index 59% rename from public/docs/_examples/cli-quickstart/ts/angular-cli.json rename to public/docs/_examples/cli-quickstart/ts/.angular-cli.json index 9f23ed85fb..49a6b93bd0 100644 --- a/public/docs/_examples/cli-quickstart/ts/angular-cli.json +++ b/public/docs/_examples/cli-quickstart/ts/.angular-cli.json @@ -1,7 +1,7 @@ { + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { - "version": "1.0.0-beta.25.5", - "name": "my-app" + "name": "master-project" }, "apps": [ { @@ -13,28 +13,38 @@ ], "index": "index.html", "main": "main.ts", + "polyfills": "polyfills.ts", "test": "test.ts", - "tsconfig": "tsconfig.json", + "tsconfig": "tsconfig.app.json", + "testTsconfig": "tsconfig.spec.json", "prefix": "app", - "mobile": false, "styles": [ "styles.css" ], "scripts": [], + "environmentSource": "environments/environment.ts", "environments": { - "source": "environments/environment.ts", "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ], - "addons": [], - "packages": [], "e2e": { "protractor": { "config": "./protractor.conf.js" } }, + "lint": [ + { + "project": "src/tsconfig.app.json" + }, + { + "project": "src/tsconfig.spec.json" + }, + { + "project": "e2e/tsconfig.e2e.json" + } + ], "test": { "karma": { "config": "./karma.conf.js" @@ -42,18 +52,6 @@ }, "defaults": { "styleExt": "css", - "prefixInterfaces": false, - "inline": { - "style": false, - "template": false - }, - "spec": { - "class": false, - "component": true, - "directive": true, - "module": false, - "pipe": true, - "service": true - } + "component": {} } } diff --git a/public/docs/_examples/cli-quickstart/ts/.editorconfig b/public/docs/_examples/cli-quickstart/ts/.editorconfig new file mode 100644 index 0000000000..6e87a003da --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/.editorconfig @@ -0,0 +1,13 @@ +# Editor configuration, see http://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +max_line_length = off +trim_trailing_whitespace = false diff --git a/public/docs/_examples/cli-quickstart/ts/.gitignore b/public/docs/_examples/cli-quickstart/ts/.gitignore index fd172dea98..04a48dc643 100644 --- a/public/docs/_examples/cli-quickstart/ts/.gitignore +++ b/public/docs/_examples/cli-quickstart/ts/.gitignore @@ -14,9 +14,10 @@ .c9/ *.launch .settings/ +*.sublime-workspace # IDE - VSCode -.vscode/ +.vscode/* !.vscode/settings.json !.vscode/tasks.json !.vscode/launch.json @@ -40,3 +41,5 @@ testem.log Thumbs.db !src/styles.css +!karma.conf.js +!protractor.conf.js diff --git a/public/docs/_examples/cli-quickstart/ts/README.md b/public/docs/_examples/cli-quickstart/ts/README.md index ae9b1a3643..efe9ec67ae 100644 --- a/public/docs/_examples/cli-quickstart/ts/README.md +++ b/public/docs/_examples/cli-quickstart/ts/README.md @@ -1,6 +1,6 @@ -# MyApp +# MasterProject -This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.25.5. +This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0-rc.0. ## Development server Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. @@ -22,10 +22,6 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github. Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). Before running the tests make sure you are serving the app via `ng serve`. -## Deploying to GitHub Pages - -Run `ng github-pages:deploy` to deploy to GitHub Pages. - ## Further help -To get more help on the `angular-cli` use `ng help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md). +To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). diff --git a/public/docs/_examples/cli-quickstart/ts/e2e/tsconfig.e2e.json b/public/docs/_examples/cli-quickstart/ts/e2e/tsconfig.e2e.json new file mode 100644 index 0000000000..74c2bca131 --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/e2e/tsconfig.e2e.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "sourceMap": true, + "declaration": false, + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "lib": [ + "es2016" + ], + "outDir": "../dist/out-tsc-e2e", + "module": "commonjs", + "target": "es6", + "types":[ + "jasmine", + "node" + ] + } +} diff --git a/public/docs/_examples/cli-quickstart/ts/karma.conf.js b/public/docs/_examples/cli-quickstart/ts/karma.conf.js new file mode 100644 index 0000000000..84b4cd5aca --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/karma.conf.js @@ -0,0 +1,44 @@ +// Karma configuration file, see link for more information +// https://karma-runner.github.io/0.13/config/configuration-file.html + +module.exports = function (config) { + config.set({ + basePath: '', + frameworks: ['jasmine', '@angular/cli'], + plugins: [ + require('karma-jasmine'), + require('karma-chrome-launcher'), + require('karma-jasmine-html-reporter'), + require('karma-coverage-istanbul-reporter'), + require('@angular/cli/plugins/karma') + ], + client:{ + clearContext: false // leave Jasmine Spec Runner output visible in browser + }, + files: [ + { pattern: './src/test.ts', watched: false } + ], + preprocessors: { + './src/test.ts': ['@angular/cli'] + }, + mime: { + 'text/x-typescript': ['ts','tsx'] + }, + coverageIstanbulReporter: { + reports: [ 'html', 'lcovonly' ], + fixWebpackSourcePaths: true + }, + angularCli: { + environment: 'dev' + }, + reporters: config.angularCli && config.angularCli.codeCoverage + ? ['progress', 'coverage-istanbul'] + : ['progress', 'kjhtml'], + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: true, + browsers: ['Chrome'], + singleRun: false + }); +}; diff --git a/public/docs/_examples/cli-quickstart/ts/protractor.conf.js b/public/docs/_examples/cli-quickstart/ts/protractor.conf.js new file mode 100644 index 0000000000..2cbc329391 --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/protractor.conf.js @@ -0,0 +1,31 @@ +// Protractor configuration file, see link for more information +// https://github.com/angular/protractor/blob/master/lib/config.ts + +/*global jasmine */ +const { SpecReporter } = require('jasmine-spec-reporter'); + +exports.config = { + allScriptsTimeout: 11000, + specs: [ + './e2e/**/*.e2e-spec.ts' + ], + capabilities: { + 'browserName': 'chrome' + }, + directConnect: true, + baseUrl: 'http://localhost:4200/', + framework: 'jasmine', + jasmineNodeOpts: { + showColors: true, + defaultTimeoutInterval: 30000, + print: function() {} + }, + beforeLaunch: function() { + require('ts-node').register({ + project: 'e2e/tsconfig.e2e.json' + }); + }, + onPrepare() { + jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); + } +}; diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/app.component.spec.ts b/public/docs/_examples/cli-quickstart/ts/src/app/app.component.spec.ts index 72ee705d0b..c740bcd745 100644 --- a/public/docs/_examples/cli-quickstart/ts/src/app/app.component.spec.ts +++ b/public/docs/_examples/cli-quickstart/ts/src/app/app.component.spec.ts @@ -1,18 +1,15 @@ -/* tslint:disable:no-unused-variable */ - import { TestBed, async } from '@angular/core/testing'; import { AppComponent } from './app.component'; describe('AppComponent', () => { - beforeEach(() => { + beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent ], - }); - TestBed.compileComponents(); - }); + }).compileComponents(); + })); it('should create the app', async(() => { const fixture = TestBed.createComponent(AppComponent); diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/app.module.ts b/public/docs/_examples/cli-quickstart/ts/src/app/app.module.ts index 33ec868232..67ae49119b 100644 --- a/public/docs/_examples/cli-quickstart/ts/src/app/app.module.ts +++ b/public/docs/_examples/cli-quickstart/ts/src/app/app.module.ts @@ -1,7 +1,7 @@ import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { HttpModule } from '@angular/http'; +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; diff --git a/public/docs/_examples/cli-quickstart/ts/src/environments/environment.ts b/public/docs/_examples/cli-quickstart/ts/src/environments/environment.ts index 00313f1664..b7f639aeca 100644 --- a/public/docs/_examples/cli-quickstart/ts/src/environments/environment.ts +++ b/public/docs/_examples/cli-quickstart/ts/src/environments/environment.ts @@ -1,7 +1,7 @@ // The file contents for the current environment will overwrite these during build. // The build system defaults to the dev environment which uses `environment.ts`, but if you do // `ng build --env=prod` then `environment.prod.ts` will be used instead. -// The list of which env maps to which file can be found in `angular-cli.json`. +// The list of which env maps to which file can be found in `.angular-cli.json`. export const environment = { production: false diff --git a/public/docs/_examples/cli-quickstart/ts/src/main.ts b/public/docs/_examples/cli-quickstart/ts/src/main.ts index ac78a713c2..a9ca1caf8c 100644 --- a/public/docs/_examples/cli-quickstart/ts/src/main.ts +++ b/public/docs/_examples/cli-quickstart/ts/src/main.ts @@ -1,9 +1,8 @@ -import './polyfills.ts'; - -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { enableProdMode } from '@angular/core'; -import { environment } from './environments/environment'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; if (environment.production) { enableProdMode(); diff --git a/public/docs/_examples/cli-quickstart/ts/src/polyfills.ts b/public/docs/_examples/cli-quickstart/ts/src/polyfills.ts index 4749399c2d..53bdaf1b86 100644 --- a/public/docs/_examples/cli-quickstart/ts/src/polyfills.ts +++ b/public/docs/_examples/cli-quickstart/ts/src/polyfills.ts @@ -1,19 +1,68 @@ -// This file includes polyfills needed by Angular and is loaded before -// the app. You can add your own extra polyfills to this file. -import 'core-js/es6/symbol'; -import 'core-js/es6/object'; -import 'core-js/es6/function'; -import 'core-js/es6/parse-int'; -import 'core-js/es6/parse-float'; -import 'core-js/es6/number'; -import 'core-js/es6/math'; -import 'core-js/es6/string'; -import 'core-js/es6/date'; -import 'core-js/es6/array'; -import 'core-js/es6/regexp'; -import 'core-js/es6/map'; -import 'core-js/es6/set'; -import 'core-js/es6/reflect'; +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following to support `@angular/animation`. */ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + +/** Evergreen browsers require these. **/ +import 'core-js/es6/reflect'; import 'core-js/es7/reflect'; -import 'zone.js/dist/zone'; + + +/** ALL Firefox browsers require the following to support `@angular/animation`. **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. diff --git a/public/docs/_examples/cli-quickstart/ts/src/test.ts b/public/docs/_examples/cli-quickstart/ts/src/test.ts index f9d51efd05..9bf72267e9 100644 --- a/public/docs/_examples/cli-quickstart/ts/src/test.ts +++ b/public/docs/_examples/cli-quickstart/ts/src/test.ts @@ -1,4 +1,4 @@ -import './polyfills.ts'; +// This file is required by karma.conf.js and loads recursively all the .spec and framework files import 'zone.js/dist/long-stack-trace-zone'; import 'zone.js/dist/proxy.js'; diff --git a/public/docs/_examples/cli-quickstart/ts/src/tsconfig.app.json b/public/docs/_examples/cli-quickstart/ts/src/tsconfig.app.json new file mode 100644 index 0000000000..9f12c4b849 --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/src/tsconfig.app.json @@ -0,0 +1,22 @@ +{ + "compilerOptions": { + "sourceMap": true, + "declaration": false, + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "lib": [ + "es2016", + "dom" + ], + "outDir": "../out-tsc/app", + "target": "es5", + "module": "es2015", + "baseUrl": "", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/public/docs/_examples/cli-quickstart/ts/src/tsconfig.json b/public/docs/_examples/cli-quickstart/ts/src/tsconfig.json deleted file mode 100644 index 05839ec2ff..0000000000 --- a/public/docs/_examples/cli-quickstart/ts/src/tsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "module": "commonjs", - "moduleResolution": "node", - "sourceMap": true, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "lib": [ "es2015", "dom" ], - "noImplicitAny": true, - "suppressImplicitAnyIndexErrors": true, - "typeRoots": [ - "../../../node_modules/@types/" - ] - }, - "compileOnSave": true, - "exclude": [ - "node_modules/*", - "**/*-aot.ts" - ] -} diff --git a/public/docs/_examples/cli-quickstart/ts/src/tsconfig.spec.json b/public/docs/_examples/cli-quickstart/ts/src/tsconfig.spec.json new file mode 100644 index 0000000000..6c5160e12e --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/src/tsconfig.spec.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "sourceMap": true, + "declaration": false, + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "lib": [ + "es2016" + ], + "outDir": "../out-tsc/spec", + "module": "commonjs", + "target": "es6", + "baseUrl": "", + "types": [ + "jasmine", + "node" + ] + }, + "files": [ + "test.ts" + ], + "include": [ + "**/*.spec.ts" + ] +} diff --git a/public/docs/_examples/cli-quickstart/ts/tsconfig.json b/public/docs/_examples/cli-quickstart/ts/tsconfig.json new file mode 100644 index 0000000000..cde5e35054 --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "lib": [ + "es2016" + ] + } +} diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json index 69e31910f5..ae481f7415 100644 --- a/public/docs/_examples/package.json +++ b/public/docs/_examples/package.json @@ -31,6 +31,7 @@ "zone.js": "^0.7.4" }, "devDependencies": { + "@angular/cli": "^1.0.0-rc.0", "@types/angular": "^1.5.16", "@types/angular-animate": "^1.5.5", "@types/angular-cookies": "^1.4.2", @@ -40,7 +41,6 @@ "@types/angular-sanitize": "^1.3.3", "@types/jasmine": "2.5.36", "@types/node": "^6.0.45", - "angular-cli": "^1.0.0-beta.26", "angular2-template-loader": "^0.6.0", "awesome-typescript-loader": "^3.0.4", "babel-cli": "^6.16.0", diff --git a/public/docs/ts/latest/cli-quickstart.jade b/public/docs/ts/latest/cli-quickstart.jade index 0460956b10..b5cc2e11a3 100644 --- a/public/docs/ts/latest/cli-quickstart.jade +++ b/public/docs/ts/latest/cli-quickstart.jade @@ -4,12 +4,12 @@ include _util-fns Good tools make application development quicker and easier to maintain than if you did everything by hand. - The [**Angular-CLI**](https://cli.angular.io/) is a **_command line interface_** tool + The [**Angular CLI**](https://cli.angular.io/) is a **_command line interface_** tool that can create a project, add files, and perform a variety of on-going development tasks such as testing, bundling, and deployment. The goal in this CLI QuickStart chapter is to build and run a super-simple Angular - application in TypeScript, using Angular-CLI + application in TypeScript, using Angular CLI while adhering to the [Style Guide](./guide/style-guide.html) recommendations that benefit _every_ Angular project. @@ -33,11 +33,11 @@ h2#devenv Step 1. Set up the Development Environment if they are not already on your machine. .l-sub-section :marked - **Verify that you are running at least node `4.x.x` and npm `3.x.x`** + **Verify that you are running at least node `6.9.x` and npm `3.x.x`** by running `node -v` and `npm -v` in a terminal/console window. Older versions produce errors, but newer versions are fine. :marked - Then **install the [Angular-CLI](https://github.com/angular/angular-cli)** globally. + Then **install the [Angular CLI](https://github.com/angular/angular-cli)** globally. code-example(language="sh" class="code-shell"). npm install -g @angular/cli @@ -65,13 +65,16 @@ h2#serve Step 3: Serve the application code-example(language="sh" class="code-shell"). cd my-app - ng serve + ng serve --open :marked The `ng serve` command launches the server, watches your files, and rebuilds the app as you make changes to those files. + + Using the `--open` (or just `-o`) option will automatically open your browser + on `http://localhost:4200/`. - Open a browser on `http://localhost:4200/`; the app greets you with a message: + Your app greets you with a message: figure.image-display img(src='/resources/images/devguide/cli-quickstart/app-works.png' alt="The app works!") @@ -115,12 +118,12 @@ figure.image-display :marked ## Project file review - An Angular-CLI project is the foundation for both quick experiments and enterprise solutions. + An Angular CLI project is the foundation for both quick experiments and enterprise solutions. The first file you should check out is `README.md`. It has some basic information on how to use CLI commands. - Whenever you want to know more about how Angular-CLI works make sure to visit - [the Angular-CLI repository](https://github.com/angular/angular-cli) and + Whenever you want to know more about how Angular CLI works make sure to visit + [the Angular CLI repository](https://github.com/angular/angular-cli) and [Wiki](https://github.com/angular/angular-cli/wiki). Some of the generated files might be unfamiliar to you. @@ -155,7 +158,8 @@ block src-files .file polyfills.ts .file styles.css .file test.ts - .file tsconfig.json + .file tsconfig.app.json + .file tsconfig.spec.json style td, th {vertical-align: top} table(width="100%") @@ -183,7 +187,7 @@ table(width="100%") td :marked A folder where you can put images and anything else you need to be copied wholesale - when you build your application. + when you build your application. tr td environments/* td @@ -241,10 +245,11 @@ table(width="100%") It has some custom configuration that might be unfamiliar, but it's not something you'll need to edit. tr - td tsconfig.json + td tsconfig.{app|spec}.json td :marked - Configuration for the TypeScript compiler. + TypeScript compiler configuration for the Angular app (`tsconfig.app.json`) + and for the unit tests (`tsconfig.spec.json`). block root-files @@ -261,16 +266,17 @@ block root-files .children .file app.e2e-spec.ts .file app.po.ts - .file tsconfig.json + .file tsconfig.e2e.json .file node_modules/... .file src/... + .file .angular-cli.json .file .editorconfig .file .gitignore - .file angular-cli.json .file karma.conf.js .file package.json .file protractor.conf.js .file README.md + .file tsconfig.json .file tslint.json style td, th {vertical-align: top} @@ -287,13 +293,21 @@ table(width="100%") Inside `e2e/` live the End-to-End tests. They shouldn't be inside `src/` because e2e tests are really a separate app that just so happens to test your main app. - That's why they even have their own `tsconfig.json`. + That's also why they have their own `tsconfig.e2e.json`. tr td node_modules/... td :marked `Node.js` creates this folder and puts all third party modules listed in `package.json` inside of it. + tr + td angular-cli.json + td + :marked + Configuration for Angular CLI. + In this file you can set several defaults and also configure what files are included + when your project is build. + Check out the official documentation if you want to know more. tr td .editorconfig td @@ -307,14 +321,6 @@ table(width="100%") td :marked Git configuration to make sure autogenerated files are not commited to source control. - tr - td angular-cli.json - td - :marked - Configuration for Angular-CLI. - In this file you can set several defaults and also configure what files are included - when your project is build. - Check out the official documentation if you want to know more. tr td karma.conf.js td @@ -340,6 +346,11 @@ table(width="100%") Basic documentation for your project, pre-filled with CLI command information. Make sure to enhance it with project documentation so that anyone checking out the repo can build your app! + tr + td tsconfig.json + td + :marked + TypeScript compiler configuration for your IDE to pick up and give you helpful tooling. tr td tslint.json td @@ -354,4 +365,4 @@ table(width="100%") If you're new to Angular, we recommend staying on the [learning path](guide/learning-angular.html "Angular learning path"). - You can skip the "Setup" chapter since you're already using the Angular-CLI setup. + You can skip the "Setup" chapter since you're already using the Angular CLI setup.