title: Integrating OneSignal with Angular
body: <p>I'm trying to integrate OneSignal into my Angular 2 app to receive push notifications. First I did a HelloWorld app using plain old HTML and it works beautifully. So I tried to include it into my Angular app, but users are not getting created/registered, and hence are not subscribed to receive any notifications.</p>
  
  <p>Code excerpts: </p>
  
  <p>index.html</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;My Angular App&lt;/title&gt;
    &lt;base href="/"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
    &lt;head&gt;
      &lt;link rel="manifest" href="/manifest.json"&gt;
    &lt;script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async&gt;&lt;/script&gt;
    &lt;script&gt;
      var OneSignal = window.OneSignal || [];
      console.log("Init OneSignal");
      OneSignal.push(["init", {
        appId: "xxx-xxx-xxx-xxx-xxx",
        autoRegister: false,
        allowLocalhostAsSecureOrigin: true,
        notifyButton: {
          enable: true
        }
      }]);
      console.log('OneSignal Initialized');
      OneSignal.push(function () {
        console.log('Registered For Push');
        OneSignal.getUserId().then(function (userId) {
        console.log("User ID is", userId);
        });
      });
    &lt;/script&gt;
    &lt;/head&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;app-root&gt;
      &lt;div class="wrap"&gt;
        &lt;div class="loading outer"&gt;
          &lt;div class="loading inner"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/app-root&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>The userId is always null.</p>
  
  <p>I've checked the following:</p>
  
  <ul>
  <li>App ID is correct</li>
  <li>Permission for Notification is set to allow in the browser</li>
  </ul>
  
  <p>Questions:</p>
  
  <ul>
  <li>Is there a way to do all the init stuffs inside any component, say in the ngOnInit() method?</li>
  <li>I would like to register for push when user clicks on a button inside my component rather than using the bell icon? How does one achieve that? ( I know that setting notifyButton to false will not show the notify bell)</li>
  </ul>
  
  <p>P.S: Testing on Chrome using Angular CLI (Didn't work with FF or Safari)</p>