<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="[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] 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">[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] 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></p>

<p dir="auto">now schemas are not extendable, only hard-coded <code class="notranslate">CUSTOM_ELEMENT_SCHEMA</code> and <code class="notranslate">NO_ERRORS_SCHEMA</code> available. if a user want to add new schema, they have to modify <code class="notranslate">DomElementSchemaRegistry.hasElement</code>,<code class="notranslate">DomElementSchemaRegistry.prototype.hasProperty</code> or other compiler methods to do it. like this<br>
<a href="https://github.com/moecube/electron-schema/blob/master/index.ts">https://github.com/moecube/electron-schema/blob/master/index.ts</a></p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto"></p><div class="Box Box--condensed my-2">
  <div class="Box-header f6">
    <p class="mb-0 text-bold">
      <a href="https://github.com/angular/angular/blob/5b141fbf2789e6629083afd1d4678a2ba1ae6ab3/packages/compiler/src/schema/dom_element_schema_registry.ts#L287">angular/packages/compiler/src/schema/dom_element_schema_registry.ts</a>
    </p>
    <p class="mb-0 color-fg-muted">
         Line 287
      in
      <a data-pjax="true" class="commit-tease-sha" href="/angular/angular/commit/5b141fbf2789e6629083afd1d4678a2ba1ae6ab3">5b141fb</a>
    </p>
  </div>
  <div itemprop="text" class="Box-body p-0 blob-wrapper blob-wrapper-embedded data">
    <table class="highlight tab-size mb-0 js-file-line-container" data-tab-size="8" data-paste-markdown-skip="">

        <tbody><tr class="border-0">
          <td id="L287" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="287"></td>
          <td id="LC287" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">schemaMetas</span><span class="pl-kos">.</span><span class="pl-en">some</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">schema</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">schema</span><span class="pl-kos">.</span><span class="pl-c1">name</span> <span class="pl-c1">===</span> <span class="pl-smi">NO_ERRORS_SCHEMA</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> </td>
        </tr>
    </tbody></table>
  </div>
</div>
<p></p>
<p dir="auto">make <code class="notranslate">DomElementSchemaRegistry.hasElement</code>,<code class="notranslate">DomElementSchemaRegistry.prototype.hasProperty</code> and other compiler methods to read schemaMetas not only name, but also some contents, for example, a <code class="notranslate">string[]</code> like SCHEMA defined in </p><div class="Box Box--condensed my-2">
  <div class="Box-header f6">
    <p class="mb-0 text-bold">
      <a href="https://github.com/angular/angular/blob/5b141fbf2789e6629083afd1d4678a2ba1ae6ab3/packages/compiler/src/schema/dom_element_schema_registry.ts#L79">angular/packages/compiler/src/schema/dom_element_schema_registry.ts</a>
    </p>
    <p class="mb-0 color-fg-muted">
         Line 79
      in
      <a data-pjax="true" class="commit-tease-sha" href="/angular/angular/commit/5b141fbf2789e6629083afd1d4678a2ba1ae6ab3">5b141fb</a>
    </p>
  </div>
  <div itemprop="text" class="Box-body p-0 blob-wrapper blob-wrapper-embedded data">
    <table class="highlight tab-size mb-0 js-file-line-container" data-tab-size="8" data-paste-markdown-skip="">

        <tbody><tr class="border-0">
          <td id="L79" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="79"></td>
          <td id="LC79" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-k">const</span> <span class="pl-smi">SCHEMA</span>: </td>
        </tr>
    </tbody></table>
  </div>
