Playground + Third party packages (Material)

[raygig]

I am developing a library that adds functionality to Material. In order to test the library Material has to be included. I don't want to include Material in the library but include it ONLY in the playground. I was able to do this by manually updating the systemjs.config.js and mapping the necessary packages.

      '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
      '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',      
      '@angular/cdk/bidi': 'npm:@angular/cdk/bundles/cdk-bidi.umd.js',
      '@angular/cdk/keycodes': 'npm:@angular/cdk/bundles/cdk-keycodes.umd.js',
      '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
      '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.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/collections': 'npm:@angular/cdk/bundles/cdk-collections.umd.js',
      '@angular/cdk/observers': 'npm:@angular/cdk/bundles/cdk-observers.umd.js',
      '@angular/cdk/scrolling': 'npm:@angular/cdk/bundles/cdk-scrolling.umd.js',
      '@angular/cdk/accordion': 'npm:@angular/cdk/bundles/cdk-accordion.umd.js',
      '@angular/cdk/layout': 'npm:@angular/cdk/bundles/cdk-layout.umd.js',
      '@angular/cdk/table': 'npm:@angular/cdk/bundles/cdk-table.umd.js',
      '@angular/cdk/stepper': 'npm:@angular/cdk/bundles/cdk-stepper.umd.js',
      '@angular/cdk/stepper': 'npm:@angular/cdk/bundles/cdk-stepper.umd.js',
      '@angular/cdk/coercion': 'npm:@angular/cdk/bundles/cdk-coercion.umd.js'
      'tslib': 'npm:tslib/tslib.js'

I was wondering if there is a better way to do this, because it feels like a huge hack considering we have generator-angular2-library automating things.

[frankdavidcorona]

@raygig I need did the same work.

[izifortune]

This could be part of a bigger discussion about the future of the playground. There are a few options that we can explore. Generally speaking the playground wasn't made for handling all this external libraries to be added and I can see your pain on manually adding all of those.

If we want to keep the playground in systemjs:

• Adding a script that will link automatically the required libraries

If we don't want to keep systemjs:

• Include @angular/cli and generate an app

[jdjuan]

Good call @izifortune What are your thoughts @jvandemo ?

[tonysamperi]

Yep. I encountered this problem too...I'm about to try raygig's solution

EDIT These are my added deps to systemjs.config

        '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
        '@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js',
        '@angular/cdk/accordion': 'npm:@angular/cdk/bundles/cdk-accordion.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/coercion': 'npm:@angular/cdk/bundles/cdk-coercion.umd.js',
        '@angular/cdk/collections': 'npm:@angular/cdk/bundles/cdk-collections.umd.js',
        '@angular/cdk/keycodes': 'npm:@angular/cdk/bundles/cdk-keycodes.umd.js',
        '@angular/cdk/layout': 'npm:@angular/cdk/bundles/cdk-layout.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/platform': 'npm:@angular/cdk/bundles/cdk-platform.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/stepper': 'npm:@angular/cdk/bundles/cdk-stepper.umd.js',
        '@angular/cdk/table': 'npm:@angular/cdk/bundles/cdk-table.umd.js',
        '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
        "@angular/material": 'npm:@angular/material/bundles/material.umd.js',
        "@angular/flex-layout": 'npm:@angular/flex-layout/bundles/flex-layout.umd.js',
        "lodash": "npm:lodash/core.js",
        "rxjs": 'npm:rxjs/bundles/Rx.js',
        "rxjs/add": 'npm:rxjs/add/',
        "rxjs/BehaviorSubject": 'npm:rxjs/BehaviorSubject.js',
        "rxjs/observable": 'npm:rxjs/observable/',
        "rxjs/Observable": 'npm:rxjs/Observable.js',
        "rxjs/operator": 'npm:rxjs/operator/',
        "rxjs/operators": 'npm:rxjs/operators/',
        "rxjs/ReplaySubject": 'npm:rxjs/ReplaySubject.js',
        "rxjs/Subject": 'npm:rxjs/Subject.js',
        "rxjs/Subscription": 'npm:rxjs/Subscription.js',
        'tslib': 'npm:tslib/tslib.js'

[jvandemo]

@izifortune — Thank you! Which of your proposed solutions would work best in your opinion?