Bundling with mangle Breaks

[jscherbaum]

I've used this Jspm Template with Angular2.RC5 and Angular2 Material Design 2.0.0-alpha.7-4 and it works fine for the development Mode, but if i deploy the Project in Production Mode with a mangled bundle, this bundle breaks.

The Bundled Application throws errors like this:

Can't bind to 'value' since it isn't a known property of 'md-radio-button'.

I've found a similar Bug on the angular Repo: https://github.com/angular/angular/issues/10618

I think the Problem lays inside Angular2 itself.

To solve this issue for me i've set mangle to false in the following line in package.json:

"dist-bundle": "rimraf dist/bundle.js && npm run translations && jspm build src/main dist/bundle.js --minify --no-mangle --format global --global-name APP --config jspm.dist-bundle.json --log ok && cp src/index.html dist",

[DorianGrey]

Hm... the template was already updated to RC.6. W.r.t. this comment, the mangling issue should be resolved in that version. Can you a try to an update and see if it works afterwards?

[jscherbaum]

I'tried to migrate from rc5 to rc6, but i get it no more working... there are errors like this:

jspm_packages/npm/@angular2-material/sidenav@2.0.0-alpha.8-1/sidenav.js:18:8: Semi-colon expected

and i don't know how to solve them :(

[DorianGrey]

Hm... I see. The publishing style has changed from RC.5 to RC.6, i.e. the basic modules are published in ESM format by default. L18 in that file is:

import { NgModule, Component, ContentChildren, ElementRef, HostBinding, Input, Optional, Output, QueryList, ChangeDetectionStrategy, EventEmitter, Renderer, ViewEncapsulation } from '@angular/core';

This (currently) still requires a transpiler (like Babel) to be usable directly. We already have several mapping like this in jspm.config.js to point to the UMD build:

map: {
    '@angular/router/testing': 'npm:@angular/router@3.0.0-rc.2/bundles/router-testing.umd.js',
   // ...
}

Thus, please try to add

'@angular2-material/sidenav': 'npm:@angular2-material/sidenav@2.0.0-alpha.8-1/sidenav.umd.js'

to the map-section. Should work properly here... I hope. You might need to add an entry for other material components accordingly.

[svi3c]

@jscherbaum for more info about upgrading to rc.6 with angular2-material please read their breaking changes.

[jscherbaum]

i have added the following code to the jspm.config file inside the map section where all '@angular/router/testing': 'npm:@angular/router@3.0.0-rc.2/bundles/router-testing.umd.js' entries are present:

    '@angular2-material/card': 'npm:@angular2-material/card@2.0.0-alpha.8-1/card.umd.js',
    '@angular2-material/progress-circle': 'npm:@angular2-material/progress-circle@2.0.0-alpha.8-1/progress-circle.umd.js',
    '@angular2-material/sidenav': 'npm:@angular2-material/sidenav@2.0.0-alpha.8-1/sidenav.umd.js',
    '@angular2-material/radio': 'npm:@angular2-material/radio@2.0.0-alpha.8-1/radio.umd.js',
    '@angular2-material/list': 'npm:@angular2-material/list@2.0.0-alpha.8-1/list.umd.js',
    '@angular2-material/input': 'npm:@angular2-material/input@2.0.0-alpha.8-1/input.umd.js',
    '@angular2-material/icon': 'npm:@angular2-material/icon@2.0.0-alpha.8-1/icon.umd.js',
    '@angular2-material/core': 'npm:@angular2-material/core@2.0.0-alpha.8-1/core.umd.js',
    '@angular2-material/button': 'npm:@angular2-material/button@2.0.0-alpha.8-1/button.umd.js'

and this in my Module classes:

import {MdSidenavModule} from "@angular2-material/sidenav";
import {MdButtonModule} from "@angular2-material/button";
import {MdToolbarModule} from "@angular2-material/toolbar";
import {MdListModule} from "@angular2-material/list";
import {MdIconModule} from "@angular2-material/icon";
import {MdRadioModule} from "@angular2-material/radio";
import {MdProgressCircleModule} from "@angular2-material/progress-circle";
import {MdCardModule} from "@angular2-material/card";
import {MdInputModule} from "@angular2-material/input";

inside imports of the ngModule:

    MdSidenavModule.forRoot(),
    MdButtonModule.forRoot(),
    MdToolbarModule.forRoot(),
    MdListModule.forRoot(),
    MdIconModule.forRoot(),
    MdRadioModule.forRoot(),
    MdProgressCircleModule.forRoot(),
    MdCardModule.forRoot(),
    MdInputModule.forRoot(),

but the Error stays the same ...

err  MultipleErrors: Error compiling cjs module "npm:@angular2-material/sidenav@2.0.0-alpha.8-1/sidenav.js" at jspm_packages/npm/@angular2-material/sidenav@2.0.0-alpha.8-1/sidenav.js
  jspm_packages/npm/@angular2-material/sidenav@2.0.0-alpha.8-1/sidenav.js:18:1: Unexpected reserved word import
