Support SystemJS with umd bundles

[AnthonyTony12]

Hi, I'm unable to load codebakery/origami module in my visual studio asp.net mvc application. Below is my code snippet. Can anyone help me understand what exactly is the issue here.
Thanks in advance!

-----error----

-------package.json--------

{
  "name": "patient-inquiry",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "angular/common": "^4.0.0",
    "angular/compiler": "^4.0.0",
    "angular/core": "^4.0.0",
    "angular/forms": "^4.0.0",
    "angular/http": "^4.0.0",
    "angular/platform-browser": "^4.0.0",
    "angular/platform-browser-dynamic": "^4.0.0",
    "angular/router": "^4.0.0",
    "codebakery/origami": "^1.1.2",
    "ag-grid": "^9.1.0",
    "ag-grid-angular": "^9.1.0",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "angular/cli": "1.0.1",
    "angular/compiler-cli": "^4.0.0",
    "types/jasmine": "2.5.38",
    "types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }
}

------app.module.ts---------

import { BrowserModule } from 'angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from 'angular/core';
import { AgGridModule } from "ag-grid-angular/main";
import { FormsModule } from 'angular/forms';
import { HttpModule } from 'angular/http';
import { AppComponent } from './app.component';
import { PatientSearchComponent } from './patient-search/patient-search.component';
import { PatientResultsComponent } from './patient-results/patient-results.component';
import { routing } from './app.routes';
import { PolymerModule } from 'codebakery/origami';
import { IronElementsModule, PaperElementsModule } from 'codebakery/origami/lib/collections';

@NgModule({
  declarations: [
    AppComponent,
    PatientSearchComponent,
    PatientResultsComponent
  ],
  imports: [
    BrowserModule,
    AgGridModule.withComponents(
      []),
    PolymerModule,
    FormsModule,
    HttpModule,
    routing,
    IronElementsModule,
    PaperElementsModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

------main.ts------------

import { enableProdMode } from 'angular/core';
import { platformBrowserDynamic } from 'angular/platform-browser-dynamic';
import { webcomponentsReady } from 'codebakery/origami';

import { AppModule } from './app/app.module';


 //platformBrowserDynamic().bootstrapModule(AppModule);

webcomponentsReady().then(() => {
  platformBrowserDynamic().bootstrapModule(AppModule, {
    enableLegacyTemplate: false
  });
}).catch(error => {
  // No WebComponent support and webcomponentsjs is not loaded
  console.error(error);
});

-----systemjs.config.js--------

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the src folder
            app: 'src',
            // angular bundles
            'angular/core': 'npm: angular/core/bundles/core.umd.js',
            'angular/common': 'npm: angular/common/bundles/common.umd.js',
            'angular/compiler': 'npm: angular/compiler/bundles/compiler.umd.js',
            'angular/platform-browser': 'npm: angular/platform-browser/bundles/platform-browser.umd.js',
            'angular/platform-browser-dynamic': 'npm: angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            'angular/http': 'npm: angular/http/bundles/http.umd.js',
            'angular/router': 'npm: angular/router/bundles/router.umd.js',
            'angular/forms': 'npm: angular/forms/bundles/forms.umd.js',

            '@angular/animations': 'node_modules/@angular/animations/bundles/animations.umd.min.js',
            '@angular/animations/browser': 'node_modules/@angular/animations/bundles/animations-browser.umd.js',
            '@angular/platform-browser/animations': 'node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js',

            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'hammerjs': 'npm:hammerjs',
            // ag libraries
            'ag-grid-angular': 'npm:ag-grid-angular',
            'ag-grid': 'npm:ag-grid',

            //codebakery/origami libraries
            '@codebakery/origami': 'npm:@codebakery/origami',
            '@codebakery/origami/lib/collections': 'npm:@codebakery/origami/lib/collections',

        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            hammerjs: {
                main: './hammer.js',
                defaultExtension: 'js'
            },
            'ag-grid-angular': {
                defaultExtension: "js"
            },
            'ag-grid': {
                defaultExtension: "js"
            },
        }
    });
})(this);

-----bower.json-------

{
  "name": "patient-inquiry",
  "description": "",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "src/assets/bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "polymer": "Polymer/polymer#2.0.0-rc.7",
    "paper-button": "PolymerElements/paper-button#2.0-preview",
    "paper-input": "PolymerElements/paper-input#2.0-preview",
    "paper-card": "PolymerElements/paper-card#^2.0.0",
    "paper-styles": "PolymerElements/paper-styles#^2.0.0",
    "paper-material": "PolymerElements/paper-material#^2.0.0"
  },
  "resolutions": {
    "iron-flex-layout": "1 - 2",
    "paper-styles": "1 - 2"
  }
}

------tconfig.js-------

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "lib": [ "es2015", "dom" ]
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

