refactor: convert app to latest Angular CLI format by Splaktar · Pull Request #641 · angular/material.angular.io

Splaktar · 2019-10-02T02:54:35Z

PR Checklist

Please check that your PR fulfills the following requirements:

The commit message follows our guidelines
Tests for the changes have been added or weren't appropriate

What is the current behavior?

The Angular workspace and app project structure is not up to date with the latest recommendations from the Angular CLI.

Issue Number:
N/A

What is the new behavior?

Update to the latest recommendations from the Angular CLI in order to facilitate a future update to enable Ivy.

fix some Ivy and TypeScript compilation and configuration issues
add a build:highmem for use when the build fails due to memory usage
update all dependencies that are supported
remove unneeded polyfills now that differential loading is supported
convert workspace to current format
move and update tsconfigs to match current CLI format
log errors on bootstrap
enable some router quality of life options
add a Version interface
update StackBlitz
- Copyright
- major Angular version
- dependencies
fix build error for setTimeout
- it was resolving to the NodeJS version rather than DOM version
Work around build(release): generates invalid semver versions and breaks material.angular.io builds components#17264

Other information

This fixes some Ivy-related issues, but there are a few remaining fixes needed here and in Angular Material itself before the project will build with Ivy.

jelbourn · 2019-10-02T17:23:07Z

angular.json

