diff --git a/aio/content/guide/build.md b/aio/content/guide/build.md index bca4781a37..53238778a6 100644 --- a/aio/content/guide/build.md +++ b/aio/content/guide/build.md @@ -1,6 +1,6 @@ # Building and serving Angular apps -*intro - here are some topics of interest in the app development cycle* +This page discusses build-specific configuration options for Angular projects. {@a app-environments} @@ -260,50 +260,6 @@ Each budget entry is a JSON object with the following properties: -{@a assets} - -## Adding project assets - -You can configure your project with a set of assets, such as images, to copy directly into the build for a particular build target. - -Each build target section of the CLI configuration file, `angular.json`, has an `assets` section that lists files or folders you want to copy into the build for that target. -By default, the `src/assets/` folder and `src/favicon.ico` are copied into a build. - -``` -"assets": [ - "src/assets", - "src/favicon.ico" -] -``` - -You can edit the assets configuration to extend it for assets outside your project. -For example, the following invokes the [node-glob pattern matcher](https://github.com/isaacs/node-glob) using input from a given base folder. -It sends output to a folder that is relative to `outDir`, a configuration value that defaults to `dist/`*project-name*). -The result in this cased is the same as for the default assets configuration. - -``` -"assets": [ - { "glob": "**/*", "input": "src/assets/", "output": "/assets/" }, - { "glob": "favicon.ico", "input": "/src", "output": "/" }, -] -``` - -You can use this extended configuration to copy assets from outside your project. -For instance, you can copy assets from a node package with the following value: - -``` -"assets": [ - { "glob": "**/*", "input": "./node_modules/some-package/images", "output": "/some-package/" }, -] -``` - -This makes the contents of `node_modules/some-package/images/` available in the output folder `dist/some-package/`. - -
- - For reasons of security, the CLI never writes files outside of the project output path. - -
{@a browser-compat} diff --git a/aio/content/guide/file-structure.md b/aio/content/guide/file-structure.md index d5f0470003..ad6d53f3eb 100644 --- a/aio/content/guide/file-structure.md +++ b/aio/content/guide/file-structure.md @@ -1,67 +1,110 @@ # Workspace and project file structure -An Angular CLI project is the foundation for both quick experiments and enterprise solutions. The CLI command `ng new` creates an Angular workspace in your file system that is the root for new projects, which can be apps and libraries. +You develop apps in the context of an Angular [workspace](guide/glossary#workspace). A workspace contains the files for one or more [projects](guide/glossary#project). A project is the set of files that comprise a standalone app, a library, or a set of end-to-end (e2e) tests. -## Workspaces and project files +The Angular CLI command `ng new ` gets you started. +When you run this command, the CLI installs the necessary Angular npm packages and other dependencies in a new workspace, with a root folder named *project_name*. +It also creates the following workspace and starter project files: -Angular 6 introduced the [workspace](guide/glossary#workspace) directory structure for Angular [projects](guide/glossary#project). A project can be a standalone *application* or a *library*, and a workspace can contain multiple applications, as well as libraries that can be used in any of the apps. +* An initial skeleton app project, also called *project_name* (in the `src/` subfolder). +* An end-to-end test project (in the `e2e/` subfolder). +* Related configuration files. -The CLI command `ng new my-workspace` creates a workspace folder and generates a new app skeleton in an `app` folder within that workspace. -Within the `app/` folder, a `src/` subfolder contains the logic, data, and assets. -A newly generated `app/` folder contains the source files for a root module, with a root component and template. +The initial app project contains a simple Welcome app, ready to run. -The `app/` folder also contains project-specific configuration files, end-to-end tests, and the Angular system modules. +## Workspace files -``` - my-workspace/ - app/ - e2e/ - src/ - node_modules/ - src/ -``` +The top level of the workspace contains a number of workspace-wide configuration files. -When this workspace file structure is in place, you can use the `ng generate` command on the command line to add functionality and data to the initial app. +| WORKSPACE CONFIG FILES | PURPOSE | +| :--------------------- | :------------------------------------------| +| `.editorconfig` | Configuration for code editors. See [EditorConfig](https://editorconfig.org/). | +| `.gitignore` | Specifies intentionally untracked files that [Git](https://git-scm.com/) should ignore. | +| `angular.json` | CLI configuration for all projects in the workspace, including configuration options for build, serve, and test tools that the CLI uses, such as [Karma](https://karma-runner.github.io/) and [Protractor](http://www.protractortest.org/). | +| `node_modules` | Provides [npm packages](guide/npm-packages) to the entire workspace. | +| `package.json` | Lists package dependencies. See [npm documentation](https://docs.npmjs.com/files/package.json) for the specific format and contents of this file.| +| `tsconfig.app.json` | Default [TypeScript](https://www.typescriptlang.org/) configuration for apps in the workspace. | +| `tsconfig.spec.json` | Default TypeScript configuration for e2e test apps in the workspace. | +| `tslint.json` | Default [TSLint](https://palantir.github.io/tslint/) configuration for apps in the workspace. | +| `README.md` | Introductory documentation. | +| `package-lock.json` | Provides version information for all packages installed into `node_modules` by the npm client. See [npm documentation](https://docs.npmjs.com/files/package-lock.json) for details. If you use the yarn client, this file will be [yarn.lock](https://yarnpkg.com/lang/en/docs/yarn-lock/) instead. | -
` or` ` tags here manually. | +| `main.ts` | The main entry point for your app. Compiles the application with the [JIT compiler](https://angular.io/guide/glossary#jit) and bootstraps the application's root module (AppModule) to run in the browser. You can also use the [AOT compiler](https://angular.io/guide/aot-compiler) without changing any code by appending the `--aot` flag to the CLI `build` and `serve` commands. | +| `polyfills.ts` | Provides polyfill scripts for browser support. | +| `styles.sass` | Lists CSS files that supply styles for a project. The extension reflects the style preprocessor you have configured for the project. | +| `test.ts` | The main entry point for your unit tests, with some Angular-specific configuration. You don't typically need to edit this file. | +| `tsconfig.app.json` | Inherits from the workspace-wide `tsconfig.json` file. | +| `tsconfig.spec.json` | Inherits from the workspace-wide `tsconfig.json` file. | +| `tslint.json` | Inherits from the workspace-wide `tslint.json` file. | -A workspace can contain additional apps and libraries, each with its own root folder under `projects/`. +### Default app project e2e files -``` - my-workspace/ - app/ - projects/ - my-app/ - helpful-library/ - my-other-app/ - angular.json - -``` -At the top level of the workspace, the CLI configuration file, `angular.json`, let you set defaults for all projects in the workspace. You can configure a workspace, for example, such that all projects in it have global access to libraries, scripts, and CSS styles. (For more in this, see [Configuring global access](#global-access).) +An `e2e/` subfolder contains configuration and source files for a set of end-to-end tests that correspond to the initial app. +Workspace-wide `node_modules` dependencies are visible to this project. -You can also use `ng generate app` to create new Angular apps in the workspace, and use the `ng add` command to add libraries. -If you add libraries or generate more apps within a workspace, a `projects/` folder is created to contain the new libraries or apps. -Additional apps and library subfolders have the same file structure as the initial app. + +my-app/ + e2e/ (end-to-end test app for my-app) + src/ (app source files) + protractor.conf.js (test-tool config) + tsconfig.e2e.json (TypeScript config inherits from workspace tsconfig.json) + -All of the projects within a workspace share a CLI configuration context, controlled by the `angular.json` configuration file at the root level of the workspace. +### Project folders for additional apps and libraries -| GLOBAL CONFIG FILES | PURPOSE | -| :------------- | :------------------------------------------| -| `angular.json` | Sets defaults for the CLI and configuration options for build, serve, and test tools that the CLI uses, such as [Karma](https://karma-runner.github.io/) and [Protractor](http://www.protractortest.org/). For complete details, see *CLI Reference (link TBD)*. | +When you generate new projects in a workspace, +the CLI creates a new *workspace*`/projects` folder, and adds the generated files there. +When you generate an app (`ng generate application my-other-app`), the CLI adds folders under `projects/` for both the app and its corresponding end-to-end tests. Newly generated libraries are also added under `projects/`. + + +my-app/ + ... + projects/ (additional apps and libs) + my-other-app/ (a second app) + src/ + (config files) + my-other-app-e2e/ (corresponding test app) + src/ + (config files) + my-lib/ (a generated library) + (config files) + + +{@a app-src} ## App source folder -The app-root source folder contains your app's logic and data. Angular components, templates, styles, images, and anything else your app needs go here. Files outside of the source folder support testing and building your app. +Inside the `src/` folder, the `app/` folder contains your app's logic and data. Angular components, templates, and styles go here. An `assets/` subfolder contains images and anything else your app needs. Files at the top level of `src/` support testing and running your app. -``` + src/ app/ app.component.css @@ -70,313 +113,14 @@ The app-root source folder contains your app's logic and data. Angular component app.component.ts app.module.ts assets/... - favicon.ico - index.html - main.ts - test.ts -``` + ... + | APP SOURCE FILES | PURPOSE | -| :----------------------------- | :------------------------------------------| -| `app/app.component.ts` | Defines the logic for the app's root component, named AppComponent. The view associated with this root component becomes the root of the [view hierarchy](guide/glossary#view-hierarchy) as you add components and services to your app. | -| `app/app.component.html` | Defines the HTML template associated with the root AppComponent. | -| `app/app.component.css` | Defines the base CSS stylesheet for the root AppComponent. | -| `app/app.component.spec.ts` | Defines a unit test for the root AppComponent. | -| `app/app.module.ts` | Defines the root module, named AppModule, that tells Angular how to assemble the application. Initially declares only the AppComponent. As you add more components to the app, they must be declared here. | -| `assets/*` | Contains image files and other asset files to be copied as-is when you build your application. | - -| PROJECT-LEVEL FILES | PURPOSE | -| :------------------------ | :------------------------------------------| -| `favicon.ico` | An icon to use for this app in the bookmark bar. | -| `index.html` | The main HTML page that is served when someone visits your site. The CLI automatically adds all JavaScript and CSS files when building your app, so you typically don't need to add any `