------layout.cshtml---------------

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    <base href="~/src">

    <script src="~/node_modules/core-js/client/shim.min.js"></script>
    <script src="~/node_modules/zone.js/dist/zone.js"></script>
    <script src="~/node_modules/reflect-metadata/Reflect.js"></script>
    <script src="~/node_modules/systemjs/dist/system.src.js"></script>
    @*<script src="~/node_modules/ag-grid-angular/main.js"></script>*@

    <script src="~/src/assets/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
    <link href="~/src/assets/bower_components/app-layout/app-layout.html" rel="import">
    <link rel="import" href="~/src/assets/bower_components/paper-input/paper-input.html">
    <link href="~/src/assets/bower_components/paper-tabs/paper-tabs.html" rel="import">
    <link href="~/src/assets/bower_components/iron-icons/iron-icons.html" rel="import">
    <link href="~/src/assets/bower_components/paper-button/paper-button.html" rel="import">
    <link href="~/src/assets/bower_components/paper-card/paper-card.html" rel="import">
    <link href="~/src/assets/bower_components/paper-menu-button/paper-menu-button.html" rel="import">
    <link href="~/src/assets/bower_components/paper-checkbox/paper-checkbox.html" rel="import">
    <link href="~/src/assets/bower_components/paper-listbox/paper-listbox.html" rel="import">
    <link href="~/src/assets/bower_components/paper-item/paper-item.html" rel="import">
    <link href="~/src/assets/bower_components/app-menu/app-menu.html" rel="import">
    <link href="~/src/assets/bower_components/iron-icon/iron-icon.html" rel="import">
    <link href="~/src/assets/bower_components/iron-flex-layout/iron-flex-layout.html" rel="import">
    <link href="~/src/assets/bower_components/iron-flex-layout/iron-flex-layout-classes.html" rel="import">
    <link rel="import" href="~/src/assets/bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
    <link rel="import" href="~/src/assets/bower_components/app-layout/app-drawer/app-drawer.html">
    <link rel="import" href="~/src/assets/bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
    <link rel="import" href="~/src/assets/bower_components/app-layout/app-header/app-header.html">
    <link rel="import" href="~/src/assets/bower_components/app-layout/app-header-layout/app-header-layout.html">
    <link rel="import" href="~/src/assets/bower_components/app-layout/app-toolbar/app-toolbar.html">
    <link rel="import" href="~/src/assets/bower_components/paper-styles/element-styles/paper-material.html">
    <link rel="import" href="~/src/assets/bower_components/app-datepicker/app-datepicker.html">
    <link rel="import" href="~/src/assets/bower_components/app-datepicker/app-datepicker-dialog.html">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
    <link rel="import" href="~/src/assets/bower_components/web-animations-js/web-animations-next-lite.min.js">
    <link rel="import" href="~/src/assets/bower_components/polymer/polymer.html">
   
     <!-- ag-Grid references -->
    <link href="~/node_modules/ag-grid/dist/styles/ag-grid.css" rel="stylesheet" />
    <link href="~/node_modules/ag-grid/dist/styles/theme-fresh.css" rel="stylesheet" />

    <!-- Example uses font awesome icons -->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Configure SystemJS -->
    <script src="~/systemjs.config.js"></script>
    
    <script>
        System.import('src').catch(function (err) { console.error(err); });
    </script>

</head>
<body>
    <div class="container body-content">
        @RenderBody()
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

[hotforfeature]

Do you have a .bowerrc file in the directory with bower.json that puts your bower_components/ folder in src/assets/?

.bowerrc

{
  "directory": "src/assets/bower_components"
}

If not, that would explain the 404 for paper-material.html.

I'm not entirely familiar with SystemJS or ASP.NET, but I think you're getting the 403 because SystemJS is trying to load a directory instead of a JS file. I'm not building umd bundles at the moment, but that's something I need to add support for.

You could try changing the SystemJS config to this:

{
   '@codebakery/origami': 'npm:@codebakery/origami/lib/origami.js',
   '@codebakery/origami/lib/collections': 'npm:@codebakery/origami/lib/collections/index.js ',
}

But again, I'm not sure if that would even work until I add umd bundle support for SystemJS.

Let me know if (by some chance) the above changes work. If not, I'll keep this ticket open to add SystemJS support.

[AnthonyTony12]

Hi @hotforfeature i do am using a .bowerrc file, with the same directory. The error of 404 for paper-material.html is still present.

After making the suggested change in SystemJs.config.js, The following error i displayed:

[hotforfeature]

Yup, this is what I expect. You will eventually need to configure it to:

{
   '@codebakery/origami': 'npm:@codebakery/origami/bundles/origami.es5.js',
   '@codebakery/origami/collections': 'npm:@codebakery/origami/bundles/origami-collections.es5.js ',
}

Sadly until I package it up in this format, it won't work with SystemJS, only Webpack :(

You can take a look at what I'm doing on the umd-bundle branch of this repo. I was hoping to quickly repackage it for the next release, but I'm having trouble getting a good build set up with the split package (origami main and the collections). There aren't really any good build tools out there yet for Angular libraries.

It's still on my radar though, I may have better luck over the weekend figuring it out.