diff --git a/.pullapprove.yml b/.pullapprove.yml
index 764fe9c1d44..dc541c1fe52 100644
--- a/.pullapprove.yml
+++ b/.pullapprove.yml
@@ -237,6 +237,7 @@ groups:
         contains_any_globs(files.exclude('packages/compiler-cli/ngcc/**'), [
           'packages/compiler/**',
           'packages/examples/compiler/**',
+          'aio/content/examples/angular-compiler-options/**',
           'packages/compiler-cli/**',
           'aio/content/guide/angular-compiler-options.md',
           'aio/content/guide/aot-compiler.md',
diff --git a/aio/content/examples/.gitignore b/aio/content/examples/.gitignore
index fb7aeb7aa79..902a4de047c 100644
--- a/aio/content/examples/.gitignore
+++ b/aio/content/examples/.gitignore
@@ -99,3 +99,7 @@ upgrade-phonecat-3-final/rollup-config.js
 
 # schematics
 !schematics-for-libraries/projects/my-lib/package.json
+
+#angular-compiler-options
+!angular-compiler-options/tsconfig.json
+!angular-compiler-options/tsconfig.app.json
diff --git a/aio/content/examples/angular-compiler-options/e2e/src/app.e2e-spec.ts b/aio/content/examples/angular-compiler-options/e2e/src/app.e2e-spec.ts
new file mode 100644
index 00000000000..bd99243f892
--- /dev/null
+++ b/aio/content/examples/angular-compiler-options/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,20 @@
+import { AppPage } from './app.po';
+import { browser, logging } from 'protractor';
+
+describe('workspace-project App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  // Add your e2e tests here
+
+  afterEach(async () => {
+    // Assert that there are no errors emitted from the browser
+    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+    expect(logs).not.toContain(jasmine.objectContaining({
+      level: logging.Level.SEVERE,
+    } as logging.Entry));
+  });
+});
diff --git a/aio/content/examples/angular-compiler-options/example-config.json b/aio/content/examples/angular-compiler-options/example-config.json
new file mode 100644
index 00000000000..b4636ba30ce
--- /dev/null
+++ b/aio/content/examples/angular-compiler-options/example-config.json
@@ -0,0 +1,19 @@
+{
+    "projectType": "cli",
+    "overrideBoilerplate": [
+      "tsconfig.json",
+      "tsconfig.app.json"
+    ],
+    "tests": [
+      {
+        "cmd": "yarn",
+        "args": [
+          "e2e",
+          "--protractor-config=e2e/protractor-puppeteer.conf.js",
+          "--no-webdriver-update",
+          "--port={PORT}"
+        ]
+      }
+    ]
+  }
+  
\ No newline at end of file
diff --git a/aio/content/examples/angular-compiler-options/src/app/app.component.css b/aio/content/examples/angular-compiler-options/src/app/app.component.css
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/aio/content/examples/angular-compiler-options/src/app/app.component.html b/aio/content/examples/angular-compiler-options/src/app/app.component.html
new file mode 100644
index 00000000000..60dbe3a500a
--- /dev/null
+++ b/aio/content/examples/angular-compiler-options/src/app/app.component.html
@@ -0,0 +1 @@
+<h1>Replace the src folder in this {{title}} with yours.</h1>
\ No newline at end of file
diff --git a/aio/content/examples/angular-compiler-options/src/app/app.component.spec.ts b/aio/content/examples/angular-compiler-options/src/app/app.component.spec.ts
new file mode 100644
index 00000000000..0509746ff04
--- /dev/null
+++ b/aio/content/examples/angular-compiler-options/src/app/app.component.spec.ts
@@ -0,0 +1,20 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  // Add your unit tests here
+});
diff --git a/aio/content/examples/angular-compiler-options/src/app/app.component.ts b/aio/content/examples/angular-compiler-options/src/app/app.component.ts
new file mode 100644
index 00000000000..ea1aba85a95
--- /dev/null
+++ b/aio/content/examples/angular-compiler-options/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
+})
+export class AppComponent {
+  title = 'example';
+}
diff --git a/aio/content/examples/angular-compiler-options/src/app/app.module.ts b/aio/content/examples/angular-compiler-options/src/app/app.module.ts
new file mode 100644
index 00000000000..f65716351aa
--- /dev/null
+++ b/aio/content/examples/angular-compiler-options/src/app/app.module.ts
@@ -0,0 +1,16 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/aio/content/examples/angular-compiler-options/src/index.html b/aio/content/examples/angular-compiler-options/src/index.html
new file mode 100644
index 00000000000..3e64774523c
--- /dev/null
+++ b/aio/content/examples/angular-compiler-options/src/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Ponyracer</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
diff --git a/aio/content/examples/angular-compiler-options/src/main.ts b/aio/content/examples/angular-compiler-options/src/main.ts
new file mode 100644
index 00000000000..c7b673cf44b
--- /dev/null
+++ b/aio/content/examples/angular-compiler-options/src/main.ts
@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));
diff --git a/aio/content/examples/angular-compiler-options/stackblitz.json b/aio/content/examples/angular-compiler-options/stackblitz.json
new file mode 100644
index 00000000000..c3de0afae15
--- /dev/null
+++ b/aio/content/examples/angular-compiler-options/stackblitz.json
@@ -0,0 +1,18 @@
+{
+  "description": "Angular Compiler Options",
+  "files": [
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1,2].*",
+    "!doc-files/**/*",
+    "!tsconfig.json",
+    "!tsconfig.app.json"
+  ],
+  "tags": [
+    [
+      "angular",
+      "compiler",
+      "options"
+    ]
+  ]
+}
diff --git a/aio/content/examples/angular-compiler-options/tsconfig.app.json b/aio/content/examples/angular-compiler-options/tsconfig.app.json
new file mode 100644
index 00000000000..3bad69d3419
--- /dev/null
+++ b/aio/content/examples/angular-compiler-options/tsconfig.app.json
@@ -0,0 +1,45 @@
+// #docplaster ...
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+// #docregion angular-compiler-options-app
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+      "outDir": "./out-tsc/app",
+      // #enddocregion angular-compiler-options-app
+      "types": []
+    },
+    "files": [
+      "src/main.ts",
+      "src/polyfills.ts"
+    ],
+    "include": [
+      "src/**/*.d.ts"
+    ],
+    "exclude": [
+      "src/test.ts",
+      "src/**/*.spec.ts",
+      "src/**/*-specs.ts",
+      "src/**/*.avoid.ts",
+      "src/**/*.0.ts",
+      "src/**/*.1.ts",
+      "src/**/*.1b.ts",
+      "src/**/*.2.ts",
+      "src/**/*.3.ts",
+      "src/**/*.4.ts",
+      "src/**/*.5.ts",
+      "src/**/*.6.ts",
+      "src/**/*.7.ts",
+      "src/**/testing"
+    ],
+    // #docregion angular-compiler-options-app
+    "angularCompilerOptions": {
+      "strictTemplates": true,
+      "preserveWhitespaces": true,
+      // #enddocregion angular-compiler-options-app
+      "sourceMap": true,
+      "declaration": false
+      // #docregion angular-compiler-options-app
+    },
+  }
+  // #enddocregion angular-compiler-options-app
+  
\ No newline at end of file
diff --git a/aio/content/examples/angular-compiler-options/tsconfig.json b/aio/content/examples/angular-compiler-options/tsconfig.json
new file mode 100644
index 00000000000..8d541770ff1
--- /dev/null
+++ b/aio/content/examples/angular-compiler-options/tsconfig.json
@@ -0,0 +1,37 @@
+// #docplaster ...
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+// #docregion angular-compiler-options
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    // #enddocregion angular-compiler-options
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2017",
+    "module": "es2020",
+    "lib": [
+      "es2018",
+      "dom"
+    ]
+    // #docregion angular-compiler-options
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    // #enddocregion angular-compiler-options
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+    // #docregion angular-compiler-options
+  }
+}
+// #enddocregion angular-compiler-options
diff --git a/aio/content/guide/angular-compiler-options.md b/aio/content/guide/angular-compiler-options.md
index afd35a67646..fb0146430f0 100644
--- a/aio/content/guide/angular-compiler-options.md
+++ b/aio/content/guide/angular-compiler-options.md
@@ -4,21 +4,7 @@ When you use [AOT compilation](guide/aot-compiler), you can control how your app
 
 The template options object, `angularCompilerOptions`, is a sibling to the `compilerOptions` object that supplies standard options to the TypeScript compiler.
 
-<code-example language="json">
-
-{
-  "compilerOptions": {
-    "experimentalDecorators": true,
-    ...
-  },
-  "angularCompilerOptions": {
-    "fullTemplateTypeCheck": true,
-    "preserveWhitespaces": true,
-    ...
-  }
-}
-
-</code-example>
+<code-example language="json" header="tsconfig.json" path="angular-compiler-options/tsconfig.json" region="angular-compiler-options"></code-example>
 
 {@a tsconfig-extends}
 
@@ -32,22 +18,7 @@ The configuration options from the base file are loaded first, then overridden b
 
 For example:
 
-<code-example language="json">
-
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "experimentalDecorators": true,
-    ...
-  },
-  "angularCompilerOptions": {
-    "fullTemplateTypeCheck": true,
-    "preserveWhitespaces": true,
-    ...
-  }
-}
-
-</code-example>
+<code-example language="json" header="tsconfig.app.json" path="angular-compiler-options/tsconfig.app.json" region="angular-compiler-options-app"></code-example>
 
 For more information, see the [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).