diff --git a/packages/schematics/angular/application/files/src/main.ts.template b/packages/schematics/angular/application/files/src/main.ts.template index c7b673cf44b3..3d492bb9626b 100644 --- a/packages/schematics/angular/application/files/src/main.ts.template +++ b/packages/schematics/angular/application/files/src/main.ts.template @@ -1,4 +1,4 @@ -import { enableProdMode } from '@angular/core'; +import { enableProdMode<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%> } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; @@ -7,6 +7,12 @@ import { environment } from './environments/environment'; if (environment.production) { enableProdMode(); } - +<% if(!!viewEncapsulation) { %> +platformBrowserDynamic().bootstrapModule(AppModule, { + defaultEncapsulation: ViewEncapsulation.<%= viewEncapsulation %> +}) + .catch(err => console.error(err)); +<% } else { %> platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err)); +<% } %> \ No newline at end of file diff --git a/packages/schematics/angular/application/index.ts b/packages/schematics/angular/application/index.ts index 0f7a6b4e2220..42f3ea3c7e92 100644 --- a/packages/schematics/angular/application/index.ts +++ b/packages/schematics/angular/application/index.ts @@ -164,16 +164,18 @@ function addAppToWorkspaceFile(options: ApplicationOptions, workspace: Workspace if (options.inlineTemplate === true || options.inlineStyle === true || options.style !== Style.Css) { - schematics['@schematics/angular:component'] = {}; + const componentSchematicsOptions: JsonObject = {}; if (options.inlineTemplate === true) { - (schematics['@schematics/angular:component'] as JsonObject).inlineTemplate = true; + componentSchematicsOptions.inlineTemplate = true; } if (options.inlineStyle === true) { - (schematics['@schematics/angular:component'] as JsonObject).inlineStyle = true; + componentSchematicsOptions.inlineStyle = true; } if (options.style && options.style !== Style.Css) { - (schematics['@schematics/angular:component'] as JsonObject).style = options.style; + componentSchematicsOptions.style = options.style; } + + schematics['@schematics/angular:component'] = componentSchematicsOptions; } if (options.skipTests === true) { diff --git a/packages/schematics/angular/application/index_spec.ts b/packages/schematics/angular/application/index_spec.ts index f733a6c5e49d..352d318548fa 100644 --- a/packages/schematics/angular/application/index_spec.ts +++ b/packages/schematics/angular/application/index_spec.ts @@ -10,7 +10,7 @@ import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/te import { latestVersions } from '../utility/latest-versions'; import { getFileContent } from '../utility/test'; import { Schema as WorkspaceOptions } from '../workspace/schema'; -import { Schema as ApplicationOptions, Style } from './schema'; +import { Schema as ApplicationOptions, Style, ViewEncapsulation } from './schema'; // tslint:disable:max-line-length describe('Application Schematic', () => { @@ -116,6 +116,17 @@ describe('Application Schematic', () => { expect(content).toMatch(/import { AppComponent } from \'\.\/app\.component\';/); }); + it(`should set 'defaultEncapsulation' in main.ts when 'ViewEncapsulation' is provided`, () => { + const tree = schematicRunner.runSchematic('application', { + ...defaultOptions, + viewEncapsulation: ViewEncapsulation.ShadowDom, + }, workspaceTree); + const path = '/projects/foo/src/main.ts'; + const content = tree.readContent(path); + expect(content).toContain('defaultEncapsulation: ViewEncapsulation.ShadowDom'); + expect(content).toContain(`import { enableProdMode, ViewEncapsulation } from '@angular/core'`); + }); + it('should set the right paths in the tsconfig files', () => { const tree = schematicRunner.runSchematic('application', defaultOptions, workspaceTree); let path = '/projects/foo/tsconfig.app.json'; @@ -293,7 +304,6 @@ describe('Application Schematic', () => { it('should set the relative tsconfig paths', () => { const options = { ...defaultOptions, projectRoot: '' }; - const tree = schematicRunner.runSchematic('application', options, workspaceTree); const appTsConfig = JSON.parse(tree.readContent('/src/tsconfig.app.json')); expect(appTsConfig.extends).toEqual('../tsconfig.json'); diff --git a/packages/schematics/angular/application/other-files/app.component.ts.template b/packages/schematics/angular/application/other-files/app.component.ts.template index 91aad371b12d..ac8740a208da 100644 --- a/packages/schematics/angular/application/other-files/app.component.ts.template +++ b/packages/schematics/angular/application/other-files/app.component.ts.template @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%> } from '@angular/core'; @Component({ selector: '<%= selector %>',<% if(inlineTemplate) { %> @@ -28,7 +28,8 @@ import { Component } from '@angular/core'; `,<% } else { %> templateUrl: './app.component.html',<% } if(inlineStyle) { %> styles: []<% } else { %> - styleUrls: ['./app.component.<%= styleExt %>']<% } %> + styleUrls: ['./app.component.<%= styleExt %>']<% } %>,<% if(!!viewEncapsulation) { %>, + encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } %> }) export class AppComponent { title = '<%= name %>';