build: create JS bundles for each component #6998

jelbourn · 2017-09-12T05:26:48Z

Before this change, all of @angular/material was bundled into a
single, flat JS file.

After this change, each top-level component (i.e., each directory under
src/lib) will be have its own JS file (and d.ts and metadata.json).

The benefit of this change is that current versions of webpack will be
able to do a much better job of only including the code an app is using.

It also allows (but does not require) people to explicitly import from specific components,
e.g.

import {MdButtonModule} from '@angular/material/button';

For development within Angular Material itself we have to use these
deeper imports because the root @angular/material doesn't exist until
the actual package is created.

Additionally, this PR adds a tsconfig.json for each dir under src/
with the correct path mappings for that directory, so that IDEs will
correctly generate imports.

Closure Compiler CI check is also disabled by this PR; it cannot work
with the new package structure until a release with
google/closure-compiler#2600 is made available.

Fixes #4137

devversion · 2017-09-12T08:30:05Z

src/lib/tsconfig-build.json

@@ -5,7 +5,7 @@
    "declaration": true,
    "stripInternal": false,
    "experimentalDecorators": true,
-    "noUnusedParameters": true,
+    "noUnusedParameters": false,


Why are we no longer having this check? Maybe add a comment if necessary

Was just trying something during development; reverted

devversion · 2017-09-12T08:40:04Z

tools/package-tools/entry-point-package-json.ts

-    module: `../@angular/${packageName}/${entryPointName}.es5.js`,
-    es2015: `../@angular/${packageName}/${entryPointName}.js`,
+    module: `../esm5/${packageName}/${entryPointName}.es5.js`,
+    es2015: `../esm2015/${packageName}/${entryPointName}.js`,


Out of curiosity: How does this work with Closure Compiler now? Is there an alternative to the js_module_roots option?

Short answer: it doesn't.

I updated the script and left a comment explaining the current situation w/ closure.

devversion · 2017-09-12T08:42:02Z

src/lib/tsconfig-umd.json

+    "flatModuleId": "@angular/material",
+    "skipTemplateCodegen": true
+  }
+}


Is that file used anywhere? We now have three tsconfig-XX files in the lib/ package.

I was just trying something out with this, meant to delete it.

crisbeto

High-level LGTM

jelbourn · 2017-09-12T22:57:18Z

Rebased such that it includes material-moment-adapter/
Added a tsconfig.json per src/ directory in order to make IDEs auto-add imports to the right path.
Disabled closure compiler CI check temporarily (need a new release)
Refactored rollup bundling code into a class, PackageBundler so that it can maintain the context of the BuildPackage
Fixed prerender task

jelbourn · 2017-09-13T01:34:45Z

@devversion after this PR we're definitely going to have to parallelize the typescript builds and bundling. With this change it takes over a minute. To paralleize the tasks, we'll need to manually spawn a child process for each, since nodejs is single-threaded. We also probably want to tweak the watch tasks to only re-compile the sub-packages that changed. Let me know if you want to work on all that.

All of this will be obsolete when we switch to bazel, but we're at least a month away from making that switch.

devversion

@jelbourn That makes sense. In regards to the tsconfig per package directory, didn't the tsconfig in the project root work anymore?

Also LGTM! Nice

jelbourn · 2017-09-13T17:34:22Z

@devversion the tsconfig in the root would cause IDEs to autogenerate the wrong imports sometimes.

