From e5c3017df34faafb84c5d5367809ec42004feceb Mon Sep 17 00:00:00 2001 From: iRealNirmal Date: Thu, 23 Sep 2021 12:44:24 +0530 Subject: [PATCH] docs: move angular-compiler-options tsconfig snippets to external file (#43545) Moving angular-compiler-options docs inline code to external file of tsconfig.json and tsconfig.app.json. closes #43336 PR Close #43545 --- .pullapprove.yml | 1 + aio/content/examples/.gitignore | 4 ++ .../e2e/src/app.e2e-spec.ts | 20 +++++++++ .../example-config.json | 19 ++++++++ .../src/app/app.component.css | 0 .../src/app/app.component.html | 1 + .../src/app/app.component.spec.ts | 20 +++++++++ .../src/app/app.component.ts | 10 +++++ .../src/app/app.module.ts | 16 +++++++ .../angular-compiler-options/src/index.html | 13 ++++++ .../angular-compiler-options/src/main.ts | 12 +++++ .../angular-compiler-options/stackblitz.json | 18 ++++++++ .../tsconfig.app.json | 45 +++++++++++++++++++ .../angular-compiler-options/tsconfig.json | 37 +++++++++++++++ aio/content/guide/angular-compiler-options.md | 33 +------------- 15 files changed, 218 insertions(+), 31 deletions(-) create mode 100644 aio/content/examples/angular-compiler-options/e2e/src/app.e2e-spec.ts create mode 100644 aio/content/examples/angular-compiler-options/example-config.json create mode 100644 aio/content/examples/angular-compiler-options/src/app/app.component.css create mode 100644 aio/content/examples/angular-compiler-options/src/app/app.component.html create mode 100644 aio/content/examples/angular-compiler-options/src/app/app.component.spec.ts create mode 100644 aio/content/examples/angular-compiler-options/src/app/app.component.ts create mode 100644 aio/content/examples/angular-compiler-options/src/app/app.module.ts create mode 100644 aio/content/examples/angular-compiler-options/src/index.html create mode 100644 aio/content/examples/angular-compiler-options/src/main.ts create mode 100644 aio/content/examples/angular-compiler-options/stackblitz.json create mode 100644 aio/content/examples/angular-compiler-options/tsconfig.app.json create mode 100644 aio/content/examples/angular-compiler-options/tsconfig.json 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 @@ +

Replace the src folder in this {{title}} with yours.

\ 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 @@ + + + + + Ponyracer + + + + + + + + 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. - - -{ - "compilerOptions": { - "experimentalDecorators": true, - ... - }, - "angularCompilerOptions": { - "fullTemplateTypeCheck": true, - "preserveWhitespaces": true, - ... - } -} - - + {@a tsconfig-extends} @@ -32,22 +18,7 @@ The configuration options from the base file are loaded first, then overridden b For example: - - -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "experimentalDecorators": true, - ... - }, - "angularCompilerOptions": { - "fullTemplateTypeCheck": true, - "preserveWhitespaces": true, - ... - } -} - - + For more information, see the [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).