@schematics/angular 12.1.0-next.6 → 12.1.3

package/application/other-files/app.component.html.template

@@ -96,6 +96,7 @@
   }
 
   .card {
+    all: unset;
     border-radius: 4px;
     border: 1px solid #eee;
     background-color: #fafafa;
@@ -249,7 +250,6 @@
     background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
     margin-left: 4px;
     font-weight: 600;
-    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
   }
 
   .github-star-badge:hover {
@@ -272,10 +272,8 @@
     width: 1920px;
   }
 
-
   /* Responsive Styles */
   @media screen and (max-width: 767px) {
-
     .card-container > *:not(.circle-link) ,
     .terminal {
       width: 100%;
@@ -359,24 +357,24 @@
   <div class="card-container">
     <a class="card" target="_blank" rel="noopener" href="https://angular.io/tutorial">
       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
-
       <span>Learn Angular</span>
-
       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>    </a>
 
     <a class="card" target="_blank" rel="noopener" href="https://angular.io/cli">
       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
-
       <span>CLI Documentation</span>
-
       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
     </a>
 
     <a class="card" target="_blank" rel="noopener" href="https://blog.angular.io/">
       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>
-
       <span>Angular Blog</span>
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
+    </a>
 
+    <a class="card" target="_blank" rel="noopener" href="https://angular.io/devtools/">
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M14.73,13.31C15.52,12.24,16,10.93,16,9.5C16,5.91,13.09,3,9.5,3S3,5.91,3,9.5C3,13.09,5.91,16,9.5,16 c1.43,0,2.74-0.48,3.81-1.27L19.59,21L21,19.59L14.73,13.31z M9.5,14C7.01,14,5,11.99,5,9.5S7.01,5,9.5,5S14,7.01,14,9.5 S11.99,14,9.5,14z"/><polygon points="10.29,8.44 9.5,6 8.71,8.44 6.25,8.44 8.26,10.03 7.49,12.5 9.5,10.97 11.51,12.5 10.74,10.03 12.75,8.44"/></g></g></svg>
+      <span>Angular DevTools</span>
       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
     </a>
 
@@ -389,41 +387,35 @@
   <input type="hidden" #selection>
 
   <div class="card-container">
-    <div class="card card-small" (click)="selection.value = 'component'" tabindex="0">
-        <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-
+    <button class="card card-small" (click)="selection.value = 'component'" tabindex="0">
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
       <span>New Component</span>
-    </div>
-
-    <div class="card card-small" (click)="selection.value = 'material'" tabindex="0">
-        <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+    </button>
 
+    <button class="card card-small" (click)="selection.value = 'material'" tabindex="0">
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
       <span>Angular Material</span>
-    </div>
-
-    <div class="card card-small" (click)="selection.value = 'pwa'" tabindex="0">
-        <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+    </button>
 
+    <button class="card card-small" (click)="selection.value = 'pwa'" tabindex="0">
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
       <span>Add PWA Support</span>
-    </div>
+    </button>
 
-    <div class="card card-small" (click)="selection.value = 'dependency'" tabindex="0">
+    <button class="card card-small" (click)="selection.value = 'dependency'" tabindex="0">
       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-
       <span>Add Dependency</span>
-    </div>
+    </button>
 
-    <div class="card card-small" (click)="selection.value = 'test'" tabindex="0">
+    <button class="card card-small" (click)="selection.value = 'test'" tabindex="0">
       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-
       <span>Run and Watch Tests</span>
-    </div>
+    </button>
 
-    <div class="card card-small" (click)="selection.value = 'build'" tabindex="0">
+    <button class="card card-small" (click)="selection.value = 'build'" tabindex="0">
       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-
       <span>Build for Production</span>
-    </div>
+    </button>
   </div>
 
   <!-- Terminal -->

package/application/other-files/app.component.spec.ts.template

@@ -29,7 +29,7 @@ describe('AppComponent', () => {
   it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
-    const compiled = fixture.nativeElement;
-    expect(compiled.querySelector('.content span').textContent).toContain('<%= name %> app is running!');
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('<%= name %> app is running!');
   });
 });

