5 lines
37 KiB
JSON
5 lines
37 KiB
JSON
|
{
|
||
|
|
"id": "guide/aot-compiler",
|
||
|
|
"title": "Ahead-of-time (AOT) compilation",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/aot-compiler.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=\"ahead-of-time-aot-compilation\">Ahead-of-time (AOT) compilation<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/aot-compiler#ahead-of-time-aot-compilation\"><i class=\"material-icons\">link</i></a></h1>\n<p>An Angular application consists mainly of components and their HTML templates. Because the components and templates provided by Angular cannot be understood by the browser directly, Angular applications require a compilation process before they can run in a browser.</p>\n<p>The Angular <a href=\"guide/glossary#aot\">ahead-of-time (AOT) compiler</a> converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase <em>before</em> the browser downloads and runs that code. Compiling your application during the build process provides a faster rendering in the browser.</p>\n<p>This guide explains how to specify metadata and apply available compiler options to compile your applications efficiently using the AOT compiler.</p>\n<div class=\"alert is-helpful\">\n<p> <a href=\"https://www.youtube.com/watch?v=anphffaCZrQ\">Watch Alex Rickabaugh explain the Angular compiler</a> at AngularConnect 2019.</p>\n</div>\n<a id=\"why-aot\"></a>\n<p>Here are some reasons you might want to use AOT.</p>\n<ul>\n<li>\n<p><em>Faster rendering</em>\nWith AOT, the browser downloads a pre-compiled version of the application.\nThe browser loads executable code so it can render the application immediately, without waiting to compile the app first.</p>\n</li>\n<li>\n<p><em>Fewer asynchronous requests</em>\nThe compiler <em>inlines</em> external HTML templates and CSS style sheets within the application JavaScript,\neliminating separate ajax requests for those source files.</p>\n</li>\n<li>\n<p><em>Smaller Angular framework download size</em>\nThere's no need to download the Angular compiler if the app is already compiled.\nThe compiler is roughly half of Angular itself, so omitting it dramatically reduces the application payload.</p>\n</li>\n<li>\n<p><em>Detect template errors earlier</em>\nThe AOT compiler detects and reports template binding errors during the build step\nbefore users can see them.</p>\n</li>\n<li>\n<p><em>Better security</em>\nAOT compiles HTML templates and components into JavaScript files long before they are served to the client.\nWith no templates to read and no risky client-side HTML or JavaScript evaluation,\nthere are fewer opportunities for injection attacks.</p>\n</li>\n</ul>\n<a id=\"overview\"></a>\n<h2 id=\"choosing-a-compiler\">Choosing a compiler<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/aot-compiler#choosing-a-compiler\"><i class=\"material-icons\">link</i></a></h2>\n<p>Angular offers two ways to compile your application:</p>\n<ul>\n<li><strong><em>Just-in-Time</em> (JIT)</strong>, which compiles your app in the browser at runtime. This was the default until Angular 8.</li>\n<li><strong><em>Ahead-of-Time</em> (AOT)</strong>, which compiles your app and libraries at build time. This is the default since Angular 9.</li>\n</ul>\n<p>When you run the <a href=\"cli/build\"><code>ng build</code></a> (build only) or <a href=\"cli/serve\"><code>ng serve</code></a> (build and serve locally) CLI commands, the type of compilation (JIT or AOT) depends on the value of the <code>aot</code> property in your build configuration specified in <code>angular.json</code>. By default, <code>aot</code> is set to <code>true</code> for new CLI apps.</p>\n<p>See the <a href=\"cli\">CLI command reference</a> and <a href=\"guide/build\">Building and serving Angular apps</a> for more information.</p>\n<h2 id=\"how-aot-works\">How AOT works<a title=\"Link t
|
||
|
|
}
|