</div>
<p></p>
<p dir="auto">then user can just declare something like</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const ELECTRON_SCHEMA = ['webview^[HTMLElement]|src,...']"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-smi">ELECTRON_SCHEMA</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-s">'webview^[HTMLElement]|src,...'</span><span class="pl-kos">]</span></pre></div>
<p dir="auto">then put it in ngModule.schemas .</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@NgModule({
  // ...
  schemas: [ELECTRON_SCHEMA]
})
export class AppModule {
}"><pre class="notranslate">@<span class="pl-smi">NgModule</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c">// ...</span>
  <span class="pl-c1">schemas</span>: <span class="pl-kos">[</span><span class="pl-smi">ELECTRON_SCHEMA</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">AppModule</span> <span class="pl-kos">{</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">for more clearly, it could be a interface rather than a string, like..</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="interface SchemaData {
  tagName: string
  type: string
  attributes: string[]
  ... // other security-related fields
}"><pre class="notranslate"><span class="pl-k">interface</span> <span class="pl-smi">SchemaData</span> <span class="pl-kos">{</span>
  <span class="pl-c1">tagName</span>: <span class="pl-smi">string</span>
  <span class="pl-c1">type</span>: <span class="pl-smi">string</span>
  <span class="pl-c1">attributes</span>: <span class="pl-smi">string</span><span class="pl-kos">[</span><span class="pl-kos">]</span>
  ... <span class="pl-c">// other security-related fields</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">for more dynamic use, it could also be a function-based interface, it can combined with normal SchemaMetadata interface, for example:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="interface SchemaMeta {
  name: string
  hasElement?(tagName, schemaMetas): boolean
  hasProperty?(tagName, propName, schemaMetas): boolean
  ... // other security-related methods
}"><pre class="notranslate"><span class="pl-k">interface</span> <span class="pl-smi">SchemaMeta</span> <span class="pl-kos">{</span>
  <span class="pl-c1">name</span>: <span class="pl-smi">string</span>
  <span class="pl-c1">hasElement</span>?<span class="pl-kos">(</span><span class="pl-s1">tagName</span><span class="pl-kos">,</span> <span class="pl-s1">schemaMetas</span><span class="pl-kos">)</span>: <span class="pl-smi">boolean</span>
  <span class="pl-c1">hasProperty</span>?<span class="pl-kos">(</span><span class="pl-s1">tagName</span><span class="pl-kos">,</span> <span class="pl-s1">propName</span><span class="pl-kos">,</span> <span class="pl-s1">schemaMetas</span><span class="pl-kos">)</span>: <span class="pl-smi">boolean</span>
  ... <span class="pl-c">// other security-related methods</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">then <code class="notranslate">CUSTOM_ELEMENTS_SCHEMA</code> and <code class="notranslate">NO_ERROES_SCHEMA</code> could also be a normal SchemaMeta, and don't need hard-code in compiler, like</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class NO_ERROES_SCHEMA implements SchemaMetadata {
  name: 'no-errors-schema'
  hasElement(tagName, schemaMetas) {return true}
  hasProperty(tagName, propName, schemaMetas) {return true}
}"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-smi">NO_ERROES_SCHEMA</span> <span class="pl-k">implements</span> <span class="pl-smi">SchemaMetadata</span> <span class="pl-kos">{</span>
  <span class="pl-c1">name</span>: <span class="pl-s">'no-errors-schema'</span>
  <span class="pl-en">hasElement</span><span class="pl-kos">(</span><span class="pl-s1">tagName</span><span class="pl-kos">,</span> <span class="pl-s1">schemaMetas</span><span class="pl-kos">)</span> <span class="pl-kos">{</span><span class="pl-k">return</span> <span class="pl-c1">true</span><span class="pl-kos">}</span>
  <span class="pl-en">hasProperty</span><span class="pl-kos">(</span><span class="pl-s1">tagName</span><span class="pl-kos">,</span> <span class="pl-s1">propName</span><span class="pl-kos">,</span> <span class="pl-s1">schemaMetas</span><span class="pl-kos">)</span> <span class="pl-kos">{</span><span class="pl-k">return</span> <span class="pl-c1">true</span><span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">I have two projects (SPA) using two different ports (front: 4200, Back : 8000):</p>
<ul dir="auto">
<li><strong>Project 1:</strong></li>
<li><em>Front :</em> Angular 1</li>
<li><em>Back :</em> Django / Django-rest-framework.</li>
<li><strong>Project 2:</strong></li>
<li><em>Front :</em> Angular 2+</li>
<li><em>Back :</em> Django / Django-rest-framework.</li>
</ul>
<p dir="auto">The problem I am facing <strong>(only)</strong> with project 2 <em>(3 days trying to solve it)</em> is that Angular 2+ can't receive cookies sent by the back.</p>
<p dir="auto"><em><strong>Additional information :</strong></em></p>
<ul dir="auto">
<li>Project 1 =&gt; cookies received <strong>OK</strong></li>
<li>Project 2 =&gt; no cookies <strong>Problem</strong></li>
<li>Back of project 1 with front of project 2 =&gt; no cookies <strong>Problem</strong></li>
<li>Back of project 2 with front of project 1 =&gt; cookies received <strong>OK</strong></li>
<li>withCredentials is configured in both projects.</li>
<li>cors configured for both projects.</li>
<li>Response for both projects contains set-cookie header attribute.</li>
</ul>