diff --git a/docs/documentation/1-x/angular-cli.md b/docs/documentation/1-x/angular-cli.md new file mode 100644 index 000000000000..ec1c2716d17a --- /dev/null +++ b/docs/documentation/1-x/angular-cli.md @@ -0,0 +1,102 @@ + + +# Angular CLI Config Schema + +## Options + +- **project**: The global configuration of the project. + - *name* (`string`): The name of the project. + - *ejected*(`boolean`): Whether or not this project was ejected. Default is `false`. + + +- **apps** (`array`): Properties of the different applications in this project. + - *name* (`string`): Name of the app. + - *root* (`string`): The root directory of the app. + - *outDir* (`string`): The output directory for build results. Default is `dist/`. + - *assets* (`array`): List of application assets. + - *deployUrl* (`string`): URL where files will be deployed. + - *index* (`string`): The name of the start HTML file. Default is `index.html` + - *main* (`string`): The name of the main entry-point file. + - *polyfills* (`string`): The name of the polyfills entry-point file. Loaded before the app. + - *test* (`string`): The name of the test entry-point file. + - *tsconfig* (`string`): The name of the TypeScript configuration file. Default is `tsconfig.app.json`. + - *testTsconfig* (`string`): The name of the TypeScript configuration file for unit tests. + - *prefix* (`string`): The prefix to apply to generated selectors. + - *serviceWorker* (`boolean`): Experimental support for a service worker from @angular/service-worker. Default is `false`. + - *showCircularDependencies* (`boolean`): Show circular dependency warnings on builds. Default is `true`. + - *styles* (`string|array`): Global styles to be included in the build. + - *stylePreprocessorOptions* : Options to pass to style preprocessors. + - *includePaths* (`array`): Paths to include. Paths will be resolved to project root. + - *scripts* (`array`): Global scripts to be included in the build. + - *environmentSource* (`string`): Source file for environment config. + - *environments* (`object`): Name and corresponding file for environment config. + +- **e2e**: Configuration for end-to-end tests. + - *protractor* + - *config* (`string`): Path to the config file. + +- **lint** (`array`): Properties to be passed to TSLint. + - *files* (`string|array`): File glob(s) to lint. + - *project* (`string`): Location of the tsconfig.json project file. Will also use as files to lint if 'files' property not present. + - *tslintConfig* (`string`): Location of the tslint.json configuration. Default is `tslint.json`. + - *exclude* (`string|array`): File glob(s) to ignore. + + +- **test**: Configuration for unit tests. + - *karma* + - *config* (`string`): Path to the karma config file. + - *codeCoverage* + - *exclude* (`array`): Globs to exclude from code coverage. + +- **defaults**: Specify the default values for generating. + - *styleExt* (`string`): The file extension to be used for style files. + - *poll* (`number`): How often to check for file updates. + - *class*: Options for generating a class. + - *spec* (`boolean`): Specifies if a spec file is generated. Default is `false`. + - *component*: Options for generating a component. + - *flat* (`boolean`): Flag to indicate if a dir is created. Default is `false`. + - *spec* (`boolean`): Specifies if a spec file is generated. Default is `true`. + - *inlineStyle* (`boolean`): Specifies if the style will be in the ts file. Default is `false`. + - *inlineTemplate* (`boolean`): Specifies if the template will be in the ts file. Default is `false`. + - *viewEncapsulation* (`string`): Specifies the view encapsulation strategy. Can be one of `Emulated`, `Native` or `None`. + - *changeDetection* (`string`): Specifies the change detection strategy. Can be one of `Default` or `OnPush`. + - *directive*: Options for generating a directive. + - *flat* (`boolean`): Flag to indicate if a dir is created. Default is `true`. + - *spec* (`boolean`): Specifies if a spec file is generated. Default is `true`. + - *guard*: Options for generating a guard. + - *flat* (`boolean`): Flag to indicate if a dir is created. Default is `true`. + - *spec* (`boolean`): Specifies if a spec file is generated. Default is `true`. + - *interface*: Options for generating a interface. + - *prefix* (`string`): Prefix to apply to interface names. (i.e. I) + - *module*: Options for generating a module. + - *flat* (`boolean`): Flag to indicate if a dir is created. Default is `false`. + - *spec* (`boolean`): Specifies if a spec file is generated. Default is `false`. + - *pipe*: Options for generating a pipe. + - *flat* (`boolean`): Flag to indicate if a dir is created. Default is `true`. + - *spec* (`boolean`): Specifies if a spec file is generated. Default is `true`. + - *service*: Options for generating a service. + - *flat* (`boolean`): Flag to indicate if a dir is created. Default is `true`. + - *spec* (`boolean`): Specifies if a spec file is generated. Default is `true`. + - *build*: Properties to be passed to the build command. + - *sourcemaps* (`boolean`): Output sourcemaps. + - *baseHref* (`string`): Base url for the application being built. + - *progress* (`boolean`): Log progress to the console while building. Default is `true`. + - *poll* (`number`): Enable and define the file watching poll time period (milliseconds). + - *deleteOutputPath* (`boolean`): Delete output path before build. Default is `true`. + - *preserveSymlinks* (`boolean`): Do not use the real path when resolving modules. Default is `false`. + - *showCircularDependencies* (`boolean`): Show circular dependency warnings on builds. Default is `true`. + - *namedChunks* (`boolean`): Use file name for lazy loaded chunks. + - *serve*: Properties to be passed to the serve command + - *port* (`number`): The port the application will be served on. Default is `4200`. + - *host* (`string`): The host the application will be served on. Default is `localhost`. + - *ssl* (`boolean`): Enables ssl for the application. Default is `false`. + - *sslKey* (`string`): The ssl key used by the server. Default is `ssl/server.key`. + - *sslCert* (`string`): The ssl certificate used by the server. Default is `ssl/server.crt`. + - *proxyConfig* (`string`): Proxy configuration file. + +- **packageManager** (`string`): Specify which package manager tool to use. Options include `npm`, `cnpm` and `yarn`. + +- **warnings**: Allow people to disable console warnings. + - *nodeDeprecation* (`boolean`): Show a warning when the node version is incompatible. Default is `true`. + - *packageDeprecation* (`boolean`): Show a warning when the user installed angular-cli. Default is `true`. + - *versionMismatch* (`boolean`): Show a warning when the global version is newer than the local one. Default is `true`. diff --git a/docs/documentation/1-x/build.md b/docs/documentation/1-x/build.md new file mode 100644 index 000000000000..19fe3371f891 --- /dev/null +++ b/docs/documentation/1-x/build.md @@ -0,0 +1,407 @@ + + +# ng build + +## Overview +`ng build` compiles the application into an output directory + +### Creating a build + +```bash +ng build +``` + +The build artifacts will be stored in the `dist/` directory. + +All commands that build or serve your project, `ng build/serve/e2e`, will delete the output +directory (`dist/` by default). +This can be disabled via the `--no-delete-output-path` (or `--delete-output-path=false`) flag. + +### Build Targets and Environment Files + +`ng build` can specify both a build target (`--target=production` or `--target=development`) and an +environment file to be used with that build (`--environment=dev` or `--environment=prod`). +By default, the development build target and environment are used. + +The mapping used to determine which environment file is used can be found in `.angular-cli.json`: + +```json +"environmentSource": "environments/environment.ts", +"environments": { + "dev": "environments/environment.ts", + "prod": "environments/environment.prod.ts" +} +``` + +These options also apply to the serve command. If you do not pass a value for `environment`, +it will default to `dev` for `development` and `prod` for `production`. + +```bash +# these are equivalent +ng build --target=production --environment=prod +ng build --prod --env=prod +ng build --prod +# and so are these +ng build --target=development --environment=dev +ng build --dev --e=dev +ng build --dev +ng build +``` + +You can also add your own env files other than `dev` and `prod` by doing the following: +- create a `src/environments/environment.NAME.ts` +- add `{ "NAME": 'src/environments/environment.NAME.ts' }` to the `apps[0].environments` object in `.angular-cli.json` +- use them via the `--env=NAME` flag on the build/serve commands. + +### Base tag handling in index.html + +When building you can modify base tag (``) in your index.html with `--base-href your-url` option. + +```bash +# Sets base tag href to /myUrl/ in your index.html +ng build --base-href /myUrl/ +ng build --bh /myUrl/ +``` + +### Bundling & Tree-Shaking + +All builds make use of bundling and limited tree-shaking, while `--prod` builds also run limited +dead code elimination via UglifyJS. + +### `--dev` vs `--prod` builds + +Both `--dev`/`--target=development` and `--prod`/`--target=production` are 'meta' flags, that set other flags. +If you do not specify either you will get the `--dev` defaults. + +Flag | `--dev` | `--prod` +--- | --- | --- +`--aot` | `false` | `true` +`--environment` | `dev` | `prod` +`--output-hashing` | `media` | `all` +`--sourcemaps` | `true` | `false` +`--extract-css` | `false` | `true` +`--named-chunks`   | `true` | `false` +`--build-optimizer` | `false` | `true` with AOT and Angular 5 + +`--prod` also sets the following non-flaggable settings: +- Adds service worker if configured in `.angular-cli.json`. +- Replaces `process.env.NODE_ENV` in modules with the `production` value (this is needed for some libraries, like react). +- Runs UglifyJS on the code. + +### `--build-optimizer` and `--vendor-chunk` + +When using Build Optimizer the vendor chunk will be disabled by default. +You can override this with `--vendor-chunk=true`. + +Total bundle sizes with Build Optimizer are smaller if there is no separate vendor chunk because +having vendor code in the same chunk as app code makes it possible for Uglify to remove more unused +code. + +### CSS resources + +Resources in CSS, such as images and fonts, will be copied over automatically as part of a build. +If a resource is less than 10kb it will also be inlined. + +You'll see these resources be outputted and fingerprinted at the root of `dist/`. + +### Service Worker + +There is experimental service worker support for production builds available in the CLI. +To enable it, run the following commands: +``` +npm install @angular/service-worker --save +ng set apps.0.serviceWorker=true +``` + +On `--prod` builds a service worker manifest will be created and loaded automatically. +Remember to disable the service worker while developing to avoid stale code. + +Note: service worker support is experimental and subject to change. + +### ES2015 support + +To build in ES2015 mode, edit `./tsconfig.json` to use `"target": "es2015"` (instead of `es5`). + +This will cause application TypeScript and Uglify be output as ES2015, and third party libraries +to be loaded through the `es2015` entry in `package.json` if available. + +Be aware that JIT does not support ES2015 and so you should build/serve your app with `--aot`. +See https://github.com/angular/angular-cli/issues/7797 for details. + +## Options +
+ aot +