Before this change, all of `@angular/material` was bundled into a single, flat JS file. After this change, each top-level component (i.e., each directory under `src/lib`) will be have its own JS file (and d.ts and metadata.json). The benefit of this change is that current versions of webpack will be able to do a much better job of only including the code an app is using. It also allows (but does not require) people to explicitly import from specific components, e.g. ``` import {MdButtonModule} from '@angular/material/button'; `` For development _within Angular Material itself_ we have to use these deeper imports because the root `@angular/material` doesn't exist until we build the relase package. Additionally, this PR adds a `tsconfig.json` for each dir under `src/` with the correct path mappings for that directory, so that IDEs will correctly generate imports. Closure Compiler CI check is also disabled by this PR; it cannot work with the new package structure until a release with google/closure-compiler#2600 is made available.

jelbourn · 2017-09-13T20:27:49Z

Caretaker note: both the copy config and the build rules need to updated alongside this change

jelbourn · 2017-09-13T20:29:25Z

Another note: if this gets merged alongside another PR, it will potentially need a build fix (for anything importing from, e.g., ../core)

Before this change, all of `@angular/material` was bundled into a single, flat JS file. After this change, each top-level component (i.e., each directory under `src/lib`) will be have its own JS file (and d.ts and metadata.json). The benefit of this change is that current versions of webpack will be able to do a much better job of only including the code an app is using. It also allows (but does not require) people to explicitly import from specific components, e.g. ``` import {MdButtonModule} from '@angular/material/button'; `` For development _within Angular Material itself_ we have to use these deeper imports because the root `@angular/material` doesn't exist until we build the relase package. Additionally, this PR adds a `tsconfig.json` for each dir under `src/` with the correct path mappings for that directory, so that IDEs will correctly generate imports. Closure Compiler CI check is also disabled by this PR; it cannot work with the new package structure until a release with google/closure-compiler#2600 is made available.

angular-automatic-lock-bot · 2019-09-08T15:01:24Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

jelbourn added area: dev-infra Issue related to internal project infrastructure pr: needs review labels Sep 12, 2017

jelbourn requested review from crisbeto and devversion September 12, 2017 05:26

jelbourn requested review from amcdnl, andrewseguin, josephperrott, kara, mmalerba and tinayuangao as code owners September 12, 2017 05:26

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Sep 12, 2017

devversion reviewed Sep 12, 2017

View reviewed changes

crisbeto approved these changes Sep 12, 2017

View reviewed changes

jelbourn force-pushed the build-bits branch 8 times, most recently from 8d1216a to f50ea1a Compare September 12, 2017 22:57

jelbourn force-pushed the build-bits branch from f50ea1a to ad93c97 Compare September 13, 2017 01:30

devversion approved these changes Sep 13, 2017

View reviewed changes

devversion added pr: lgtm and removed pr: needs review labels Sep 13, 2017

jelbourn force-pushed the build-bits branch from ad93c97 to 1f240a5 Compare September 13, 2017 20:20

jelbourn added action: merge The PR is ready for merge by the caretaker merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note labels Sep 13, 2017

mmalerba merged commit 1cb8907 into angular:master Sep 14, 2017

aciccarello mentioned this pull request Dec 8, 2017

feat(): use secondary entry points for @angular/material and rxjs Teradata/covalent#1019

Merged

6 tasks

jelbourn deleted the build-bits branch April 2, 2018 22:30

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

build: create JS bundles for each component #6998

build: create JS bundles for each component #6998

jelbourn commented Sep 12, 2017 •

edited

Loading

devversion Sep 12, 2017

jelbourn Sep 12, 2017

devversion Sep 12, 2017

jelbourn Sep 12, 2017

devversion Sep 12, 2017

jelbourn Sep 12, 2017

crisbeto left a comment

jelbourn commented Sep 12, 2017 •

edited

Loading

jelbourn commented Sep 13, 2017

devversion left a comment

jelbourn commented Sep 13, 2017

jelbourn commented Sep 13, 2017

jelbourn commented Sep 13, 2017

angular-automatic-lock-bot bot commented Sep 8, 2019

build: create JS bundles for each component #6998

build: create JS bundles for each component #6998

Conversation

jelbourn commented Sep 12, 2017 • edited Loading

devversion Sep 12, 2017

Choose a reason for hiding this comment

jelbourn Sep 12, 2017

Choose a reason for hiding this comment

devversion Sep 12, 2017

Choose a reason for hiding this comment

jelbourn Sep 12, 2017

Choose a reason for hiding this comment

devversion Sep 12, 2017

Choose a reason for hiding this comment

jelbourn Sep 12, 2017

Choose a reason for hiding this comment

crisbeto left a comment

Choose a reason for hiding this comment

jelbourn commented Sep 12, 2017 • edited Loading

jelbourn commented Sep 13, 2017

devversion left a comment

Choose a reason for hiding this comment

jelbourn commented Sep 13, 2017

jelbourn commented Sep 13, 2017

jelbourn commented Sep 13, 2017

angular-automatic-lock-bot bot commented Sep 8, 2019

jelbourn commented Sep 12, 2017 •

edited

Loading

jelbourn commented Sep 12, 2017 •

edited

Loading