title: Electron - Not allowed to load local resource
body: <p>Evening,<br>
  I'm looking into using <a href="http://electron.atom.io/" rel="noreferrer">electron</a> to package an existing angular2 build. I thought I had a dry run working but the actual packaging seems to be failing (see final step below) and I want to understand why. Here's what I'm doing...</p>
  
  <p><strong>Create Project</strong><br>
  Use <a href="https://cli.angular.io/" rel="noreferrer">angular-cli</a> to start a new project <code>ng new electron-ng2-cli --style=scss</code></p>
  
  <p>Install electron and <a href="https://github.com/electron-userland/electron-builder" rel="noreferrer">electron-builder</a></p>
  
  <p><strong>Edit package.json</strong><br>Make the following additions...<br>
   <code>"main": "main.js"</code></p>
  
  <pre><code>"build":
  {
    "appId": "com.electrontest.testapp",
    "mac": {
      "category": "your.app.category.type"
    }
  }
  </code></pre>
  
  <p>and add the following to the <code>scripts</code>...</p>
  
  <pre><code>"pack": "build --dir",
  "dist": "build",
  "electron": "electron main.js",
  "postinstall": "install-app-deps"
  </code></pre>
  
  <p><strong>Create main.js</strong><br>I just copied the code from the <a href="https://github.com/electron/electron-quick-start/blob/master/main.js" rel="noreferrer">electron quick start</a>. The only change I make is to the location of <code>index.html</code> which I set to <code>/dist/index.html</code></p>
  
  <p><strong>Amend base</strong><br>In <code>index.html</code> change <code>&lt;base="/"&gt;</code> to <code>&lt;base="./"&gt;</code> </p>
  
  <p><strong>Pack code</strong><br>Run <code>ng build</code>. This puts all the packaged code in <code>/dist</code></p>
  
  <p><strong>Test Run</strong><br>Run <code>npm run electron</code>. This works fine. An Electron app fires up and I see the angular stuff running within it.</p>
  
  <p><strong>Create App For Distribution</strong><br>Run <code>npm run pack</code> to create a packaged app. The packaging seems to go ok - I get a warning about a missing icon and a warning that my code is unsigned but I'm guessing they shouldn't be fatal?<br>
  The problem is that when I now run the app by double clicking in <code>Finder</code> I get an error in the console saying: <code>Not allowed to load local resource: file:///Users/&lt;username&gt;/Documents/development/electron-ng2-cli/dist/mac/electron-ng2-cli.app/Contents/Resources/app.asar/dist/index.html</code>
  <hr>
  So, can anyone explain what is different between the packaged app that fails and the one that runs ok when I use <code>npm run electron</code>?</p>
  
  <p>What can I do to fix this issue and get the app running correctly?</p>
  
  <p>Thank you for making it to the end. This got longer than I wanted but I hope I explained myself ok. If you can help or give any pointers that would be great - many good vibes will be thought in your general direction :)</p>
  
  <p>Cheers all</p>