+ --aot default value: false +

+

+ Build using Ahead of Time compilation. +

+
+ +
+ app +

+ --app (aliases: -a) +

+

+ Specifies app name or index to use. +

+
+ +
+ base-href +

+ --base-href (aliases: -bh) +

+

+ Base url for the application being built. +

+
+ +
+ deploy-url +

+ --deploy-url (aliases: -d) +

+

+ URL where files will be deployed. +

+
+ +
+ environment +

+ --environment (aliases: -e) +

+

+ Defines the build environment. +

+
+ +
+ extract-css +

+ --extract-css (aliases: -ec) +

+

+ Extract css from global styles onto css files instead of js ones. +

+
+ +
+ i18n-file +

+ --i18n-file +

+

+ Localization file to use for i18n. +

+
+ +
+ i18n-format +

+ --i18n-format +

+

+ Format of the localization file specified with --i18n-file. +

+
+ +
+ locale +

+ --locale +

+

+ Locale to use for i18n. +

+
+ +
+ missing-translation +

+ --missing-translation +

+

+ How to handle missing translations for i18n. +

+

+ Values: error, warning, ignore +

+
+ +
+ output-hashing +

+ --output-hashing (aliases: -oh) +

+

+ Define the output filename cache-busting hashing mode. +

+

+ Values: none, all, media, bundles +

+
+ +
+ output-path +

+ --output-path (aliases: -op) +

+

+ Path where output will be placed. +

+
+ +
+ delete-output-path +

+ --delete-output-path (aliases: -dop) default value: true +

+

+ Delete the output-path directory. +

+
+ +
+ poll +

+ --poll +

+

+ Enable and define the file watching poll time period (milliseconds). +

+
+ +
+ progress +

+ --progress (aliases: -pr) default value: true inside TTY, false otherwise +

+

+ Log progress to the console while building. +

+
+ +
+ sourcemap +

+ --sourcemap (aliases: -sm, sourcemaps) +

+

+ Output sourcemaps. +

+
+ +
+ stats-json +

+ --stats-json +

+

+ Generates a stats.json file which can be analyzed using tools such as: webpack-bundle-analyzer or https://webpack.github.io/analyse. +

+
+ +
+ target +

+ --target (aliases: -t, -dev, -prod) default value: development +

+

+ Defines the build target. +

+
+ +
+ vendor-chunk +

+ --vendor-chunk (aliases: -vc) default value: true +

+

+ Use a separate bundle containing only vendor libraries. +

+
+ +
+ common-chunk +

+ --common-chunk (aliases: -cc) default value: true +

+

+ Use a separate bundle containing code used across multiple bundles. +

+
+ +
+ verbose +

+ --verbose (aliases: -v) default value: false +

+

+ Adds more details to output logging. +

+
+ +
+ watch +

+ --watch (aliases: -w) +

+

+ Run build when files change. +

+
+ +
+ show-circular-dependencies +

+ --show-circular-dependencies (aliases: -scd) +

+

+ Show circular dependency warnings on builds. +

+
+ +
+ build-optimizer +

+ --build-optimizer +

+

+ Enables @angular-devkit/build-optimizer optimizations when using `--aot`. +

+
+ +
+ named-chunks +

+ --named-chunks (aliases: -nc) +

+

+ Use file name for lazy loaded chunks. +

+
+ +
+ bundle-dependencies +

+ --bundle-dependencies +

+

+ In a server build, state whether `all` or `none` dependencies should be bundles in the output. +

+
+ + +
+ extract-licenses +

+ --extract-licenses default value: true +

+

+ Extract all licenses in a separate file, in the case of production builds only. +

+
diff --git a/docs/documentation/1-x/config.md b/docs/documentation/1-x/config.md new file mode 100644 index 000000000000..b114b60c0d7d --- /dev/null +++ b/docs/documentation/1-x/config.md @@ -0,0 +1,20 @@ + + +# ng config + +## Overview +`ng config [key] [value]` Get/set configuration values. +`[key]` should be in JSON path format. Example: `a[3].foo.bar[2]`. +If only the `[key]` is provided it will get the value. +If both the `[key]` and `[value]` are provided it will set the value. + +## Options +
+ global +

+ --global default value: false +

+

+ Get/set the value in the global configuration (in your home directory). +

+
diff --git a/docs/documentation/1-x/doc.md b/docs/documentation/1-x/doc.md new file mode 100644 index 000000000000..f6ea8b2d8d33 --- /dev/null +++ b/docs/documentation/1-x/doc.md @@ -0,0 +1,18 @@ + + +# ng doc + +## Overview +`ng doc [search term]` Opens the official Angular API documentation for a given keyword on [angular.io](https://angular.io). + +## Options + +
+ search +

+ --search (alias: -s) default value: false +

+