jspm_packages/npm/@angular2-material/sidenav@2.0.0-alpha.8-1/sidenav.js:18:8: Semi-colon expected
jspm_packages/npm/@angular2-material/sidenav@2.0.0-alpha.8-1/sidenav.js:18:183: Semi-colon expected
jspm_packages/npm/@angular2-material/sidenav@2.0.0-alpha.8-1/sidenav.js:19:1: Unexpected reserved word import
jspm_packages/npm/@angular2-material/sidenav@2.0.0-alpha.8-1/sidenav.js:19:8: Semi-colon expected
jspm_packages/npm/@angular2-material/sidenav@2.0.0-alpha.8-1/sidenav.js:19:30: Semi-colon expected
jspm_packages/npm/@angular2-material/sidenav@2.0.0-alpha.8-1/sidenav.js:20:1: Unexpected reserved word import
jspm_packages/npm/@angular2-material/sidenav@2.0.0-alpha.8-1/sidenav.js:20:8: Semi-colon expected
jspm_packages/npm/@angular2-material/sidenav@2.0.0-alpha.8-1/sidenav.js:20:49: Semi-colon expected
jspm_packages/npm/@angular2-material/sidenav@2.0.0-alpha.8-1/sidenav.js:22:1: Unexpected reserved word export
jspm_packages/npm/@angular2-material/sidenav@2.0.0-alpha.8-1/sidenav.js:22:8: Semi-colon expected
jspm_packages/npm/@angular2-material/sidenav@2.0.0-alpha.8-1/sidenav.js:36:1: Unexpected reserved word export
jspm_packages/npm/@angular2-material/sidenav@2.0.0-alpha.8-1/sidenav.js:36:8: Semi-colon expected
jspm_packages/npm/@angular2-material/sidenav@2.0.0-alpha.8-1/sidenav.js:305:1: Unexpected reserved word export
jspm_packages/npm/@angular2-material/sidenav@2.0.0-alpha.8-1/sidenav.js:305:8: Semi-colon expected
jspm_packages/npm/@angular2-material/sidenav@2.0.0-alpha.8-1/sidenav.js:456:1: Unexpected reserved word export
jspm_packages/npm/@angular2-material/sidenav@2.0.0-alpha.8-1/sidenav.js:456:8: Semi-colon expected

[DorianGrey]

Hm... I'm not sure why this might happen. I've set up an exemplary testing branch that illustrates how to include angular2-material components (specifically in this commit; some of the changes have been added by jspm automagically and are not related to material2). This works even without manual mappings for the UMD builds. However, the branch is based on the angular 2.0 release version (like current master) and uses 2.0.0-alpha.8-2 instead of 2.0.0-alpha.8-1 (was automatically installed). You'll have to update your dependencies anyway, thus, this should be the first step. Afterwards, add the required components as mentioned in the example. If it still does not work then... thing will get more complicated.

[svi3c]

@DorianGrey I think we found the problem. Mapping the material libs to bundles directly collides with the mapping inserted by JSPM. For angular we are just mapping the testing packages to the bundles which works fine, since it is not the npm package itself. For angular material packages we have to add a package configuration with the main pointing to the corresponding bundle (See first point in the breaking changes). This is what angular already provides during the jspm installation (see for example jspm_packages/npm/@angular/core@2.0.0-rc.6.json).

[DorianGrey]

That matches my observations when setting up the testing branch - no manual mapping was required. Even a particular package configuration (as listed in this breaking changes list) was not necessary - I think this is because the UMD bundles are referenced in the "main" entry of the corresponding package.json files, like "main": "./button.umd.js". Suppose to give a shot on 2.0.0-alpha.8-2 instead of 2.0.0-alpha.8-1 without any manual configuration, and see what if that works fine.

[jscherbaum]

I have got it working :)) i needed to add the typings for angular2-material in jspm.config.js:

      '@angular2-material/core': 'index.d.ts',
      '@angular2-material/sidenav': 'index.d.ts',
      '@angular2-material/button': 'index.d.ts',
      '@angular2-material/card': 'index.d.ts',
      '@angular2-material/icon': 'index.d.ts',
      '@angular2-material/input': 'index.d.ts',
      '@angular2-material/list': 'index.d.ts',
      '@angular2-material/progress-circle': 'index.d.ts',
      '@angular2-material/radio': 'index.d.ts',
      '@angular2-material/toolbar': 'index.d.ts',

and i have set the angular to 2.0.1 and angular2-material to 2.0.0-alpha.8-2. Additionally i had to increase the jspm version from 0.17.0-beta.25 to -beta.28.

The mangle Problem also does no more exist. So this Issue can be closed. :)