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.
This commit is contained in:
Filipe Silva 2017-02-25 16:15:01 +00:00 committed by GitHub
parent f7ad4f565b
commit fdc11391dd
20 changed files with 309 additions and 108 deletions

View File

@ -38,7 +38,7 @@
"license": "MIT",
"dependencies": {},
"devDependencies": {
"angular-cli": "^1.0.0-beta.26"
"angular-cli": "^1.0.0-rc.0"
},
"repository": {}
}

View File

@ -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": {}
}
}

View File

@ -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

View File

@ -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

View File

@ -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).

View File

@ -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"
]
}
}

View File

@ -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
});
};

View File

@ -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 } }));
}
};

View File

@ -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);

View File

@ -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';

View File

@ -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

View File

@ -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();

View File

@ -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`.

View File

@ -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';

View File

@ -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"
]
}

View File

@ -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"
]
}

View File

@ -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"
]
}

View File

@ -0,0 +1,14 @@
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"es2016"
]
}
}

View File

@ -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",

View File

@ -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 <code>environments/*</code>
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 <code>tsconfig.json</code>
td <code>tsconfig.{app|spec}.json</code>
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 <code>node_modules/...</code>
td
:marked
`Node.js` creates this folder and puts all third party modules listed in
`package.json` inside of it.
tr
td <code>angular-cli.json</code>
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 <code>.editorconfig</code>
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 <code>angular-cli.json</code>
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 <code>karma.conf.js</code>
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 <code>tsconfig.json</code>
td
:marked
TypeScript compiler configuration for your IDE to pick up and give you helpful tooling.
tr
td <code>tslint.json</code>
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.