Components: SystemJS maps for CDK

[busbina]

Bug, feature request, or proposal:

All of the CDK packages were 404ing after update.
SystemJS was looking for paths like "http://mydevsite/node_modules/@angular/cdk/bundles/cdk.umd.js/table"

I had to add all of the following to my systemjs.config.js
'@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js', '@angular/cdk/a11y':'npm:/@angular/cdk/bundles/cdk-a11y.umd.js', '@angular/cdk/bidi':'npm:/@angular/cdk/bundles/cdk-bidi.umd.js', '@angular/cdk/observers':'npm:/@angular/cdk/bundles/cdk-observers.umd.js', '@angular/cdk/overlay':'npm:/@angular/cdk/bundles/cdk-overlay.umd.js', '@angular/cdk/portal':'npm:/@angular/cdk/bundles/cdk-portal.umd.js', '@angular/cdk/scrolling':'npm:/@angular/cdk/bundles/cdk-scrolling.umd.js', '@angular/cdk/platform':'npm:/@angular/cdk/bundles/cdk-platform.umd.js', '@angular/cdk/keycodes':'npm:/@angular/cdk/bundles/cdk-keycodes.umd.js', '@angular/cdk/coercion':'npm:/@angular/cdk/bundles/cdk-coercion.umd.js', '@angular/cdk/collections':'npm:/@angular/cdk/bundles/cdk-collections.umd.js', '@angular/cdk/rxjs':'npm:/@angular/cdk/bundles/cdk-rxjs.umd.js', '@angular/cdk/table':'npm:/@angular/cdk/bundles/cdk-table.umd.js'

What is the expected behavior?

Some way of only adding one map.

What is the current behavior?

I have to create a map for every module

What are the steps to reproduce?

Create an new ng project with systemJS and setup material beta10.

What is the use-case or motivation for changing an existing behavior?

Took me a bit of time to write a regex to get all the modules from the 404 list. This could get tedious if they change often.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

My package.json
"@angular/animations": "^4.2.4", "@angular/material": "^2.0.0-beta.10", "@angular/cdk": "^2.0.0-beta.10", "@angular/common": "^4.2.4", "@angular/compiler": "^4.2.4", "@angular/core": "^4.2.4", "@angular/forms": "^4.2.4", "@angular/http": "^4.2.4", "@angular/platform-browser": "^4.2.4", "@angular/platform-browser-dynamic": "^4.2.4", "@angular/router": "^4.2.4", "core-js": "^2.4.1", "rxjs": "^5.4.2", "zone.js": "^0.8.14", "systemjs": "0.19.40"

Running Windows10, "typescript": "~2.3.3"

Is there anything else we should know?

[jelbourn]

We can't make them one entry in the map without making them all one UMD bundle, unfortunately. I suppose we could create something like cdk-all, but this would end up quite large in the long term (a big part of why we broke it up to begin with).

We could probably make it easier to copy-paste the System config you would need from the docs, though.

[dherges]

I've got one related question.

What happens if importing importing the same module from the primary and a secondary entrypoint?

import { PortalModule } from '@angular/cdk/portal';
import { PortalModule } from '@angular/cdk';

Not in the same .ts file but in different files ... now do I depend on two separate versions of the same module (i.e., SystemJS will load the module twice)?

[jelbourn]

import { PortalModule } from '@angular/cdk'; won't work because the individual subpackages are not re-exported through the top-level package.

[pdavin-zz]

+1 to Material handling this or making it easier for clients to maintain. Every time we upgrade Material, we need to add a new CDK bundle to our SystemJs mapping. Even though our app's CDK usage didn't change at all - it's Material that changed its CDK usage in its dependencies.

Ex, in the latest instance (upgrading this week) I'm getting an error because Material added cdk/accordion. Since we don't have that in our systemjs map it gets mapped to cdk.umd.js which doesn't work.
Error evaluating @angular/cdk/bundles/cdk.umd.js/accordion.js

[dylanbaxter]

+1
Where are these "docs" with the new mappings anyway?

[devversion]

Closing this as this is working as intended. We ship UMD bundles per entry-point (now also for Angular Material). This is specified in the Angular Package Format v10.

Generally, it's not recommended to use UMD for production applications, so please consider using the ES2015 output for improved bundle size. If you rely on UMD for any reason: It's known that setting up the configuration is painful, but changing the build process to generate a combined UMD bundle is rather complicated given the small group of users that relies on UMD.

We rely on UMD too for our Saucelabs/Browserstack tests currently, but auto-generate the mappings. Ideally though, we'd run rollup to generate single bundle.

[angular-automatic-lock-bot[bot]]

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._}