title: Angular2 with RequireJS
body: <p>I am having issues getting Angular2 to load correctly when incorporating RequireJS into the application. </p>
  
  <p>For simplicity wise I am using the very simple Hello World Javascript tutorial on the Angular2 located here : <a href="https://angular.io/docs/js/latest/quickstart.html" rel="noreferrer">https://angular.io/docs/js/latest/quickstart.html</a></p>
  
  <p>I have this system working fine using Angular1 but I can't seem to replicate this success using Angular2.</p>
  
  <p>Here is my index.html file:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Angular 2 QuickStart JS&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;!-- 1. Load RequireJS --&gt;
      &lt;script type="text/javascript", src="bower_components/requirejs/require.js", data-main="/require.config.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;!-- 3. Display the application --&gt;
  &lt;body&gt;
      &lt;ireland-product-app&gt;Loading...&lt;/ireland-product-app&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>My require.config.js file:</p>
  
  <pre><code>require([
      'assets/requiredPathsAndShim.js'
  ], function(requirePathsAndShim) {
  require.config({
  
      baseUrl: '/',
  
      paths: requirePathsAndShim.paths,
  
      shim: requirePathsAndShim.shim,
  
      /// Kick start app...
      deps: ['app/main']
  });
  </code></pre>
  
  <p>});</p>
  
  <p>I use the requiredPathsAndShim.js file to load all the dependencies I see that are required to start an Angular2 application. Here is the file:</p>
  
  <pre><code>"use strict";
  
  (function(define) {
      define([], function() {
          return {
              waitSeconds : 10000,
              paths: {
  
                  'shim'              : 'node_modules/core-js/client/shim.min',
                  'zone'              : 'node_modules/zone.js/dist/zone',
                  'Reflect'           : 'node_modules/reflect-metadata/Reflect',
                  'Rx'                : 'node_modules/rxjs/bundles/Rx.umd',
                  'core'              : 'node_modules/@angular/core/core.umd',
                  'common'            : 'node_modules/@angular/common/common.umd',
                  'compiler'          : 'node_modules/@angular/compiler/compiler.umd',
                  'platform-browser'  : 'node_modules/@angular/platform-browser/platform-browser.umd',
                  'platform-dynamic'  : 'node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd'
              },
              shim : {
  
              }
          }
      });
  })(define);
  </code></pre>
  
  <p>I then load the 'app/main' file from my 'required.config' file which will load the bootstrap functionality of Angular2:</p>
  
  <pre><code>"use strict";
  
  (function() {
      define([
          'app/app.component'
      ], function(app) {
          document.addEventListener('DOMContentLoaded', function() {
              ng.platformBrowserDynamic.bootstrap(app.AppComponent);
          });
      });
  })();
  </code></pre>
  
  <p>The app/app.component file is a file which simply returns my Angular2 component which is passed into the main.js bootstrap function to start the app. this is the file:</p>
  
  <pre><code>"use strict";
  
  (function() {
      define([
  
      ], function() {
          return {
              AppComponent : ng.core.Component({
                      selector : 'ireland-product-app',
                      template : '&lt;h1&gt;Product App&lt;/h1&gt;'
                  })
                  .Class({
                      constructor : function() {}
                  })
          }
      });
  })();
  </code></pre>
  
  <p>I have been playing around with this for a few hours and can't seem to get this working. Can anyone point me in the right direction as to why this isn't working? I have a feeling some shims need to be added into the require.config but I have had no success setting script load dependencies as of yet. </p>
  
  <p>Thanks</p>