+ Search for the keyword in the whole [angular.io](https://angular.io) documentation instead of just the API. +

+
diff --git a/docs/documentation/1-x/e2e.md b/docs/documentation/1-x/e2e.md new file mode 100644 index 000000000000..ebfaf64e8d96 --- /dev/null +++ b/docs/documentation/1-x/e2e.md @@ -0,0 +1,81 @@ + + +# ng e2e + +## Overview +`ng e2e` serves the application and runs end-to-end tests + +### Running end-to-end tests + +```bash +ng e2e +``` + +End-to-end tests are run via [Protractor](https://angular.github.io/protractor/). + +## Options + +Please note that options that are supported by `ng serve` are also supported by `ng e2e` + +
+ config +

+ --config (aliases: -c) +

+

+ Use a specific config file. Defaults to the protractor config file in .angular-cli.json. +

+
+ +
+ element-explorer +

+ --element-explorer (aliases: -ee) default value: false +

+

+ Start Protractor's Element Explorer for debugging. +

+
+ +
+ serve +

+ --serve (aliases: -s) default value: true +

+

+ Compile and Serve the app. All serve options are also available. The live-reload option defaults to false, and the default port will be random. +

+

+ NOTE: Build failure will not launch the e2e task. You must first fix error(s) and run e2e again. +

+
+ +
+ specs +

+ --specs (aliases: -sp) default value: [] +

+

+ Override specs in the protractor config. Can send in multiple specs by repeating flag (ng e2e --specs=spec1.ts --specs=spec2.ts). +

+
+ +
+ suite +

+ --suite (aliases: -su) +

+

+ Override suite in the protractor config. Can send in multiple suite by comma separated values (ng e2e --suite=suiteA,suiteB). +

+
+ +
+ webdriver-update +

+ --webdriver-update (aliases: -wu) default value: true +

+

+ Try to update webdriver. +

+
diff --git a/docs/documentation/1-x/eject.md b/docs/documentation/1-x/eject.md new file mode 100644 index 000000000000..d1c55e34a6a0 --- /dev/null +++ b/docs/documentation/1-x/eject.md @@ -0,0 +1,233 @@ + + +# ng eject + +## Overview +`ng eject` ejects your app and output the proper webpack configuration and scripts. + +This command uses the same flags as `ng build`, generating webpack configuration to match those +flags. + +You can use `--force` to overwrite existing configurations. +You can eject multiple times, to have a dev and prod config for instance, by renaming the ejected +configuration and using the `--force` flag. + +### Ejecting the CLI + +```bash +ng eject +``` + +## Options +
+ aot +

+ --aot +

+

+ Build using Ahead of Time compilation. +

+
+ +
+ app +

+ --app (aliases: -a) default value: 1st app +

+

+ Specifies app name to use. +

+
+ +
+ base-href +

+ --base-href (aliases: -bh) +

+

+ Base url for the application being built. +

+
+ +
+ deploy-url +

+ --deploy-url (aliases: -d) +

+

+ URL where files will be deployed. +

+
+ +
+ environment +

+ --environment (aliases: -e) +

+

+ Defines the build environment. +

+
+ +
+ extract-css +

+ --extract-css (aliases: -ec) +

+

+ Extract css from global styles onto css files instead of js ones. +

+
+ +
+ force +

+ --force default value: false +

+

+ Overwrite any webpack.config.js and npm scripts already existing. +

+
+ +
+ i18n-file +

+ --i18n-file +

+

+ Localization file to use for i18n. +

+
+ +
+ i18n-format +

+ --i18n-format +

+

+ Format of the localization file specified with --i18n-file. +

+
+ +
+ locale +

+ --locale +

+

+ Locale to use for i18n. +

+
+ +
+ missing-translation +

+ --missing-translation +

+

+ How to handle missing translations for i18n. +

+

+ Values: error, warning, ignore +

+
+ +
+ output-hashing +

+ --output-hashing (aliases: -oh) default value: +

+

+ Define the output filename cache-busting hashing mode. Possible values: none, all, media, bundles +

+
+ +
+ output-path +

+ --output-path (aliases: -op) default value: +

+

+ Path where output will be placed. +

+
+ +
+ poll +

+ --poll +

+

+ Enable and define the file watching poll time period (milliseconds) . +

+
+ +
+ progress +

+ --progress (aliases: -pr) default value: true inside TTY, false otherwise +

+

+ Log progress to the console while building. +

+
+ +
+ sourcemap +

+ --sourcemap (aliases: -sm, sourcemaps) +

+

+ Output sourcemaps. +

+
+ +
+ target +

+ --target (aliases: -t, -dev, -prod) default value: development +

+

+ Defines the build target. +

+
+ +
+ vendor-chunk +

+ --vendor-chunk (aliases: -vc) default value: true +

+

+ Use a separate bundle containing only vendor libraries. +

+
+ +
+ common-chunk +

+ --common-chunk (aliases: -cc) default value: true +

+

+ Use a separate bundle containing code used across multiple bundles. +

+
+ +
+ verbose +

+ --verbose (aliases: -v) default value: false +

+

+ Adds more details to output logging. +

+
+ +
+ watch +

+ --watch (aliases: -w) +

+

+ Run build when files change. +

+
diff --git a/docs/documentation/1-x/generate.md b/docs/documentation/1-x/generate.md new file mode 100644 index 000000000000..74bae41b3a65 --- /dev/null +++ b/docs/documentation/1-x/generate.md @@ -0,0 +1,48 @@ + + +# ng generate + +## Overview +`ng generate [name]` generates the specified blueprint + +## Available blueprints: + - [class](1-x/generate/class) + - [component](1-x/generate/component) + - [directive](1-x/generate/directive) + - [enum](1-x/generate/enum) + - [guard](1-x/generate/guard) + - [interface](1-x/generate/interface) + - [module](1-x/generate/module) + - [pipe](1-x/generate/pipe) + - [service](1-x/generate/service) + +## Options +
+ dry-run +

+ --dry-run (aliases: -d) default value: false +

+

+ Run through without making any changes. +

+
+ +
+ force +

+ --force (aliases: -f) default value: false +

+

+ Forces overwriting of files. +

+
+ +
+ app +

+ --app +

+

+ Specifies app name to use. +

+
diff --git a/docs/documentation/1-x/generate/class.md b/docs/documentation/1-x/generate/class.md new file mode 100644 index 000000000000..e1ccd6f5c1b0 --- /dev/null +++ b/docs/documentation/1-x/generate/class.md @@ -0,0 +1,27 @@ + + +# ng generate class + +## Overview +`ng generate class [name]` generates a class + +## Options +
+ app +

+ --app (aliases: -a) default value: 1st app +

+

+ Specifies app name to use. +

+
+ +
+ spec +

+ --spec +

+

+ Specifies if a spec file is generated. +

+
diff --git a/docs/documentation/1-x/generate/component.md b/docs/documentation/1-x/generate/component.md new file mode 100644 index 000000000000..37b31a077b67 --- /dev/null +++ b/docs/documentation/1-x/generate/component.md @@ -0,0 +1,117 @@ + + +# ng generate component + +## Overview +`ng generate component [name]` generates a component + +## Options +
+ app +

+ --app (aliases: -a) default value: 1st app +

+

+ Specifies app name to use. +

+
+ +
+ change-detection +

+ --change-detection (aliases: -c) +

+

+ Specifies the change detection strategy. +

+
+ +
+ flat +

+ --flat default value: false +

+

+ Flag to indicate if a dir is created. +

+
+ +
+ export +

+ --export default value: false +

+

+ Specifies if declaring module exports the component. +

+
+ +
+ inline-style +

+ --inline-style (aliases: -s) default value: false +

+

+ Specifies if the style will be in the ts file. +

+
+ +
+ inline-template +

+ --inline-template (aliases: -t) default value: false +

+

+ Specifies if the template will be in the ts file. +

+
+ +
+ module +

+ --module (aliases: -m) +

+

+ Allows specification of the declaring module's file name (e.g `app.module.ts`). +

+
+ +
+ prefix +

+ --prefix +

+

+ Specifies whether to use the prefix. +

+
+ +
+ skip-import +

+ --skip-import default value: false +

+

+ Allows for skipping the module import. +

+
+ +
+ spec +

+ --spec +

+

+ Specifies if a spec file is generated. +

+
+ +
+ view-encapsulation +

+ --view-encapsulation (aliases: -v) +

+

+ Specifies the view encapsulation strategy. +

+
diff --git a/docs/documentation/1-x/generate/directive.md b/docs/documentation/1-x/generate/directive.md new file mode 100644 index 000000000000..9ed8f37046c7 --- /dev/null +++ b/docs/documentation/1-x/generate/directive.md @@ -0,0 +1,77 @@ + + +# ng generate directive + +## Overview +`ng generate directive [name]` generates a directive + +## Options +
+ app +

+ --app (aliases: -a) default value: 1st app +

+

+ Specifies app name to use. +

+
+ +
+ export +

+ --export default value: false +

+

+ Specifies if declaring module exports the component. +

+
+ +
+ flat +

+ --flat +

+

+ Flag to indicate if a dir is created. +

+
+ +
+ module +

+ --module (aliases: -m) +

+

+ Allows specification of the declaring module. +

+
+ +
+ prefix +

+ --prefix +

+

+ Specifies whether to use the prefix. +

+
+ +
+ skip-import +

+ --skip-import +

+

+ Allows for skipping the module import. +

+
+ +
+ spec +

+ --spec +

+

+ Specifies if a spec file is generated. +

+
diff --git a/docs/documentation/1-x/generate/enum.md b/docs/documentation/1-x/generate/enum.md new file mode 100644 index 000000000000..c7b4b66ff19f --- /dev/null +++ b/docs/documentation/1-x/generate/enum.md @@ -0,0 +1,17 @@ + + +# ng generate enum + +## Overview +`ng generate enum [name]` generates an enumeration + +## Options +
+ app +

+ --app (aliases: -a) default value: 1st app +

+

+ Specifies app name to use. +

+
diff --git a/docs/documentation/1-x/generate/guard.md b/docs/documentation/1-x/generate/guard.md new file mode 100644 index 000000000000..3435dd172f66 --- /dev/null +++ b/docs/documentation/1-x/generate/guard.md @@ -0,0 +1,45 @@ +# ng generate guard + +## Overview +`ng generate guard [name]` generates a guard + +## Options +
+ app +

+ --app (aliases: -a) default value: 1st app +

+

+ Specifies app name to use. +

+
+ +
+ flat +

+ --flat +

+

+ Indicate if a dir is created. +

+
+ +
+ module +

+ --module (aliases: -m) +

+

+ Specifies where the guard should be provided. +

+
+ +
+ spec +

+ --spec +

+

+ Specifies if a spec file is generated. +

+
diff --git a/docs/documentation/1-x/generate/interface.md b/docs/documentation/1-x/generate/interface.md new file mode 100644 index 000000000000..8aa09de4ca76 --- /dev/null +++ b/docs/documentation/1-x/generate/interface.md @@ -0,0 +1,24 @@ + + +# ng generate interface + +## Overview +`ng generate interface [name] ` generates an interface + +## Options +
+ app +

+ --app (aliases: -a) default value: 1st app +

+

+ Specifies app name to use. +

+
+ +
+ type +

+ Optional String to specify the type of interface. +

+
diff --git a/docs/documentation/1-x/generate/module.md b/docs/documentation/1-x/generate/module.md new file mode 100644 index 000000000000..55559f122406 --- /dev/null +++ b/docs/documentation/1-x/generate/module.md @@ -0,0 +1,59 @@ + + +# ng generate module + +## Overview +`ng generate module [name]` generates an NgModule + +## Options +
+ app +

+ --app (aliases: -a) default value: 1st app +

+

+ Specifies app name to use. +

+
+ +
+ flat +

+ --flat +

+

+ Flag to indicate if a dir is created. +

+
+ +
+ module +

+ --module (aliases: -m) +

+

+ Specifies where the module should be imported. +

+
+ +
+ spec +

+ --spec +

+

+ Specifies if a spec file is generated. +

+
+ +
+ routing +

+ --routing +

+

+ Specifies if a routing module file should be generated. +

+
+ + diff --git a/docs/documentation/1-x/generate/pipe.md b/docs/documentation/1-x/generate/pipe.md new file mode 100644 index 000000000000..b8ee09497f3a --- /dev/null +++ b/docs/documentation/1-x/generate/pipe.md @@ -0,0 +1,67 @@ + + +# ng generate pipe + +## Overview +`ng generate pipe [name]` generates a pipe + +## Options +
+ app +

+ --app (aliases: -a) default value: 1st app +

+

+ Specifies app name to use. +

+
+ +
+ export +

+ --export +

+

+ Specifies if declaring module exports the pipe. +

+
+ +
+ flat +

+ --flat +

+

+ Flag to indicate if a dir is created. +

+
+ +
+ module +

+ --module (aliases: -m) +

+

+ Allows specification of the declaring module. +

+
+ +
+ skip-import +

+ --skip-import +

+

+ Allows for skipping the module import. +

+
+ +
+ spec +

+ --spec +

+

+ Specifies if a spec file is generated. +

+
diff --git a/docs/documentation/1-x/generate/service.md b/docs/documentation/1-x/generate/service.md new file mode 100644 index 000000000000..eb94f5c5b9bc --- /dev/null +++ b/docs/documentation/1-x/generate/service.md @@ -0,0 +1,47 @@ + + +# ng generate service + +## Overview +`ng generate service [name]` generates a service + +## Options +
+ app +

+ --app (aliases: -a) default value: 1st app +

+

+ Specifies app name to use. +

+
+ +
+ flat +

+ --flat +

+

+ Flag to indicate if a dir is created. +

+
+ +
+ module +

+ --module (aliases: -m) +

+

+ Specifies where the service should be provided. +

+
+ +
+ spec +

+ --spec +

+

+ Specifies if a spec file is generated. +

+
diff --git a/docs/documentation/1-x/home.md b/docs/documentation/1-x/home.md new file mode 100644 index 000000000000..ca01215d4f02 --- /dev/null +++ b/docs/documentation/1-x/home.md @@ -0,0 +1,66 @@ + + +# Angular CLI + +NOTE: this documentation is for Angular CLI 1.x. For Angular CLI 6 go [here](home) instead. + +### Overview +The Angular CLI is a tool to initialize, develop, scaffold and maintain [Angular](https://angular.io) applications + +### Getting Started +To install the Angular CLI: +``` +npm install -g @angular/cli +``` + +Generating and serving an Angular project via a development server +[Create](1-x/new) and [run](1-x/serve) a new project: +``` +ng new my-project +cd my-project +ng serve +``` +Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files. + +### Bundling + +All builds make use of bundling, and using the `--prod` flag in `ng build --prod` +or `ng serve --prod` will also make use of uglifying and tree-shaking functionality. + +### Running unit tests + +```bash +ng test +``` + +Tests will execute after a build is executed via [Karma](http://karma-runner.github.io/0.13/index.html), and it will automatically watch your files for changes. You can run tests a single time via `--watch=false` or `--single-run`. + +### Running end-to-end tests + +```bash +ng e2e +``` + +Before running the tests make sure you are serving the app via `ng serve`. +End-to-end tests are run via [Protractor](https://angular.github.io/protractor/). + +### Additional Commands +* [ng new](1-x/new) +* [ng serve](1-x/serve) +* [ng generate](1-x/generate) +* [ng lint](1-x/lint) +* [ng test](1-x/test) +* [ng e2e](1-x/e2e) +* [ng build](1-x/build) +* [ng get/ng set](1-x/config) +* [ng doc](1-x/doc) +* [ng eject](1-x/eject) +* [ng xi18n](1-x/xi18n) +* [ng update](1-x/update) + +## Angular CLI Config Schema +* [Config Schema](1-x/angular-cli) + +### Additional Information +There are several [stories](1-x/stories) which will walk you through setting up +additional aspects of Angular applications. diff --git a/docs/documentation/1-x/lint.md b/docs/documentation/1-x/lint.md new file mode 100644 index 000000000000..95d94bb5b73d --- /dev/null +++ b/docs/documentation/1-x/lint.md @@ -0,0 +1,47 @@ + + +# ng lint + +## Overview +`ng lint` will lint you app code using tslint. + +## Options +
+ fix +

+ --fix default value: false +

+

+ Fixes linting errors (may overwrite linted files). +

+
+ +
+ force +

+ --force default value: false +

+

+ Succeeds even if there was linting errors. +

+
+ +
+ type-check +

+ --type-check default value: false +

+

+ Controls the type check for linting. +

+
+ +
+ format +

+ --format (aliases: -t) default value: prose +

+

+ Output format (prose, json, stylish, verbose, pmd, msbuild, checkstyle, vso, fileslist). +

+
diff --git a/docs/documentation/1-x/new.md b/docs/documentation/1-x/new.md new file mode 100644 index 000000000000..2dedb230af07 --- /dev/null +++ b/docs/documentation/1-x/new.md @@ -0,0 +1,168 @@ + + +# ng new + +## Overview +`ng new [name]` creates a new angular application. + +Default applications are created in a directory of the same name, with an initialized Angular application. + +## Options +
+ directory +

+ --directory (alias: -d) default value: dir +

+

+ The directory name to create the app in. +

+
+ +
+ dry-run +

+ --dry-run (alias: -d) default value: false +

+

+ Run through without making any changes. Will list all files that would have been created when running ng new. +

+
+ +
+ inline-style +

+ --inline-style (alias: -s) default value: false +

+

+ Should have an inline style. +

+
+ +
+ inline-template +

+ --inline-template (alias: -t) default value: false +

+

+ Should have an inline template. +

+
+ +
+ minimal +

+ --minimal default value: false +

+

+ Should create a minimal app. +

+
+ +
+ prefix +

+ --prefix (alias: -p) default value: app +

+

+ The prefix to use for all component selectors. +

+

+ You can later change the value in .angular-cli.json (apps[0].prefix). +

+
+ +
+ routing +

+ --routing default value: false +

+

+ Generate a routing module. +

+
+ +
+ skip-commit +

+ --skip-commit (alias: -sc) default value: false +

+

+ Skip committing the first commit to git. +

+
+ +
+ skip-git +

+ --skip-git (alias: -g) default value: false +

+

+ Skip initializing a git repository. +

+
+ +
+ skip-install +

+ --skip-install (alias: -si) default value: false +

+

+ Skip installing packages. +

+
+ +
+ skip-tests +

+ --skip-tests (aliases: -S) default value: false +

+

+ Skip creating spec files. +

+

+ Skip including e2e functionality. +

+
+ +
+ source-dir +

+ --source-dir (alias: -D) default value: src +

+

+ The name of the source directory. +

+

+ You can later change the value in .angular-cli.json (apps[0].root). +

+
+ +
+ style +

+ --style default value: css +

+
+ The style file default extension. Possible values: +
    +
  • css
  • +
  • scss
  • +
  • less
  • +
  • sass
  • +
  • styl (stylus)
  • +
+
+

+ You can later change the value in .angular-cli.json (defaults.styleExt). +

+
+ +
+ verbose +

+ --verbose (alias: -v) default value: false +

+

+ Adds more details to output logging. +

+
diff --git a/docs/documentation/1-x/serve.md b/docs/documentation/1-x/serve.md new file mode 100644 index 000000000000..2a441a2dc59c --- /dev/null +++ b/docs/documentation/1-x/serve.md @@ -0,0 +1,316 @@ + + +# ng serve + +## Overview +`ng serve` builds the application and starts a web server. + +All the build Options are available in serve, below are the additional options. + +## Options +
+ host +

+ --host (aliases: -H) default value: localhost +

+

+ Listens only on localhost by default. +

+
+ +
+ hmr +

+ --hmr default value: false +

+

+ Enable hot module replacement. +

+
+ +
+ live-reload +

+ --live-reload (aliases: -lr) default value: true +

+

+ Whether to reload the page on change, using live-reload. +

+
+ +
+ public-host +

+ --public-host (aliases: --live-reload-client) +

+

+ Specify the URL that the browser client will use. +

+
+ +
+ disable-host-check +

+ --disable-host-check default value: false +

+

+ Don't verify connected clients are part of allowed hosts. +

+
+ +
+ open +

+ --open (aliases: -o) default value: false +

+

+ Opens the url in default browser. +

+
+ +
+ port +

+ --port (aliases: -p) default value: 4200 +

+

+ Port to listen to for serving. --port 0 will get a free port +

+
+ +
+ ssl +

+ --ssl +

+

+ Serve using HTTPS. +

+
+ +
+ ssl-cert +

+ --ssl-cert (aliases: -) default value: +

+

+ SSL certificate to use for serving HTTPS. +

+
+ +
+ ssl-key +

+ --ssl-key +

+

+ SSL key to use for serving HTTPS. +

+
+ +
+ aot +

+ --aot +

+

+ Build using Ahead of Time compilation. +

+
+ +
+ base-href +

+ --base-href (aliases: -bh) +

+

+ Base url for the application being built. +

+
+ +
+ deploy-url +

+ --deploy-url (aliases: -d) +

+

+ URL where files will be deployed. +

+
+ +
+ environment +

+ --environment (aliases: -e) +

+

+ Defines the build environment. +

+
+ +
+ extract-css +

+ --extract-css (aliases: -ec) +

+

+ Extract css from global styles onto css files instead of js ones. +

+
+ +
+ i18n-file +

+ --i18n-file +

+

+ Localization file to use for i18n. +

+
+ +
+ i18n-format +

+ --i18n-format +

+

+ Format of the localization file specified with --i18n-file. +

+
+ +
+ locale +

+ --locale +

+

+ Locale to use for i18n. +

+
+ +
+ missing-translation +

+ --missing-translation +

+

+ How to handle missing translations for i18n. +

+

+ Values: error, warning, ignore +

+
+ +
+ output-hashing +

+ --output-hashing (aliases: -oh) default value: +

+

+ Define the output filename cache-busting hashing mode. Possible values: none, all, media, bundles +

+
+ +
+ output-path +

+ --output-path (aliases: -op) default value: +

+

+ Path where output will be placed. +

+
+ +
+ poll +

+ --poll +

+

+ Enable and define the file watching poll time period (milliseconds) . +

+
+ +
+ progress +

+ --progress (aliases: -pr) default value: true inside TTY, false otherwise +

+

+ Log progress to the console while building. +

+
+ +
+ proxy-config +

+ --proxy-config (aliases: -pc) +

+

+ Use a proxy configuration file to send some requests to a backend server rather than the webpack dev server. +

+
+ +
+ sourcemap +

+ --sourcemap (aliases: -sm, sourcemaps) +

+

+ Output sourcemaps. +

+
+ +
+ target +

+ --target (aliases: -t, -dev, -prod) default value: development +

+

+ Defines the build target. +

+
+ +
+ vendor-chunk +

+ --vendor-chunk (aliases: -vc) default value: true +

+

+ Use a separate bundle containing only vendor libraries. +

+
+ +
+ common-chunk +

+ --common-chunk (aliases: -cc) default value: true +

+

+ Use a separate bundle containing code used across multiple bundles. +

+
+ +
+ verbose +

+ --verbose (aliases: -v) default value: false +

+

+ Adds more details to output logging. +

+
+ +
+ watch +

+ --watch (aliases: -w) +

+

+ Run build when files change. +

+
+ + +## Note +When running `ng serve`, the compiled output is served from memory, not from disk. This means that the application being served is not located on disk in the `dist` folder. diff --git a/docs/documentation/1-x/stories.md b/docs/documentation/1-x/stories.md new file mode 100644 index 000000000000..d602d59e328c --- /dev/null +++ b/docs/documentation/1-x/stories.md @@ -0,0 +1,34 @@ + + +# Stories describing how to do more with the CLI + + - [1.0 Update](1-x/stories/1.0-update) + - [Asset Configuration](1-x/stories/asset-configuration) + - [Autocompletion](1-x/stories/autocompletion) + - [Configure Hot Module Replacement](1-x/stories/configure-hmr) + - [CSS Preprocessors](1-x/stories/css-preprocessors) + - [Global Lib](1-x/stories/global-lib) + - [Global Scripts](1-x/stories/global-scripts) + - [Global Styles](1-x/stories/global-styles) + - [Angular Flex Layout](1-x/stories/include-angular-flex) + - [Angular Material](1-x/stories/include-angular-material) + - [AngularFire](1-x/stories/include-angularfire) + - [Bootstrap](1-x/stories/include-bootstrap) + - [Budgets](1-x/stories/budgets) + - [Font Awesome](1-x/stories/include-font-awesome) + - [Moving Into the CLI](1-x/stories/moving-into-the-cli) + - [Moving Out of the CLI](1-x/stories/moving-out-of-the-cli) + - [Proxy](1-x/stories/proxy) + - [Routing](1-x/stories/routing) + - [3rd Party Lib](1-x/stories/third-party-lib) + - [Corporate Proxy](1-x/stories/using-corporate-proxy) + - [Internationalization (i18n)](1-x/stories/internationalization) + - [Serve from Disk](1-x/stories/disk-serve) + - [Code Coverage](1-x/stories/code-coverage) + - [Application Environments](1-x/stories/application-environments) + - [Autoprefixer Configuration](1-x/stories/autoprefixer) + - [Deploy to GitHub Pages](1-x/stories/github-pages) + - [Linked Library](1-x/stories/linked-library) + - [Multiple apps](1-x/stories/multiple-apps) + - [Continuous Integration](1-x/stories/continuous-integration) + - [Universal Rendering](1-x/stories/universal-rendering) diff --git a/docs/documentation/1-x/stories/1.0-update.md b/docs/documentation/1-x/stories/1.0-update.md new file mode 100644 index 000000000000..9a32e4555ab9 --- /dev/null +++ b/docs/documentation/1-x/stories/1.0-update.md @@ -0,0 +1,503 @@ +# Angular CLI migration guide + +In this migration guide we'll be looking at some of the major changes to CLI projects in the +last two months. + +Most of these changes were not breaking changes and your project should work fine without them. + +But if you've been waiting for the perfect time to update, this is it! +Along with major rebuild speed increases, we've been busy adding a lot of features. + +Documentation has also completely moved to [the wiki](https://github.com/angular/angular-cli/wiki). +The new [Stories](https://github.com/angular/angular-cli/wiki/stories) section covers common usage +scenarios, so be sure to have a look! + +Below are the changes between a project generated two months ago, with `1.0.0-beta.24` and +a `1.0.0` project. +If you kept your project up to date you might have a lot of these already. + +You can find more details about changes between versions in [the releases tab on GitHub](https://github.com/angular/angular-cli/releases). + +If you prefer, you can also generate a new project in a separate folder using + `ng new upgrade-project --skip-install` and compare the differences. + +## @angular/cli + +Angular CLI can now be found on NPM under `@angular/cli` instead of `angular-cli`, and upgrading is a simple 3 step process: + +1. Uninstall old version +2. Update node/npm if necessary +3. Install new version + +### 1. Uninstall old version + +If you're using Angular CLI `beta.28` or less, you need to uninstall the `angular-cli` packages: +```bash +npm uninstall -g angular-cli # Remove global package +npm uninstall --save-dev angular-cli # Remove from package.json +``` + +Otherwise, uninstall the `@angular/cli` packages: +```bash +npm uninstall -g @angular/cli # Remove global package +npm uninstall --save-dev @angular/cli # Remove from package.json +``` + +Also purge the cache and local packages: +``` +rm -rf node_modules dist # Use rmdir on Windows +npm cache clean +``` + +At this point, you should not have Angular CLI on your system anymore. If invoking Angular CLI at the commandline reveals that it still exists on your system, you will have to manually remove it. See _Manually removing residual Angular CLI_. + +### 2. Update node/npm if necessary + +Angular CLI now has a minimum requirement of Node 6.9.0 or higher, together with NPM 3 or higher. + +If your Node or NPM versions do not meet these requirements, please refer to [the documentation](https://docs.npmjs.com/getting-started/installing-node) on how to upgrade. + +### 3. Install the new version + +To update Angular CLI to a new version, you must update both the global package and your project's local package: + +```bash +npm install -g @angular/cli@latest # Global package +npm install --save-dev @angular/cli@latest # Local package +npm install # Restore removed dependencies +``` + +### Manually removing residual Angular CLI + +If you accidentally updated NPM before removing the old Angular CLI, you may find that uninstalling the package using `npm uninstall` is proving fruitless. This _could_ be because the global install (and uninstall) path changed between versions of npm from `/usr/local/lib` to `/usr/lib`, and hence, no longer searches through the old directory. In this case you'll have to remove it manually: + +`rm -rf /usr/local/lib/node_modules/@angular/cli` + +If the old Angular CLI package _still_ persists, you'll need to research how to remove it before proceeding with the upgrade. + +## .angular-cli.json + +`angular-cli.json` is now `.angular-cli.json`, but we still accept the old config file name. + +A few new properties have changed in it: + +### Schema + +Add the `$schema` property above project for handy IDE support on your config file: + +``` +"$schema": "./node_modules/@angular/cli/lib/config/schema.json", +``` + +### Polyfills + +There is now a dedicated entry for polyfills ([#3812](https://github.com/angular/angular-cli/pull/3812)) +inside `apps[0].polyfills`, between `main` and `test`: + +``` +"main": "main.ts", +"polyfills": "polyfills.ts", +"test": "test.ts", +``` + +Add it and remove `import './polyfills.ts';` from `src/main.ts` and `src/test.ts`. + +We also added a lot of descriptive comments to the existing `src/polyfills.ts` file, explaining +which polyfills are needed for what browsers. +Be sure to check it out in a new project! + +### Environments + +A new `environmentSource` entry ([#4705](https://github.com/angular/angular-cli/pull/4705)) +replaces the previous source entry inside environments. + +To migrate angular-cli.json follow the example below: + +Before: +``` +"environments": { + "source": "environments/environment.ts", + "dev": "environments/environment.ts", + "prod": "environments/environment.prod.ts" +} +``` + +After: + +``` +"environmentSource": "environments/environment.ts", +"environments": { + "dev": "environments/environment.ts", + "prod": "environments/environment.prod.ts" +} +``` + +### Linting + +The CLI now uses the TSLint API ([#4248](https://github.com/angular/angular-cli/pull/4248)) +to lint several TS projects at once. + +There is a new `lint` entry in `.angular-cli.json` between `e2e` and `test` where all linting +targets are listed: + +``` +"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" + } +}, +``` + +### Generator defaults + +Now you can list generator defaults per generator ([#4389](https://github.com/angular/angular-cli/pull/4389)) +in `defaults`. + +Instead of: +``` +"defaults": { + "styleExt": "css", + "prefixInterfaces": false, + "inline": { + "style": false, + "template": false + }, + "spec": { + "class": false, + "component": true, + "directive": true, + "module": false, + "pipe": true, + "service": true + } +} +``` + +You can instead list the flags as they appear on [the generator command](https://github.com/angular/angular-cli/wiki/generate-component): +``` +"defaults": { + "styleExt": "css", + "component": { + "inlineTemplate": false, + "spec": true + } +} +``` + +## One tsconfig per app + +CLI projects now use one tsconfig per app ([#4924](https://github.com/angular/angular-cli/pull/4924)). + +- `src/tsconfig.app.json`: configuration for the Angular app. +``` +{ + "compilerOptions": { + "sourceMap": true, + "declaration": false, + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "target": "es5", + "lib": [ + "es2017", + "dom" + ], + "outDir": "../out-tsc/app", + "module": "es2015", + "baseUrl": "", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} +``` +- `src/tsconfig.spec.json`: configuration for the unit tests. +``` +{ + "compilerOptions": { + "sourceMap": true, + "declaration": false, + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "lib": [ + "es2017", + "dom" + ], + "outDir": "../out-tsc/spec", + "module": "commonjs", + "target": "es5", + "baseUrl": "", + "types": [ + "jasmine", + "node" + ] + }, + "files": [ + "test.ts" + ], + "include": [ + "**/*.spec.ts", + "**/*.d.ts" + ] +} + +``` +- `e2e/tsconfig.e2e.json`: configuration for the e2e tests. +``` +{ + "compilerOptions": { + "sourceMap": true, + "declaration": false, + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "lib": [ + "es2017" + ], + "outDir": "../out-tsc/e2e", + "module": "commonjs", + "target": "es5", + "types":[ + "jasmine", + "node" + ] + } +} + +``` + +There is an additional root-level `tsconfig.json` that is used for IDE integration. +``` +{ + "compileOnSave": false, + "compilerOptions": { + "outDir": "./dist/out-tsc", + "baseUrl": "src", + "sourceMap": true, + "declaration": false, + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "target": "es5", + "typeRoots": [ + "node_modules/@types" + ], + "lib": [ + "es2017", + "dom" + ] + } +} +``` + +You can delete `e2e/tsconfig.json` and `src/tsconfig.json` after adding these. + +Also update `.angular-cli.json` to use them inside `apps[0]`: + +``` +"tsconfig": "tsconfig.app.json", +"testTsconfig": "tsconfig.spec.json", +``` + +Then update `protractor.conf.js` to use the e2e config as well: +``` +beforeLaunch: function() { + require('ts-node').register({ + project: 'e2e/tsconfig.e2e.json' + }); +}, +``` + +These configs have an `types` array where you should add any package you install via `@types/*`. +This array helps keep typings isolated to the apps that really need them and avoid problems with +duplicate typings. + +For instance, the unit test `tsconfig` has `jasmine` and `node`, which correspond to +`@types/jasmine` and `@types/node`. +Add any typings you've installed to the appropriate `tsconfig` as well. + +## typings.d.ts + +There's a new `src/typings.d.ts` file that serves two purposes: +- provides a centralized place for users to add their own custom typings +- makes it easy to use components that use `module.id`, present in the documentation and in snippets + +``` +/* SystemJS module definition */ +declare var module: NodeModule; +interface NodeModule { + id: string; +} +``` + +## package.json + +We've updated a lot of packages over the last months in order to keep projects up to date. + +Additions or removals are found in bold below. + +Packages in `dependencies`: +- `@angular/*` packages now have a `^4.0.0` minimum +- `core-js` remains unchanged at `^2.4.1` +- `rxjs` was updated to `^5.1.0` +- `ts-helpers` was **removed** +- `zone.js` was updated to `^0.8.4` + +Packages in `devDependencies`: +- `@angular/cli` at `1.0.0` replaces `angular-cli` +- `@angular/compiler-cli` is also at `^4.0.0` +- `@types/jasmine` remains unchanged and pinned at `2.5.38` +- `@types/node` was updated to `~6.0.60` +- `codelyzer` was updated to `~2.0.0` +- `jasmine-core` was updated to `~2.5.2` +- `jasmine-spec-reporter` was updated to `~3.2.0` +- `karma` was updated to `~1.4.1` +- `karma-chrome-launcher` was updated to `~2.0.0` +- `karma-cli` was updated to `~1.0.1` +- `karma-jasmine` was updated to `~1.1.0` +- `karma-jasmine-html-reporter` was **added** at `^0.2.2` +- `karma-coverage-istanbul-reporter` was **added** at `^0.2.0`, replacing `karma-remap-istanbul` +- `karma-remap-istanbul` was **removed** +- `protractor` was updated to `~5.1.0` +- `ts-node` was updated to `~2.0.0` +- `tslint` was updated to `~4.5.0` +- `typescript` was updated to `~2.1.0` + +See the [karma](1-x/#karma.conf.js) and [protractor](1-x/#protractor.conf.js) sections below for more +information on changed packages. + +The [Linting rules](1-x/#Linting rules) section contains a list of rules that changed due to updates. + +We also updated the scripts section to make it more simple: + +``` +"scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" +}, +``` + +## karma.conf.js + +Karma configuration suffered some changes to improve the code-coverage functionality, +use the new `@angular/cli` package, and the new HTML reporter. + +In the `frameworks` array update the CLI package to `@angular/cli`. + +In the `plugins` array: +- add `require('karma-jasmine-html-reporter')` and `require('karma-coverage-istanbul-reporter')` +- remove `require('karma-remap-istanbul')` +- update the CLI plugin to `require('@angular/cli/plugins/karma')` + +Add a new `client` option just above `patterns`: +``` +client:{ + clearContext: false // leave Jasmine Spec Runner output visible in browser +}, +files: [ +``` + +Change the preprocessor to use the new CLI package: +``` +preprocessors: { + './src/test.ts': ['@angular/cli'] +}, +``` + +Replace `remapIstanbulReporter` with `coverageIstanbulReporter`: +``` +coverageIstanbulReporter: { + reports: [ 'html', 'lcovonly' ], + fixWebpackSourcePaths: true +}, +``` + +Remove the config entry from `angularCli`: +``` +angularCli: { + environment: 'dev' +}, +``` + +Update the reporters to use `coverage-istanbul` instead of `karma-remap-istanbul`, and +add `kjhtml` (short for karma-jasmine-html-reporter): +``` +reporters: config.angularCli && config.angularCli.codeCoverage + ? ['progress', 'coverage-istanbul'] + : ['progress', 'kjhtml'], +``` + +## protractor.conf.js + +Protractor was updated to the new 5.x major version, but you shouldn't need to change much +to take advantage of all its new features. + +Replace the spec reporter import from: +``` +var SpecReporter = require('jasmine-spec-reporter'); +``` +to +``` +const { SpecReporter } = require('jasmine-spec-reporter'); +``` + +Remove `useAllAngular2AppRoots: true`. + +Update `beforeLaunch` as described in [One tsconfig per app](1-x/#one-tsconfig-per-app): +``` +beforeLaunch: function() { + require('ts-node').register({ + project: 'e2e/tsconfig.e2e.json' + }); +}, +``` + +Update `onPrepare`: +``` +onPrepare: function() { + jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); +} +``` + +## Linting rules + +The updated versions of `tslint` and `codelyzer` contain a few rule changes that you should +apply to your `tslint.json`: + +Add these new rules: +``` +"callable-types": true, +"import-blacklist": [true, "rxjs"], +"import-spacing": true, +"interface-over-type-literal": true, +"no-empty-interface": true, +"no-string-throw": true, +"prefer-const": true, +"typeof-compare": true, +"unified-signatures": true, +``` + +Update `no-inferrable-types` to `"no-inferrable-types": [true, "ignore-params"]`. diff --git a/docs/documentation/1-x/stories/application-environments.md b/docs/documentation/1-x/stories/application-environments.md new file mode 100644 index 000000000000..d3c4b18d054c --- /dev/null +++ b/docs/documentation/1-x/stories/application-environments.md @@ -0,0 +1,122 @@ +# Application Environments + +## Configuring available environments + +`.angular-cli.json` contains an **environments** section. By default, this looks like: + +``` json +"environments": { + "dev": "environments/environment.ts", + "prod": "environments/environment.prod.ts" +} +``` + +You can add additional environments as required. To add a **staging** environment, your configuration would look like: + +``` json +"environments": { + "dev": "environments/environment.ts", + "staging": "environments/environment.staging.ts", + "prod": "environments/environment.prod.ts" +} +``` + +## Adding environment-specific files + +The environment-specific files are set out as shown below: + +``` +└── src + └── environments + ├── environment.prod.ts + └── environment.ts +``` + +If you wanted to add another environment for **staging**, your file structure would become: + +``` +└── src + └── environments + ├── environment.prod.ts + ├── environment.staging.ts + └── environment.ts +``` + +## Amending environment-specific files + +`environment.ts` contains the default settings. If you take a look at this file, it should look like: + +``` TypeScript +export const environment = { + production: false +}; +``` + +If you compare this to `environment.prod.ts`, which looks like: + +``` TypeScript +export const environment = { + production: true +}; +``` + +You can add further variables, either as additional properties on the `environment` object, or as separate objects, for example: + +``` TypeScript +export const environment = { + production: false, + apiUrl: 'http://my-api-url' +}; +``` + +## Using environment-specific variables in your application + +Given the following application structure: + +``` +└── src + └── app + ├── app.component.html + └── app.component.ts + └── environments + ├── environment.prod.ts + ├── environment.staging.ts + └── environment.ts +``` + +Using environment variables inside of `app.component.ts` might look something like this: + +``` TypeScript +import { Component } from '@angular/core'; +import { environment } from './../environments/environment'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) +export class AppComponent { + constructor() { + console.log(environment.production); // Logs false for default environment + } + title = 'app works!'; +} +``` + +## Environment-specific builds + +Running: + +``` +ng build +``` + +Will use the defaults found in `environment.ts` + +Running: + +``` +ng build --env=staging +``` + +Will use the values from `environment.staging.ts` diff --git a/docs/documentation/1-x/stories/asset-configuration.md b/docs/documentation/1-x/stories/asset-configuration.md new file mode 100644 index 000000000000..ef910b1d8561 --- /dev/null +++ b/docs/documentation/1-x/stories/asset-configuration.md @@ -0,0 +1,62 @@ +# Project assets + +You use the `assets` array in `.angular-cli.json` to list files or folders you want to copy as-is +when building your project. + +By default, the `src/assets/` folder and `src/favicon.ico` are copied over. + +```json +"assets": [ + "assets", + "favicon.ico" +] +``` + +You can also further configure assets to be copied by using objects as configuration. + +The array below does the same as the default one: + +```json +"assets": [ + { "glob": "**/*", "input": "./assets/", "output": "./assets/" }, + { "glob": "favicon.ico", "input": "./", "output": "./" }, +] +``` + +`glob` is the a [node-glob](https://github.com/isaacs/node-glob) using `input` as base directory. +`input` is relative to the project root (`src/` default), while `output` is + relative to `outDir` (`dist` default). + + You can use this extended configuration to copy assets from outside your project. + For instance, you can copy assets from a node package: + + ```json +"assets": [ + { "glob": "**/*", "input": "../node_modules/some-package/images", "output": "./some-package/" }, +] +``` + +The contents of `node_modules/some-package/images/` will be available in `dist/some-package/`. + +## Writing assets outside of `dist/` + +Because of the security implications, the CLI will always refuse to read or write files outside of +the project itself (scoped by `.angular-cli.json`). It is however possible to write assets outside +the `dist/` build output folder during build. + +Because writing files in your project isn't an expected effect of `ng build`, it is disabled by +default on every assets. In order to allow this behaviour, you need to set `allowOutsideOutDir` +to `true` on your asset definition, like so: + +```json +"assets": [ + { + "glob": "**/*", + "input": "./assets/", + "output": "../not-dist/some/folder/", + "allowOutsideOutDir": true + }, +] +``` + +This needs to be set for every assets you want to write outside of your build output directory. diff --git a/docs/documentation/1-x/stories/autocompletion.md b/docs/documentation/1-x/stories/autocompletion.md new file mode 100644 index 000000000000..324d6a2faa58 --- /dev/null +++ b/docs/documentation/1-x/stories/autocompletion.md @@ -0,0 +1,21 @@ +# Autocompletion + +To turn on auto completion use the following commands: + +For bash: +```bash +ng completion --bash >> ~/.bashrc +source ~/.bashrc +``` + +For zsh: +```bash +ng completion --zsh >> ~/.zshrc +source ~/.zshrc +``` + +Windows users using gitbash: +```bash +ng completion --bash >> ~/.bash_profile +source ~/.bash_profile +``` \ No newline at end of file diff --git a/docs/documentation/1-x/stories/autoprefixer.md b/docs/documentation/1-x/stories/autoprefixer.md new file mode 100644 index 000000000000..78b55b553b64 --- /dev/null +++ b/docs/documentation/1-x/stories/autoprefixer.md @@ -0,0 +1,43 @@ +# Change target browsers for Autoprefixer + +Currently, the CLI uses [Autoprefixer](https://github.com/postcss/autoprefixer) to ensure compatibility +with different browser and browser versions. You may find it necessary to target specific browsers +or exclude certain browser versions from your build. + +Internally, Autoprefixer relies on a library called [Browserslist](https://github.com/ai/browserslist) +to figure out which browsers to support with prefixing. + +There are a few ways to tell Autoprefixer what browsers to target: + +### Add a browserslist property to the `package.json` file +``` +"browserslist": [ + "> 1%", + "last 2 versions" +] +``` + +### Add a new file to the project directory called `.browserslistrc` +``` +### Supported Browsers + +> 1% +last 2 versions +``` + +Autoprefixer will look for the configuration file/property to use when it prefixes your css. +Check out the [browserslist repo](https://github.com/ai/browserslist) for more examples of how to target +specific browsers and versions. + +_Side note:_ +Those who are seeking to produce a [progressive web app](https://developers.google.com/web/progressive-web-apps/) and are using [Lighthouse](https://developers.google.com/web/tools/lighthouse/) to grade the project will +need to add the following browserslist config to their package.json file to eliminate the [old flexbox](https://developers.google.com/web/tools/lighthouse/audits/old-flexbox) prefixes: + +`package.json` config: +``` +"browserslist": [ + "last 2 versions", + "not ie <= 10", + "not ie_mob <= 10" +] +``` diff --git a/docs/documentation/1-x/stories/budgets.md b/docs/documentation/1-x/stories/budgets.md new file mode 100644 index 000000000000..e01364f9ce09 --- /dev/null +++ b/docs/documentation/1-x/stories/budgets.md @@ -0,0 +1,62 @@ +# Budgets + +As applications grow in functionality, they also grow in size. Budgets is a feature in the +Angular CLI which allows you to set budget thresholds in your configuration to ensure parts +of your application stay within boundries which you set. + +**.angular-cli.json** +``` +{ + ... + apps: [ + { + ... + budgets: [] + } + ] +} +``` + +## Budget Definition + +- type + - The type of budget. + - Possible values: + - bundle - The size of a specific bundle. + - initial - The initial size of the app. + - allScript - The size of all scripts. + - all - The size of the entire app. + - anyScript - The size of any one script. + - any - The size of any file. +- name + - The name of the bundle. + - Required only for type of "bundle" +- baseline + - The baseline size for comparison. +- maximumWarning + - The maximum threshold for warning relative to the baseline. +- maximumError + - The maximum threshold for error relative to the baseline. +- minimumWarning + - The minimum threshold for warning relative to the baseline. +- minimumError + - The minimum threshold for error relative to the baseline. +- warning + - The threshold for warning relative to the baseline (min & max). +- error + - The threshold for error relative to the baseline (min & max). + +## Specifying sizes + +Available formats: + +- `123` - size in bytes +- `123b` - size in bytes +- `123kb` - size in kilobytes +- `123mb` - size in megabytes +- `12%` - percentage + +## NOTES + +All sizes are relative to baseline. +Percentages are not valid for baseline values. diff --git a/docs/documentation/1-x/stories/code-coverage.md b/docs/documentation/1-x/stories/code-coverage.md new file mode 100644 index 000000000000..354063cc1242 --- /dev/null +++ b/docs/documentation/1-x/stories/code-coverage.md @@ -0,0 +1,32 @@ +# Code Coverage + +With the Angular CLI we can run unit tests as well as create code coverage reports. Code coverage reports allow us to see any parts of our code base that may not be properly tested by our unit tests. + +To generate a coverage report run the following command in the root of your project + +```bash +ng test --watch=false --code-coverage +``` + +Once the tests complete a new `/coverage` folder will appear in the project. In your Finder or Windows Explorer open the `index.html` file. You should see a report with your source code and code coverage values. + +Using the code coverage percentages we can estimate how much of our code is tested. It is up to your team to determine how much code should be unit tested. + +## Code Coverage Enforcement + +If your team decides on a set minimum amount to be unit tested you can enforce this minimum with the Angular CLI. For example our team would like the code base to have a minimum of 80% code coverage. To enable this open the `karma.conf.js` and add the following in the `coverageIstanbulReporter:` key + +```javascript +coverageIstanbulReporter: { + reports: [ 'html', 'lcovonly' ], + fixWebpackSourcePaths: true, + thresholds: { + statements: 80, + lines: 80, + branches: 80, + functions: 80 + } +} +``` + +The `thresholds` property will enforce a minimum of 80% code coverage when the unit tests are run in the project. \ No newline at end of file diff --git a/docs/documentation/1-x/stories/configure-hmr.md b/docs/documentation/1-x/stories/configure-hmr.md new file mode 100644 index 000000000000..daa0c3ca56e6 --- /dev/null +++ b/docs/documentation/1-x/stories/configure-hmr.md @@ -0,0 +1,150 @@ +# Configure Hot Module Replacement + +Hot Module Replacement (HMR) is a WebPack feature to update code in a running app without rebuilding it. +This results in faster updates and less full page-reloads. + +You can read more about HMR by visiting [this page](https://webpack.js.org/guides/hot-module-replacement). + +In order to get HMR working with Angular CLI we first need to add a new environment and enable it. + +Next we need to update the bootstrap process of our app to enable the +[@angularclass/hmr](https://github.com/AngularClass/angular-hmr) module. + +### Add environment for HMR + +Create a file called `src/environments/environment.hmr.ts` with the following contents: + +```typescript + +export const environment = { + production: false, + hmr: true +}; +``` + +Update `src/environments/environment.prod.ts` and add the `hmr: false` flag to the environment: + +```typescript +export const environment = { + production: true, + hmr: false +}; +``` + +Update `src/environments/environment.ts` and add the `hmr: false` flag to the environment: + +```typescript +export const environment = { + production: false, + hmr: false +}; +``` + + +Update `.angular-cli.json` by adding the new environment the existing environments object: + +```json +"environmentSource": "environments/environment.ts", +"environments": { + "dev": "environments/environment.ts", + "hmr": "environments/environment.hmr.ts", + "prod": "environments/environment.prod.ts" +}, +``` + +Run `ng serve` with the flag `--hmr -e=hmr` to enable hmr and select the new environment: + +```bash +ng serve --hmr -e=hmr +``` + +Create a shortcut for this by updating `package.json` and adding an entry to the script object: + +```json +"scripts": { + ... + "hmr": "ng serve --hmr -e=hmr" +} +``` + + +### Add dependency for @angularclass/hmr and configure app + +In order to get HMR working we need to install the dependency and configure our app to use it. + + +Install the `@angularclass/hmr` module as a dev-dependency + +```bash +$ npm install --save-dev @angularclass/hmr +``` + + +Create a file called `src/hmr.ts` with the following content: + +```typescript +import { NgModuleRef, ApplicationRef } from '@angular/core'; +import { createNewHosts } from '@angularclass/hmr'; + +export const hmrBootstrap = (module: any, bootstrap: () => Promise>) => { + let ngModule: NgModuleRef; + module.hot.accept(); + bootstrap().then(mod => ngModule = mod); + module.hot.dispose(() => { + const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef); + const elements = appRef.components.map(c => c.location.nativeElement); + const makeVisible = createNewHosts(elements); + ngModule.destroy(); + makeVisible(); + }); +}; +``` + + +Update `src/main.ts` to use the file we just created: + +```typescript +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +import { hmrBootstrap } from './hmr'; + +if (environment.production) { + enableProdMode(); +} + +const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule); + +if (environment.hmr) { + if (module[ 'hot' ]) { + hmrBootstrap(module, bootstrap); + } else { + console.error('HMR is not enabled for webpack-dev-server!'); + console.log('Are you using the --hmr flag for ng serve?'); + } +} else { + bootstrap(); +} +``` + + +### Starting the development environment with HMR enabled + +Now that everything is set up we can run the new configuration: + +```bash +$ npm run hmr +``` + +When starting the server Webpack will tell you that it’s enabled: + + + NOTICE Hot Module Replacement (HMR) is enabled for the dev server. + + +Now if you make changes to one of your components they changes should be visible automatically without a complete browser refresh. + + diff --git a/docs/documentation/1-x/stories/continuous-integration.md b/docs/documentation/1-x/stories/continuous-integration.md new file mode 100644 index 000000000000..7c079084114b --- /dev/null +++ b/docs/documentation/1-x/stories/continuous-integration.md @@ -0,0 +1,155 @@ +# Continuous Integration + +One of the best ways to keep your project bug free is through a test suite, but it's easy to forget +to run tests all the time. + +That's where Continuous Integration (CI) servers come in. +You can set up your project repository so that your tests run on every commit and pull request. + +There are paid CI services like [Circle CI](https://circleci.com/) and +[Travis CI](https://travis-ci.com/), and you can also host your own for free using +[Jenkins](https://jenkins.io/) and others. + +Even though Circle CI and Travis CI are paid services, they are provided free for open source +projects. +You can create a public project on GitHub and add these services without paying. + +We're going to see how to update your test configuration to run in CI environments, and how to +set up Circle CI and Travis CI. + + +## Update test configuration + +Even though `ng test` and `ng e2e` already run on your environment, they need to be adjusted to +run in CI environments. + +When using Chrome in CI environments it has to be started without sandboxing. +We can achieve that by editing our test configs. + +In `karma.conf.js`, add a custom launcher called `ChromeNoSandbox` below `browsers`: + +``` +browsers: ['Chrome'], +customLaunchers: { + ChromeNoSandbox: { + base: 'Chrome', + flags: ['--no-sandbox'] + } +}, +``` + +Create a new file in the root of your project called `protractor-ci.conf.js`, that extends +the original `protractor.conf.js`: + +``` +const config = require('./protractor.conf').config; + +config.capabilities = { + browserName: 'chrome', + chromeOptions: { + args: ['--no-sandbox'] + } +}; + +exports.config = config; +``` + +Now you can run the following commands to use the `--no-sandbox` flag: + +``` +ng test --single-run --no-progress --browser=ChromeNoSandbox +ng e2e --no-progress --config=protractor-ci.conf.js +``` + +For CI environments it's also a good idea to disable progress reporting (via `--no-progress`) +to avoid spamming the server log with progress messages. + + +## Using Circle CI + +Create a folder called `.circleci` at the project root, and inside of it create a file called +`config.yml`: + +```yaml +version: 2 +jobs: + build: + working_directory: ~/my-project + docker: + - image: circleci/node:8-browsers + steps: + - checkout + - restore_cache: + key: my-project-{{ .Branch }}-{{ checksum "package.json" }} + - run: npm install + - save_cache: + key: my-project-{{ .Branch }}-{{ checksum "package.json" }} + paths: + - "node_modules" + - run: xvfb-run -a npm run test -- --single-run --no-progress --browser=ChromeNoSandbox + - run: xvfb-run -a npm run e2e -- --no-progress --config=protractor-ci.conf.js + +``` + +We're doing a few things here: + - + - `node_modules` is cached. + - [npm run](https://docs.npmjs.com/cli/run-script) is used to run `ng` because `@angular/cli` is + not installed globally. The double dash (`--`) is needed to pass arguments into the npm script. + - `xvfb-run` is used to run `npm run` to run a command using a virtual screen, which is needed by + Chrome. + +Commit your changes and push them to your repository. + +Next you'll need to [sign up for Circle CI](https://circleci.com/docs/2.0/first-steps/) and +[add your project](https://circleci.com/add-projects). +Your project should start building. + +Be sure to check out the [Circle CI docs](https://circleci.com/docs/2.0/) if you want to know more. + + +## Using Travis CI + +Create a file called `.travis.yml` at the project root: + +```yaml +dist: trusty +sudo: false + +language: node_js +node_js: + - "8" + +addons: + apt: + sources: + - google-chrome + packages: + - google-chrome-stable + +cache: + directories: + - ./node_modules + +install: + - npm install + +script: + # Use Chromium instead of Chrome. + - export CHROME_BIN=chromium-browser + - xvfb-run -a npm run test -- --single-run --no-progress --browser=ChromeNoSandbox + - xvfb-run -a npm run e2e -- --no-progress --config=protractor-ci.conf.js + +``` + +Although the syntax is different, we're mostly doing the same steps as were done in the +Circle CI config. +The only difference is that Travis doesn't come with Chrome, so we use Chromium instead. + +Commit your changes and push them to your repository. + +Next you'll need to [sign up for Travis CI](https://travis-ci.org/auth) and +[add your project](https://travis-ci.org/profile). +You'll need to push a new commit to trigger a build. + +Be sure to check out the [Travis CI docs](https://docs.travis-ci.com/) if you want to know more. diff --git a/docs/documentation/1-x/stories/css-preprocessors.md b/docs/documentation/1-x/stories/css-preprocessors.md new file mode 100644 index 000000000000..58bd0071deab --- /dev/null +++ b/docs/documentation/1-x/stories/css-preprocessors.md @@ -0,0 +1,34 @@ +# CSS Preprocessor integration + +Angular CLI supports all major CSS preprocessors: +- sass/scss ([http://sass-lang.com/](http://sass-lang.com/)) +- less ([http://lesscss.org/](http://lesscss.org/)) +- stylus ([http://stylus-lang.com/](http://stylus-lang.com/)) + +To use these preprocessors simply add the file to your component's `styleUrls`: + +```javascript +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'] +}) +export class AppComponent { + title = 'app works!'; +} +``` + +When generating a new project you can also define which extension you want for +style files: + +```bash +ng new sassy-project --style=sass +``` + +Or set the default style on an existing project: + +```bash +ng set defaults.styleExt scss +``` + +Style strings added to the `@Component.styles` array _must be written in CSS_ because the CLI cannot apply a pre-processor to inline styles. \ No newline at end of file diff --git a/docs/documentation/1-x/stories/disk-serve.md b/docs/documentation/1-x/stories/disk-serve.md new file mode 100644 index 000000000000..b3f4663b630b --- /dev/null +++ b/docs/documentation/1-x/stories/disk-serve.md @@ -0,0 +1,23 @@ +# Serve from Disk + +The CLI supports running a live browser reload experience to users by running `ng serve`. This will compile the application upon file saves and reload the browser with the newly compiled application. This is done by hosting the application in memory and serving it via [webpack-dev-server](https://webpack.js.org/guides/development/#webpack-dev-server). + +If you wish to get a similar experience with the application output to disk please use the steps below. This practice will allow you to ensure that serving the contents of your `dist` dir will be closer to how your application will behave when it is deployed. + +## Environment Setup +### Install a web server +You will not be using webpack-dev-server, so you will need to install a web server for the browser to request the application. There are many to choose from but a good one to try is [lite-server](https://github.com/johnpapa/lite-server) as it will auto-reload your browser when new files are output. + +## Usage +You will need two terminals to get the live-reload experience. The first will run the build in a watch mode to compile the application to the `dist` folder. The second will run the web server against the `dist` folder. The combination of these two processes will mimic the same behavior of ng serve. + +### 1st terminal - Start the build +```bash +ng build --watch +``` + +### 2nd terminal - Start the web server +```bash +lite-server --baseDir="dist" +``` +When using `lite-server` the default browser will open to the appropriate URL. diff --git a/docs/documentation/1-x/stories/github-pages.md b/docs/documentation/1-x/stories/github-pages.md new file mode 100644 index 000000000000..cce3c10a5cb5 --- /dev/null +++ b/docs/documentation/1-x/stories/github-pages.md @@ -0,0 +1,21 @@ +# Deploy to GitHub Pages + +A simple way to deploy your Angular app is to use +[GitHub Pages](https://help.github.com/articles/what-is-github-pages/). + +The first step is to [create a GitHub account](https://github.com/join), and then +[create a repository](https://help.github.com/articles/create-a-repo/) for your project. +Make a note of the user name and project name in GitHub. + +Then all you need to do is run `ng build --prod --output-path docs --base-href PROJECT_NAME`, where +`PROJECT_NAME` is the name of your project in GitHub. +Make a copy of `docs/index.html` and name it `docs/404.html`. + +Commit your changes and push. On the GitHub project page, configure it to +[publish from the docs folder](https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/#publishing-your-github-pages-site-from-a-docs-folder-on-your-master-branch). + +And that's all you need to do! Now you can see your page at +`https://USER_NAME.github.io/PROJECT_NAME/`. + +You can also use [angular-cli-ghpages](https://github.com/angular-buch/angular-cli-ghpages), a full +featured package that does this all this for you and has extra functionality. diff --git a/docs/documentation/1-x/stories/global-lib.md b/docs/documentation/1-x/stories/global-lib.md new file mode 100644 index 000000000000..91c621acfd5c --- /dev/null +++ b/docs/documentation/1-x/stories/global-lib.md @@ -0,0 +1,37 @@ +# Global Library Installation + +Some javascript libraries need to be added to the global scope, and loaded as if +they were in a script tag. We can do this using the `apps[0].scripts` and +`apps[0].styles` properties of `.angular-cli.json`. + +As an example, to use [Bootstrap 4](https://getbootstrap.com/docs/4.0/getting-started/introduction/) this is +what you need to do: + +First install Bootstrap from `npm`: + +```bash +npm install jquery --save +npm install popper.js --save +npm install bootstrap@next --save +``` + +Then add the needed script files to `apps[0].scripts`: + +```json +"scripts": [ + "../node_modules/jquery/dist/jquery.slim.js", + "../node_modules/popper.js/dist/umd/popper.js", + "../node_modules/bootstrap/dist/js/bootstrap.js" +], +``` + +Finally add the Bootstrap CSS to the `apps[0].styles` array: +```json +"styles": [ + "../node_modules/bootstrap/dist/css/bootstrap.css", + "styles.css" +], +``` + +Restart `ng serve` if you're running it, and Bootstrap 4 should be working on +your app. diff --git a/docs/documentation/1-x/stories/global-scripts.md b/docs/documentation/1-x/stories/global-scripts.md new file mode 100644 index 000000000000..fe12d7473e03 --- /dev/null +++ b/docs/documentation/1-x/stories/global-scripts.md @@ -0,0 +1,56 @@ +# Global scripts + +You can add Javascript files to the global scope via the `apps[0].scripts` +property in `.angular-cli.json`. +These will be loaded exactly as if you had added them in a `