@@ -1,10 +1,16 @@
 {
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",


Are the changes for Angular CLI structure throughout this PR captured by a schematic? To what extent will these changes be required of other Angular CLI users? (Particularly ones who started a project in the early days like us)

cc @vikerman @IgorMinar @StephenFluin

Most of the changes are not breaking or required changes. They mostly fall into the category of best practices. Over time, as these slight deviations from best practices build up, you can run into issues and/or unexpected breaking changes in future migrations.

Most projects that I've seen will try to align themselves with the best practices (i.e. output from a ng new) from the latest version of the Angular CLI every couple of major releases. Currently, this repo seems to be aligned with the recommendations from Angular CLI v5.

I guess what I really want to know here is how much of this change was for ivy and how much was was just event horizon for Angular CLI?

I just went through and added comments for any Ivy-specific issues (only 2-3).

e2e/src/app.po.ts

e2e/src/app.e2e-spec.ts

jelbourn · 2019-10-02T17:25:52Z

package.json

-    "e2e": "protractor",
+    "e2e": "yarn build-themes && ng e2e",
+    "build": "yarn build-themes && ng build",
+    "build:highmem": "yarn build-themes && node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build",


Is this something commonly required, or is there something special about our app? I'm surprised that it's necessary given the relatively simple nature of our docs app

It's tracked here: angular/angular-cli#13734. Based on this issue, it has become quite common and only minor progress has been made towards "solving it". In some cases, the CLI team has stated that increasing the available memory is expected.

I only ran into the issue when doing an AOT non-production build.

I'm not sure if this would occur with Ivy as well since the Ivy build doesn't get that far into the build process, yet.

It's also needed with Ivy.

It looks like this is being addressed in PR angular/angular-cli#15777.

package.json

src/app/pages/component-sidenav/component-sidenav.spec.ts

Splaktar · 2019-10-02T18:38:09Z

src/app/shared/navigation-focus/navigation-focus.ts

    clearTimeout(lastTimeoutId);
    // 100ms timeout is used to allow the page to settle before moving focus for screen readers.
-    lastTimeoutId = setTimeout(() => this.el.nativeElement.focus({preventScroll: true}), 100);
+    lastTimeoutId = window.setTimeout(() => this.el.nativeElement.focus({preventScroll: true}),


For some reason the build always failed here because it thought this was referring to NodeJS's function which returns a NodeJS.Timeout or NodeJS.Timer. Adding window was the widely accepted solution across StackOverflow and issue trackers.

cc @devversion the nodejs typings shouldn't be making their way into the web compilation unit, but this is something we can deal with later

src/app/pages/component-sidenav/component-sidenav.html

Splaktar · 2019-10-02T19:02:26Z

src/app/shared/theme-picker/theme-picker.ts

-      .pipe(map(params => params.get('theme')), filter(Boolean))
-      .subscribe(themeName => this.installTheme(themeName));
+      .pipe(map((params: ParamMap) => params.get('theme')), filter(Boolean))
+      .subscribe((themeName: string) => this.installTheme(themeName));


This is needed for strictNullChecks, but it wasn't detected previously. With the latest Angular/CLI/RxJS versions, it does become an error:

theme-picker.ts:75:51 - error TS2345: Argument of type 'unknown' is not assignable to parameter of type 'string'.

src/app/shared/version-picker/version-picker.ts

Splaktar · 2019-10-02T19:17:52Z

src/main.ts

 // an old service worker from a previous version of the docs.
 unregisterServiceWorkers()
-  .then(hadServiceWorker => hadServiceWorker && location.reload(true));
+  .then(hadServiceWorker => hadServiceWorker && location.reload());


Passing true for forceReload is deprecated.

jelbourn · 2019-10-02T19:29:03Z

I just created an 8.x branch on this repo for the current master; we can publish any remaining 8.x releases from there and make target v9 with master

crisbeto · 2019-10-02T19:42:39Z

e2e/src/app.e2e-spec.ts

+  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({


I'm not sure whether this will actually fail the test. A long time ago I tried doing something similar to detect leaking elements in unit tests and I couldn't get it to fail properly, although Jasmine could've changed the behavior since then. It might be better to either throw an error here or pull it out into a function that is called at the end of each test.

This is taken directly from what the Angular CLI's e2e schematic generates for a new project.

If there is a little more concrete guidance here, I could open up an issue against Angular CLI.

src/app/shared/version-picker/version-picker.ts

tsconfig.app.json

fix some Ivy and TypeScript compilation and configuration issues add a `build:highmem` for use when the build fails due to memory usage update all dependencies that are supported remove unneeded polyfills now that differential loading is supported convert workspace to current format move and update tsconfigs to match current CLI format log errors on bootstrap enable some router quality of life options add a `Version` interface update StackBlitz - Copyright - major Angular version - dependencies fix build error for `setTimeout` - it was resolving to the NodeJS version rather than DOM version Work around angular/components#17264

jelbourn

LGTM

fix some Ivy and TypeScript compilation and configuration issues add a `build:highmem` for use when the build fails due to memory usage update all dependencies that are supported remove unneeded polyfills now that differential loading is supported convert workspace to current format move and update tsconfigs to match current CLI format log errors on bootstrap enable some router quality of life options add a `Version` interface update StackBlitz - Copyright - major Angular version - dependencies fix build error for `setTimeout` - it was resolving to the NodeJS version rather than DOM version Work around angular/components#17264

Splaktar self-assigned this Oct 2, 2019

googlebot added the cla: yes label Oct 2, 2019

Splaktar force-pushed the migrateToLatestCLI branch 2 times, most recently from 19462cc to d64fb9c Compare October 2, 2019 04:55

Splaktar requested a review from jelbourn October 2, 2019 04:59

Splaktar force-pushed the migrateToLatestCLI branch from d64fb9c to c04b3ef Compare October 2, 2019 05:00

Splaktar added infrastructure P2: required refactoring labels Oct 2, 2019

Splaktar force-pushed the migrateToLatestCLI branch from c04b3ef to ab9ba47 Compare October 2, 2019 06:10

Splaktar mentioned this pull request Oct 2, 2019

Build error in "@angular/material-examples": "angular/material2-docs-content#8.1.x" #629

Closed

jelbourn reviewed Oct 2, 2019

View reviewed changes

Splaktar force-pushed the migrateToLatestCLI branch from ab9ba47 to 09a5672 Compare October 2, 2019 18:34

Splaktar commented Oct 2, 2019

View reviewed changes

src/app/pages/component-sidenav/component-sidenav.html Show resolved Hide resolved

Splaktar commented Oct 2, 2019

View reviewed changes

Splaktar force-pushed the migrateToLatestCLI branch from 09a5672 to 2fff65f Compare October 2, 2019 19:15

Splaktar commented Oct 2, 2019

View reviewed changes

src/app/shared/version-picker/version-picker.ts Outdated Show resolved Hide resolved

Splaktar commented Oct 2, 2019

View reviewed changes

Splaktar requested review from crisbeto and devversion October 2, 2019 19:25

Splaktar mentioned this pull request Oct 2, 2019

Angular 7/8 FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory angular/angular-cli#13734

Closed

Splaktar force-pushed the migrateToLatestCLI branch 2 times, most recently from 9a04091 to 4bad94e Compare October 2, 2019 19:40

crisbeto reviewed Oct 2, 2019

View reviewed changes

Splaktar force-pushed the migrateToLatestCLI branch from 4bad94e to 858afc3 Compare October 2, 2019 20:07

jelbourn approved these changes Oct 2, 2019

View reviewed changes

jelbourn merged commit 4b0d7eb into master Oct 2, 2019

Splaktar deleted the migrateToLatestCLI branch October 2, 2019 20:52

This was referenced Oct 8, 2019

normalize angular project layouts angular/angular-cli#15741

Closed

refactor(@schematics/angular): convert test to use async await angular/angular-cli#15785

Closed

		@@ -1,10 +1,16 @@
		{
		"$schema": "./node_modules/@angular/cli/lib/config/schema.json",

Conversation

Splaktar commented Oct 2, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Checklist

What is the current behavior?

What is the new behavior?

Other information

Uh oh!

jelbourn Oct 2, 2019 • edited by Splaktar Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Splaktar Oct 2, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jelbourn commented Oct 2, 2019

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

jelbourn left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Splaktar commented Oct 2, 2019 •

edited

Loading

jelbourn Oct 2, 2019 •

edited by Splaktar

Loading

Splaktar Oct 2, 2019 •

edited

Loading