title: Non-SPA with angular2
body: <p>I started using angular2 (with an express.js backend) with the intention of passing control of several sections of a page to angular2 components, but I eventually realized that the system is much  more effective when angular2 controls an entire area of a page. However, my application is not a SPA and there are other server-rendered routes aside from the route that holds the selector of my angular2 root component. </p>
  
  <p>I have 2 questions, followed by code snippets:</p>
  
  <ol>
  <li><p>Whenever I load a server-controlled route whose server-side rendered template does not contain the selector of my root component, <code>&lt;main-comp&gt;&lt;/main-comp&gt;</code>, angular2 basically pukes into the console saying it doesn't have anywhere to initialize. I put all of my angular2 initialization code in a shared header for my whole application. Is there a way to tell the angular2 root component not to render itself if its selector simply does not exist on the page?</p></li>
  <li><p>The server side route that renders the angular2 root component is <code>/writing</code> and the angular2 routing URL for a particular blog post would be something like <code>/writing/2016/03/post</code>. However, whenever I browse straight to the URL, System.js tries to load app/boot relative to that location, i.e., <code>/writing/2016/03/app/boot</code>, which obviously fails with a 404. I think this is happening because my server controls the <code>/writing</code> route and angular loads relative to the base URL being requested to the server. Thus, the only solution I know of would be to turn my application into an SPA with a single server route being <code>'/'</code>, which would require lots of rewriting to the front end. How can I get around this issue?</p></li>
  </ol>
  
  <p>This is my root component:</p>
  
  <pre><code>@Component({
      selector: 'main-comp',
      template: '&lt;router-outlet&gt;&lt;/router-outlet&gt;',
      providers: [TagService, PostService, BlogStateService],
      directives: [ROUTER_DIRECTIVES, BlogComponent]
  })
  @RouteConfig([
      {path: '/writing/...', name: 'Blog', component: BlogComponent }  
  ])
  export class AppComponent {
      constructor(private _blogState : BlogStateService, 
          private _postService : PostService) {
      }
  }
  </code></pre>
  
  <p>And here is the <code>&lt;head&gt;</code> element:</p>
  
  <pre><code>&lt;head&gt;
      &lt;script src="/js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="/js/modernizr-2.6.2-respond-1.1.0.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Angular Dependencies --&gt;
      &lt;script src="/app/node_modules/angular2/bundles/angular2-polyfills.js"&gt;&lt;/script&gt;
      &lt;script src="/app/node_modules/es6-shim/es6-shim.js"&gt;&lt;/script&gt;
  
      &lt;script src="/app/node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
      &lt;script src="/app/node_modules/moment/moment.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          System.config({
              packages: {
                  app: {
                      format: 'register',
                      defaultExtension: 'js'
                  },
                  moment: {
                      main: 'moment.js',
                      type: 'cjs',
                      defaultExtension: 'js'
                  }
              },
              map: {
                  moment: '/app/node_modules/moment/'
              }
          });
      &lt;/script&gt;
  
      &lt;script src="/app/node_modules/rxjs/bundles/Rx.js"&gt;&lt;/script&gt;
      &lt;script src="/app/node_modules/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;
      &lt;script src="/app/node_modules/angular2/bundles/http.dev.js"&gt;&lt;/script&gt;
      &lt;script src="/app/node_modules/angular2/bundles/router.dev.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          System.import('app/js/boot').then(null, console.error.bind(console)); 
      &lt;/script&gt;
      &lt;base href="/"&gt;
  
  &lt;/head&gt;
  </code></pre>