5 lines
24 KiB
JSON
5 lines
24 KiB
JSON
|
{
|
||
|
|
"id": "guide/build",
|
||
|
|
"title": "Building and serving Angular apps",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/build.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"building-and-serving-angular-apps\">Building and serving Angular apps<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/build#building-and-serving-angular-apps\"><i class=\"material-icons\">link</i></a></h1>\n<p>This page discusses build-specific configuration options for Angular projects.</p>\n<a id=\"app-environments\"></a>\n<h2 id=\"configuring-application-environments\">Configuring application environments<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/build#configuring-application-environments\"><i class=\"material-icons\">link</i></a></h2>\n<p>You can define different named build configurations for your project, such as <em>stage</em> and <em>production</em>, with different defaults.</p>\n<p>Each named configuration can have defaults for any of the options that apply to the various <a href=\"guide/glossary#target\">builder targets</a>, such as <code>build</code>, <code>serve</code>, and <code>test</code>. The <a href=\"cli\">Angular CLI</a> <code>build</code>, <code>serve</code>, and <code>test</code> commands can then replace files with appropriate versions for your intended target environment.</p>\n<h3 id=\"configure-environment-specific-defaults\">Configure environment-specific defaults<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/build#configure-environment-specific-defaults\"><i class=\"material-icons\">link</i></a></h3>\n<p>A project's <code>src/environments/</code> folder contains the base configuration file, <code>environment.ts</code>, which provides a default environment.\nYou can add override defaults for additional environments, such as production and staging, in target-specific configuration files.</p>\n<p>For example:</p>\n<code-example>\n└──myProject/src/environments/\n └──environment.ts\n └──environment.prod.ts\n └──environment.stage.ts\n</code-example>\n<p>The base file <code>environment.ts</code>, contains the default environment settings. For example:</p>\n<code-example>\nexport const environment = {\n production: false\n};\n</code-example>\n<p>The <code>build</code> command uses this as the build target when no environment is specified.\nYou can add further variables, either as additional properties on the environment object, or as separate objects.\nFor example, the following adds a default for a variable to the default environment:</p>\n<code-example>\nexport const environment = {\n production: false,\n apiUrl: 'http://my-api-url'\n};\n</code-example>\n<p>You can add target-specific configuration files, such as <code>environment.prod.ts</code>.\nThe following sets content sets default values for the production build target:</p>\n<code-example>\nexport const environment = {\n production: true,\n apiUrl: 'http://my-prod-url'\n};\n</code-example>\n<h3 id=\"using-environment-specific-variables-in-your-app\">Using environment-specific variables in your app<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/build#using-environment-specific-variables-in-your-app\"><i class=\"material-icons\">link</i></a></h3>\n<p>The following application structure configures build targets for production and staging environments:</p>\n<code-example>\n└── src\n └── app\n ├── app.component.html\n └── app.component.ts\n └── environments\n ├── environment.prod.ts\n ├── environment.staging.ts\n └── environment.ts\n</code-example>\n<p>To use the environment configurations you have defined, your components must import the original env
|
||
|
|
}
|