<p dir="auto">Problem is when one component wraps another one and is trying to provide the nested content to wrapped component, which additionally is trying to take this nested content by selectors.</p>
<p dir="auto"><strong>Case 0</strong><br>
<a href="http://jsfiddle.net/majo44/nvaqhsse/" rel="nofollow">http://jsfiddle.net/majo44/nvaqhsse/</a></p>
<p dir="auto">The goal is to provide component X-B which encapsulate component X-A, with possibility to provide nested content to X-A from usage of X-B.</p>
<p dir="auto">X-A component</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({
    selector: &quot;x-a&quot;,
    template: `
            X-A Start
                &lt;ng-content&gt;&lt;/ng-content&gt;
            X-A End`
})
class XA{}"><pre class="notranslate">@<span class="pl-v">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">selector</span>: <span class="pl-s">"x-a"</span><span class="pl-kos">,</span>
    <span class="pl-c1">template</span>: <span class="pl-s">`</span>
<span class="pl-s">            X-A Start</span>
<span class="pl-s">                &lt;ng-content&gt;&lt;/ng-content&gt;</span>
<span class="pl-s">            X-A End`</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-c1">XA</span><span class="pl-kos">{</span><span class="pl-kos">}</span></pre></div>
<p dir="auto">X-B component</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({
    selector: &quot;x-b&quot;,
    template: `
            X-B Start
            &lt;x-a&gt;
                &lt;ng-content&gt;&lt;/ng-content&gt;
            &lt;/x-a&gt;
            X-B End`,
    directives: [XA]
})
class XB{}"><pre class="notranslate">@<span class="pl-v">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">selector</span>: <span class="pl-s">"x-b"</span><span class="pl-kos">,</span>
    <span class="pl-c1">template</span>: <span class="pl-s">`</span>
<span class="pl-s">            X-B Start</span>
<span class="pl-s">            &lt;x-a&gt;</span>
<span class="pl-s">                &lt;ng-content&gt;&lt;/ng-content&gt;</span>
<span class="pl-s">            &lt;/x-a&gt;</span>
<span class="pl-s">            X-B End`</span><span class="pl-kos">,</span>
    <span class="pl-c1">directives</span>: <span class="pl-kos">[</span><span class="pl-c1">XA</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-c1">XB</span><span class="pl-kos">{</span><span class="pl-kos">}</span></pre></div>
<p dir="auto">Example usage</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({
    selector: 'app',
    template: `
        &lt;x-b&gt;
            &lt;div class=&quot;aClass&quot;&gt;AClass Element&lt;/div&gt;
            &lt;div class=&quot;bClass&quot;&gt;BClass Element&lt;/div&gt;
        &lt;/x-b&gt;
    `,
    directives: [XB]
})
class App{}"><pre class="notranslate">@<span class="pl-v">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">selector</span>: <span class="pl-s">'app'</span><span class="pl-kos">,</span>
    <span class="pl-c1">template</span>: <span class="pl-s">`</span>
<span class="pl-s">        &lt;x-b&gt;</span>
<span class="pl-s">            &lt;div class="aClass"&gt;AClass Element&lt;/div&gt;</span>
<span class="pl-s">            &lt;div class="bClass"&gt;BClass Element&lt;/div&gt;</span>
<span class="pl-s">        &lt;/x-b&gt;</span>
<span class="pl-s">    `</span><span class="pl-kos">,</span>
    <span class="pl-c1">directives</span>: <span class="pl-kos">[</span><span class="pl-c1">XB</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-v">App</span><span class="pl-kos">{</span><span class="pl-kos">}</span></pre></div>
<p dir="auto">As a output I got:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;app&gt;
    &lt;x-b&gt;
        X-B Start
        &lt;x-a&gt;
            X-A Start
            &lt;div class=&quot;aClass&quot;&gt;AClass Element&lt;/div&gt;
            &lt;div class=&quot;bClass&quot;&gt;BClass Element&lt;/div&gt;
            X-A End
        &lt;/x-a&gt;
        X-B End
    &lt;/x-b&gt;
&lt;/app&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">app</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">x-b</span><span class="pl-kos">&gt;</span>
        X-B Start
        <span class="pl-kos">&lt;</span><span class="pl-ent">x-a</span><span class="pl-kos">&gt;</span>
            X-A Start
            <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">aClass</span>"<span class="pl-kos">&gt;</span>AClass Element<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
            <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">bClass</span>"<span class="pl-kos">&gt;</span>BClass Element<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
            X-A End
        <span class="pl-kos">&lt;/</span><span class="pl-ent">x-a</span><span class="pl-kos">&gt;</span>
        X-B End
    <span class="pl-kos">&lt;/</span><span class="pl-ent">x-b</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">app</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">In this case everything works fine as I expected.</p>
<p dir="auto"><strong>Case 1</strong><br>
<a href="http://jsfiddle.net/majo44/nvaqhsse/1/" rel="nofollow">http://jsfiddle.net/majo44/nvaqhsse/1/</a></p>
<p dir="auto">Now lets modify x-a component whit adding selectors to ng-content (eg. for reverse order of children, in real case this can be for placing content in different places of my page layout).</p>
<p dir="auto">X-A component:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({
    selector: &quot;x-a&quot;,
    template: `
            X-A Start
            &lt;ng-content select=&quot;.bClass&quot;&gt;&lt;/ng-content&gt;
            &lt;ng-content select=&quot;.aClass&quot;&gt;&lt;/ng-content&gt;
            X-A End`
})
class XA{}"><pre class="notranslate">@<span class="pl-v">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">selector</span>: <span class="pl-s">"x-a"</span><span class="pl-kos">,</span>
    <span class="pl-c1">template</span>: <span class="pl-s">`</span>
<span class="pl-s">            X-A Start</span>
<span class="pl-s">            &lt;ng-content select=".bClass"&gt;&lt;/ng-content&gt;</span>
<span class="pl-s">            &lt;ng-content select=".aClass"&gt;&lt;/ng-content&gt;</span>
<span class="pl-s">            X-A End`</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-c1">XA</span><span class="pl-kos">{</span><span class="pl-kos">}</span></pre></div>
<p dir="auto">Now output do not contains any of content provided to x-b component<br>
As a output I got:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;app&gt;
    &lt;x-b&gt;
        X-B Start
        &lt;x-a&gt;
            X-A Start
            X-A End
        &lt;/x-a&gt;
        X-B End
    &lt;/x-b&gt;
&lt;/app&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">app</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">x-b</span><span class="pl-kos">&gt;</span>
        X-B Start
        <span class="pl-kos">&lt;</span><span class="pl-ent">x-a</span><span class="pl-kos">&gt;</span>
            X-A Start
            X-A End
        <span class="pl-kos">&lt;/</span><span class="pl-ent">x-a</span><span class="pl-kos">&gt;</span>
        X-B End
    <span class="pl-kos">&lt;/</span><span class="pl-ent">x-b</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">app</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto"><strong>Case 2</strong><br>
<a href="http://jsfiddle.net/majo44/nvaqhsse/2/" rel="nofollow">http://jsfiddle.net/majo44/nvaqhsse/2/</a></p>
<p dir="auto">As a workaround I can re-package my content in x-b component (this is not good because I have to always know exact the x-a ng-content selectors in x-b component, this is not superb flexible)</p>
<p dir="auto">X-B component</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({
    selector: &quot;x-b&quot;,
    template: `
        X-B Start
        &lt;x-a&gt;
            &lt;div class=&quot;aClass&quot;&gt;
                &lt;ng-content select=&quot;.aClass&quot;&gt;&lt;/ng-content&gt;
            &lt;/div&gt;
            &lt;div class=&quot;bClass&quot;&gt;
                &lt;ng-content select=&quot;.bClass&quot;&gt;&lt;/ng-content&gt;
            &lt;/div&gt;
        &lt;/x-a&gt;
        X-B End`,
    directives: [XA]
})
class XB{}"><pre class="notranslate">@<span class="pl-v">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">selector</span>: <span class="pl-s">"x-b"</span><span class="pl-kos">,</span>
    <span class="pl-c1">template</span>: <span class="pl-s">`</span>
<span class="pl-s">        X-B Start</span>
<span class="pl-s">        &lt;x-a&gt;</span>
<span class="pl-s">            &lt;div class="aClass"&gt;</span>
<span class="pl-s">                &lt;ng-content select=".aClass"&gt;&lt;/ng-content&gt;</span>
<span class="pl-s">            &lt;/div&gt;</span>
<span class="pl-s">            &lt;div class="bClass"&gt;</span>
<span class="pl-s">                &lt;ng-content select=".bClass"&gt;&lt;/ng-content&gt;</span>
<span class="pl-s">            &lt;/div&gt;</span>
<span class="pl-s">        &lt;/x-a&gt;</span>
<span class="pl-s">        X-B End`</span><span class="pl-kos">,</span>
    <span class="pl-c1">directives</span>: <span class="pl-kos">[</span><span class="pl-c1">XA</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-c1">XB</span><span class="pl-kos">{</span><span class="pl-kos">}</span></pre></div>
<p dir="auto">Output looks better, but there still is a problem, because  ng-content is taking whole selected element I have now duplicated &lt;div class="...Class"&gt;:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;app&gt;
    &lt;x-b&gt;
        X-B Start
        &lt;x-a&gt;
            X-A Start
            &lt;div class=&quot;bClass&quot;&gt;
                &lt;div class=&quot;bClass&quot;&gt;BClass Element&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;aClass&quot;&gt;
                &lt;div class=&quot;aClass&quot;&gt;AClass Element&lt;/div&gt;
            &lt;/div&gt;
            X-A End
        &lt;/x-a&gt;
        X-B End
    &lt;/x-b&gt;
&lt;/app&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">app</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">x-b</span><span class="pl-kos">&gt;</span>
        X-B Start
        <span class="pl-kos">&lt;</span><span class="pl-ent">x-a</span><span class="pl-kos">&gt;</span>
            X-A Start
            <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">bClass</span>"<span class="pl-kos">&gt;</span>
                <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">bClass</span>"<span class="pl-kos">&gt;</span>BClass Element<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
            <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
            <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">aClass</span>"<span class="pl-kos">&gt;</span>
                <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">aClass</span>"<span class="pl-kos">&gt;</span>AClass Element<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
            <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
            X-A End
        <span class="pl-kos">&lt;/</span><span class="pl-ent">x-a</span><span class="pl-kos">&gt;</span>
        X-B End
    <span class="pl-kos">&lt;/</span><span class="pl-ent">x-b</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">app</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">As I think, the best flexible solution for this will be support of <em>Case 1</em> directly. As an alternative solution for <em>Case 2</em> ng-content can provide additional attribute for "unwrap" the content from "selected" element.</p>
<p dir="auto">Angular Version: 2.0.0-beta.0<br>
Browser: Chrome</p>
<p dir="auto">I am using the latest Angular and Angular CLI.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@angular/cli: 1.1.0-rc.0
node: 6.10.0
os: darwin x64
@angular/common: 4.2.0-beta.1
@angular/compiler: 4.2.0-beta.1
@angular/core: 4.2.0-beta.1
@angular/flex-layout: 2.0.0-beta.8
@angular/forms: 4.2.0-beta.1
@angular/http: 4.2.0-beta.1
@angular/platform-browser: 4.2.0-beta.1
@angular/platform-browser-dynamic: 4.2.0-beta.1
@angular/router: 4.2.0-beta.1
@angular/cli: 1.1.0-rc.0
@angular/compiler-cli: 4.2.0-beta.1
@angular/language-service: 4.2.0-beta.1"><pre class="notranslate"><code class="notranslate">@angular/cli: 1.1.0-rc.0
node: 6.10.0
os: darwin x64
@angular/common: 4.2.0-beta.1
@angular/compiler: 4.2.0-beta.1
@angular/core: 4.2.0-beta.1
@angular/flex-layout: 2.0.0-beta.8
@angular/forms: 4.2.0-beta.1
@angular/http: 4.2.0-beta.1
@angular/platform-browser: 4.2.0-beta.1
@angular/platform-browser-dynamic: 4.2.0-beta.1
@angular/router: 4.2.0-beta.1
@angular/cli: 1.1.0-rc.0
@angular/compiler-cli: 4.2.0-beta.1
@angular/language-service: 4.2.0-beta.1
</code></pre></div>
<p dir="auto">I am using <a href="https://github.com/auth0/angular2-jwt/blob/master/angular2-jwt.ts#L123">Angular2-jwt</a> for HTTP requests.</p>
<p dir="auto">I am running on <code class="notranslate">typescript 2.3</code> with <code class="notranslate">strict</code> equal <code class="notranslate">true</code>. If <code class="notranslate">strict</code> is <code class="notranslate">false</code>, <code class="notranslate">ng build --prod --aot</code> is fine. With <code class="notranslate">strict=true</code>, I run into this issue below.</p>
<p dir="auto">Running <code class="notranslate">ng server</code> with <code class="notranslate">strict=true</code> or <code class="notranslate">strict=false</code>, everything is fine.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" ➜ ng build --prod --aot                                                                                                                                               
Hash: 014d8bfd8f003b5ebb85
Time: 26601ms
chunk    {0} 0.e99d366f13a386a17436.chunk.js 227 kB {1} {2} {4} [rendered]
...

ERROR in /node_modules/@angular/http/src/base_request_options.d.ts (63,18): Type 'RequestOptionsArgs | undefined' has no property 'method' and no string index signature.

ERROR in /node_modules/@angular/http/src/base_request_options.d.ts (63,26): Type 'RequestOptionsArgs | undefined' has no property 'headers' and no string index signature.

ERROR in /node_modules/@angular/http/src/base_request_options.d.ts (63,35): Type 'RequestOptionsArgs | undefined' has no property 'body' and no string index signature.

ERROR in /node_modules/@angular/http/src/base_request_options.d.ts (63,41): Type 'RequestOptionsArgs | undefined' has no property 'url' and no string index signature.

ERROR in /node_modules/@angular/http/src/base_request_options.d.ts (63,46): Type 'RequestOptionsArgs | undefined' has no property 'search' and no string index signature.

ERROR in /node_modules/@angular/http/src/base_request_options.d.ts (63,54): Type 'RequestOptionsArgs | undefined' has no property 'params' and no string index signature.

ERROR in /node_modules/@angular/http/src/base_request_options.d.ts (63,62): Type 'RequestOptionsArgs | undefined' has no property 'withCredentials' and no string index signature.

ERROR in /node_modules/@angular/http/src/base_request_options.d.ts (63,79): Type 'RequestOptionsArgs | undefined' has no property 'responseType' and no string index signature."><pre class="notranslate"><code class="notranslate"> ➜ ng build --prod --aot                                                                                                                                               
Hash: 014d8bfd8f003b5ebb85
Time: 26601ms
chunk    {0} 0.e99d366f13a386a17436.chunk.js 227 kB {1} {2} {4} [rendered]
...

ERROR in /node_modules/@angular/http/src/base_request_options.d.ts (63,18): Type 'RequestOptionsArgs | undefined' has no property 'method' and no string index signature.

ERROR in /node_modules/@angular/http/src/base_request_options.d.ts (63,26): Type 'RequestOptionsArgs | undefined' has no property 'headers' and no string index signature.

ERROR in /node_modules/@angular/http/src/base_request_options.d.ts (63,35): Type 'RequestOptionsArgs | undefined' has no property 'body' and no string index signature.

ERROR in /node_modules/@angular/http/src/base_request_options.d.ts (63,41): Type 'RequestOptionsArgs | undefined' has no property 'url' and no string index signature.

ERROR in /node_modules/@angular/http/src/base_request_options.d.ts (63,46): Type 'RequestOptionsArgs | undefined' has no property 'search' and no string index signature.

ERROR in /node_modules/@angular/http/src/base_request_options.d.ts (63,54): Type 'RequestOptionsArgs | undefined' has no property 'params' and no string index signature.

ERROR in /node_modules/@angular/http/src/base_request_options.d.ts (63,62): Type 'RequestOptionsArgs | undefined' has no property 'withCredentials' and no string index signature.

ERROR in /node_modules/@angular/http/src/base_request_options.d.ts (63,79): Type 'RequestOptionsArgs | undefined' has no property 'responseType' and no string index signature.
</code></pre></div>
<p dir="auto">Can someone confirm that it is an Angular/Http bug or a library bug?</p>