<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
In our project we use system js in order to create our application bundles. Because we split our project into several applications, we build one bundle for all common services and components (lib.bundle.js) and one bundle per app (app.bundle.js) which does not include what is already available in lib.bundle.js. We are using <a href="https://github.com/systemjs/builder">https://github.com/systemjs/builder</a> (Version 0.15.35) to build the bundles.</p>
<p dir="auto">Further we are using baseUrl and paths in tsconfig in order to be able to import our core files with an absolute import path. Example:<br>
tsconfig:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    &quot;baseUrl&quot;: &quot;./&quot;,
    &quot;paths&quot;: {
      &quot;@our-lib/*&quot;: [
        &quot;src/our-lib/*&quot;
      ]"><pre class="notranslate"><code class="notranslate">    "baseUrl": "./",
    "paths": {
      "@our-lib/*": [
        "src/our-lib/*"
      ]
</code></pre></div>
<p dir="auto">When transpiling without AoT, the import statements remain absolute and we are able to configure SystemJS (0.19.42) in order to load the file from the lib.bundle.js</p>
<p dir="auto">Now we want to use AoT. ngc runs successfully and we can bundle the files by using index-aot.ts (bootstraps the module factory) instead of index.ts.</p>
<p dir="auto">We can't find a way to configure SystemJS in order to locate the modules in our lib.bundle.js. We see that ngc replaces the absolute import by a relative import although it uses the same baseUrl/paths configuration.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
ngc should produce absolute imports if there is a path mapping in tsconfig or we need a way to map relative imports to absolute imports in system js config.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Use AoT in a complex project which uses system js / system js builder and later on lazy loading.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 4.0.0-rc.3</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> Chrome</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> TypeScript 2.1.6</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =   v6.10.0</p>
</li>
</ul>
<ul class="contains-task-list">
<li><strong>I'm submitting a strange behavior for ViewContainerRef.createComponent.</strong></li>
<li>[x ] bug report</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> feature request</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> support request =&gt; Please do not submit support request here, see note at the top of this template.</li>
</ul>
<p dir="auto"><strong>Current behavior</strong><br>
When want to create component in current component container like this component is rendered outside container of current component:  this.componentResolver.resolveComponent(SampleComponent).then((factory) =&gt; {<br>
console.log(this.viewContainerRef);<br>
this.viewContainerRef.createComponent(factory);<br>
});</p>
<p dir="auto">Result:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/5635687/15512320/8cd38798-21df-11e6-9a20-01c076724a7e.png"><img src="https://cloud.githubusercontent.com/assets/5635687/15512320/8cd38798-21df-11e6-9a20-01c076724a7e.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
Expect to load new component inside container of current component example in body-bar component</p>
<ul dir="auto">
<li><strong>Please tell us about your environment:</strong><br>
Project generated with angular cli</li>
<li><strong>Angular version:</strong> 2.0.0-rc1</li>
<li><strong>Browser:</strong> [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]</li>
<li><strong>Language:</strong> [TypeScript]</li>
</ul>