fix(@schematics/angular): fixes issue that ViewEncapsulation is not being configured when provided

Fixes #13689

Author: alan-agius4

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));
+<% } %>

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) {

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');

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 %>';