title: Bootstrap multiple or single modules based on URL in main.ts
body: <p>I am working with a (.NET Framework MVC) web project that cannot be fully transferred to a full angular project, so I cannot use angular's routing to lazy load, but I also don't want to load everything where the angular components are used. It is an enterprise solution where it is not easy (and cheap) to say: "Hey, lets fully utilize angular and forget about the old project!".</p>
  
  <p>So I have solved this, in my opinion, in a clean way to load different modules based on URL, to avoid loading everything all together:</p>
  
  <p><strong>main.ts</strong></p>
  
  <pre><code>console.log("bootstrapping start");
  if (window.location.pathname.toLowerCase().includes("contactplans/details")) {
      console.log("bootstrapping contactplan details");
      platformBrowserDynamic().bootstrapModule(ContactplanDetailsModule)
          .catch(err =&gt; console.log(err));
  } else if (window.location.pathname.toLowerCase().includes("contactplans/index") || window.location.pathname.toLowerCase().endsWith("contactplans") || window.location.pathname.toLowerCase().includes("settings/contactplans")) {
      console.log("bootstrapping contactplan index");
      platformBrowserDynamic().bootstrapModule(ContactplanListModule) //contact plan index and settings page
          .catch(err =&gt; console.log(err));
  } 
  console.log("bootstrap decision done, bootstrapping menu");
  platformBrowserDynamic().bootstrapModule(MenuModule)
      .catch(err =&gt; console.log(err));
  </code></pre>
  
  <p>So based on the URL, it loads modules and on every page it loads the menu module.</p>
  
  <p>For the time being, I kind-of have to do it this way, this is just a small example the the usage of angular will grow significantly on more and more individual pages until we can more easily 'switch' to a full angular project (within .NET Core which works awesome together).</p>
  
  <p>So, this works fine on <strong>development</strong>. Using <code>ng build --watch</code> does the desired things.
  Now going production, running <code>ng build --prod</code> it creates issues. To me it looks more like a <strong>bug</strong> then something else.</p>
  
  <p>In the below screenshot I demonstrate what is being produced after <code>ng build --prod</code> when I make modifications to above code.</p>
  
  <p><a href="https://i.stack.imgur.com/4dhl0.png" rel="nofollow noreferrer">Click here to show bigger</a>
  <a href="https://i.stack.imgur.com/4dhl0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4dhl0.png" alt="enter image description here"></a></p>
  
  <p>So as you can see, when only using one line of bootstrap, it works fine, no errors.</p>
  
  <p>But when I have multiple like I want to have, it changes the actual Module to <code>function() {}</code> which then gives the console error:</p>
  
  <p><code>Uncaught Error: No NgModule metadata found for 'function(){}'.</code></p>
  
  <p>Is this really a bug or am I doing something wrong?</p>