package/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.ts.template

@@ -14,7 +14,7 @@ import { Component, OnInit<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }
         display: block;
       }
     `<% } %>
-  ]<% } else { %>
+  ]<% } else if (style !== 'none') { %>
   styleUrls: ['./<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>.<%= style %>']<% } %><% if(!!viewEncapsulation) { %>,
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>

package/component/index.js

@@ -36,6 +36,7 @@ const lint_fix_1 = require("../utility/lint-fix");
 const parse_name_1 = require("../utility/parse-name");
 const validation_1 = require("../utility/validation");
 const workspace_1 = require("../utility/workspace");
+const schema_1 = require("./schema");
 function readIntoSourceFile(host, modulePath) {
     const text = host.read(modulePath);
     if (text === null) {
@@ -110,9 +111,10 @@ function default_1(options) {
             options.selector || buildSelector(options, (project && project.prefix) || '');
         validation_1.validateName(options.name);
         validation_1.validateHtmlSelector(options.selector);
+        const skipStyleFile = options.inlineStyle || options.style === schema_1.Style.None;
         const templateSource = schematics_1.apply(schematics_1.url('./files'), [
             options.skipTests ? schematics_1.filter((path) => !path.endsWith('.spec.ts.template')) : schematics_1.noop(),
-            options.inlineStyle ? schematics_1.filter((path) => !path.endsWith('.__style__.template')) : schematics_1.noop(),
+            skipStyleFile ? schematics_1.filter((path) => !path.endsWith('.__style__.template')) : schematics_1.noop(),
             options.inlineTemplate ? schematics_1.filter((path) => !path.endsWith('.html.template')) : schematics_1.noop(),
             schematics_1.applyTemplates({
                 ...core_1.strings,

package/component/schema.d.ts

@@ -71,7 +71,8 @@ export interface Schema {
      */
     skipTests?: boolean;
     /**
-     * The file extension or preprocessor to use for style files.
+     * The file extension or preprocessor to use for style files, or 'none' to skip generating
+     * the style file.
      */
     style?: Style;
     /**
@@ -91,11 +92,13 @@ export declare enum ChangeDetection {
     OnPush = "OnPush"
 }
 /**
- * The file extension or preprocessor to use for style files.
+ * The file extension or preprocessor to use for style files, or 'none' to skip generating
+ * the style file.
  */
 export declare enum Style {
     Css = "css",
     Less = "less",
+    None = "none",
     Sass = "sass",
     Scss = "scss"
 }

package/component/schema.js

@@ -12,12 +12,14 @@ var ChangeDetection;
     ChangeDetection["OnPush"] = "OnPush";
 })(ChangeDetection = exports.ChangeDetection || (exports.ChangeDetection = {}));
 /**
- * The file extension or preprocessor to use for style files.
+ * The file extension or preprocessor to use for style files, or 'none' to skip generating
+ * the style file.
  */
 var Style;
 (function (Style) {
     Style["Css"] = "css";
     Style["Less"] = "less";
+    Style["None"] = "none";
     Style["Sass"] = "sass";
     Style["Scss"] = "scss";
 })(Style = exports.Style || (exports.Style = {}));

package/component/schema.json

@@ -77,10 +77,10 @@
       ]
     },
     "style": {
-      "description": "The file extension or preprocessor to use for style files.",
+      "description": "The file extension or preprocessor to use for style files, or 'none' to skip generating the style file.",
       "type": "string",
       "default": "css",
-      "enum": ["css", "scss", "sass", "less"],
+      "enum": ["css", "scss", "sass", "less", "none"],
       "x-user-analytics": 5
     },
     "type": {

package/migrations/update-12/update-angular-config.js

@@ -7,6 +7,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("@angular-devkit/core");
 const workspace_1 = require("../../utility/workspace");
 const BrowserBuilderOptions = [
     ['aot', false, true],
@@ -22,9 +23,15 @@ const ServerBuilderOptions = [
     ['optimization', false, true],
 ];
 function default_1() {
-    return workspace_1.updateWorkspace((workspace) => {
-        for (const [, target] of workspace_1.allWorkspaceTargets(workspace)) {
-            if (!(target === null || target === void 0 ? void 0 : target.builder.startsWith('@angular-devkit/build-angular'))) {
+    return (_tree, context) => workspace_1.updateWorkspace((workspace) => {
+        for (const [targetName, target, projectName] of workspace_1.allWorkspaceTargets(workspace)) {
+            if (!target.builder.startsWith('@angular-devkit/') &&
+                !target.builder.startsWith('@nguniversal/')) {
+                context.logger.warn(core_1.tags.stripIndent `
+            "${targetName}" target in "${projectName}" project is using a third-party builder.
+            You may need to adjust the options to retain the existing behavior.
+            For more information, see the breaking changes section within the release notes: https://github.com/angular/angular-cli/releases/tag/v12.0.0
+          `);
                 continue;
             }
             // Only interested in Angular Devkit browser and server builders

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematics/angular",
-  "version": "12.1.0-next.6",
+  "version": "12.1.3",
   "description": "Schematics specific to Angular",
   "homepage": "https://github.com/angular/angular-cli",
   "keywords": [
@@ -15,8 +15,8 @@
   ],
   "schematics": "./collection.json",
   "dependencies": {
-    "@angular-devkit/core": "12.1.0-next.6",
-    "@angular-devkit/schematics": "12.1.0-next.6",
+    "@angular-devkit/core": "12.1.3",
+    "@angular-devkit/schematics": "12.1.3",
     "jsonc-parser": "3.0.0"
   },
   "repository": {

package/utility/latest-versions.d.ts

@@ -6,11 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 export declare const latestVersions: {
-    Angular: string;
     RxJs: string;
     ZoneJs: string;
     TypeScript: string;
     TsLib: string;
+    Angular: string;
     DevkitBuildAngular: string;
     ngPackagr: string;
 };

package/utility/latest-versions.js

@@ -8,16 +8,28 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.latestVersions = void 0;
+/** Retrieve the minor version for the provided version string. */
+function getEarliestMinorVersion(version) {
+    const versionMatching = version.match(/^(\d+)\.(\d+)\.*/);
+    if (versionMatching === null) {
+        throw Error('Unable to determine the minor version for the provided version');
+    }
+    const [_, major, minor] = versionMatching;
+    return `${major}.${minor}.0`;
+}
 exports.latestVersions = {
     // These versions should be kept up to date with latest Angular peer dependencies.
-    Angular: '~12.1.0-next.6',
     RxJs: '~6.6.0',
     ZoneJs: '~0.11.4',
     TypeScript: '~4.3.2',
     TsLib: '^2.2.0',
+    // As Angular CLI works with same minor versions of Angular Framework, a tilde match for the current
+    // Angular CLI minor version with earliest prerelease (appended with `-`) will match the latest
+    // Angular Framework minor.
+    Angular: `~${getEarliestMinorVersion(require('../package.json')['version'])}-`,
     // Since @angular-devkit/build-angular and @schematics/angular are always
     // published together from the same monorepo, and they are both
     // non-experimental, they will always have the same version.
     DevkitBuildAngular: '~' + require('../package.json')['version'],
-    ngPackagr: '^12.0.0-next.8',
+    ngPackagr: '^12.1.0',
 };

package/workspace/files/package.json.template

@@ -25,14 +25,14 @@
   "devDependencies": {
     "@angular/cli": "<%= '~' + version %>",
     "@angular/compiler-cli": "<%= latestVersions.Angular %>",<% if (!minimal) { %>
-    "@types/jasmine": "~3.6.0",<% } %>
+    "@types/jasmine": "~3.8.0",<% } %>
     "@types/node": "^12.11.1",<% if (!minimal) { %>
-    "jasmine-core": "~3.7.0",
+    "jasmine-core": "~3.8.0",
     "karma": "~6.3.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",<% } %>
+    "karma-jasmine-html-reporter": "~1.7.0",<% } %>
     "typescript": "<%= latestVersions.TypeScript %>"
   }
 }