<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>
After being blocked by a CanDeactivate guard, if the user clicks the browser back arrow:<br>
-the url will change<br>
-the router does NOT attempt to navigate (so doesn't seem to run through the guard)</p>
<p dir="auto">Maybe related to <a href="https://github.com/angular/angular/issues/12851#issuecomment-262520855" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/12851/hovercard">12851</a>?</p>
<p dir="auto"><strong>Expected behavior</strong><br>
On clicking the back button, we run through the guard code like normal</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
<a href="http://plnkr.co/edit/DZwn4C0F8HpAjr04a5Ji?p=preview" rel="nofollow">http://plnkr.co/edit/DZwn4C0F8HpAjr04a5Ji?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
We should always warn the user when they try to navigate away from unsaved changes, and certainly don't want to have the url become disconnected from what is on screen.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Windows 10, VS2015 and VSCode, SystemJS</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X<br>
2.4.8</p>
</li>
<li>
<p dir="auto"><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 ]<br>
Only tried in Chrome</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
Typescript</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =<br>
N/A</p>
</li>
</ul>
<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] feature request / proposal"><pre class="notranslate"><code class="notranslate">[X] feature request / proposal
</code></pre></div>
<p dir="auto">I've been reading about NgModule and I want to lay out some use cases that I'm not entirely sure the current proposal (<a href="https://docs.google.com/document/d/1isijHlib4fnukj-UxX5X1eWdUar6UkiGKPDFlOuNy1U/pub" rel="nofollow">https://docs.google.com/document/d/1isijHlib4fnukj-UxX5X1eWdUar6UkiGKPDFlOuNy1U/pub</a>) takes into consideration.</p>
<p dir="auto"><strong>Context</strong></p>
<p dir="auto">I'm part of a team building an Enterprise Framework (based on Angular 2). This framework will then be the base for other apps within the same ecosystem.</p>
<p dir="auto">We have divided the framework into smaller projects/modules (think of them as separated npm packages). These modules are sets of controls (that are then reused across other modules) or pages that use those controls.</p>
<p dir="auto"><strong>Example</strong></p>
<p dir="auto">A quick example can be:</p>
<blockquote>
<p dir="auto">Controls Module</p>
</blockquote>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {Component} from &quot;@angular/core&quot;;

@Component({
   selector: &quot;my-combobox&quot;,
   ...
})
export class MyComboBox{

}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">Component</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"@angular/core"</span><span class="pl-kos">;</span>

@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
   <span class="pl-c1">selector</span>: <span class="pl-s">"my-combobox"</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">MyComboBox</span><span class="pl-kos">{</span>

<span class="pl-kos">}</span></pre></div>
<blockquote>
<p dir="auto">Checklist Module<br>
// Checklist module depends on Controls module. Controls is treated as a 3rd party module.</p>
</blockquote>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {Component} from &quot;@angular/core&quot;;
import {MyComboBox} from &quot;controlsmodule/components/mycombobox&quot;;
// Please note that we are only loading a specific component within the module, not all components inside that module.

@Component({
     selector: &quot;my-checklist-page&quot;,
     directives: [MyComboBox, ...],
     ...
})
export class ChecklistPage{

}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">Component</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"@angular/core"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">MyComboBox</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"controlsmodule/components/mycombobox"</span><span class="pl-kos">;</span>
<span class="pl-c">// Please note that we are only loading a specific component within the module, not all components inside that module.</span>

@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
     <span class="pl-c1">selector</span>: <span class="pl-s">"my-checklist-page"</span><span class="pl-kos">,</span>
     <span class="pl-c1">directives</span>: <span class="pl-kos">[</span><span class="pl-smi">MyComboBox</span><span class="pl-kos">,</span> ...<span class="pl-kos">]</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">ChecklistPage</span><span class="pl-kos">{</span>

<span class="pl-kos">}</span></pre></div>
<p dir="auto">Bootstrap doesn't know both Controls and Checklist modules. They are lazy loaded depending user's interaction. In this case, if the user navigates to a Checklist, the ChecklistPage component will be loaded and then the MyComboBox will also follow (because of the <em>import</em> made by ChecklistPage)</p>
<p dir="auto">Checklist module has other dozen components. Each depending on other dozen components from multiple modules.</p>
<p dir="auto">It's impractical (not to say nearly impossible) to have all components imported into the NgModule declaration. We are talking of several hundreds of components that <em>might</em> be used during app run time.</p>
<p dir="auto">Also, the application needs to be modular and lazy load when possible. Different interactions within the app will lead to completely different modules being loaded.</p>
<p dir="auto"><strong>Expected/desired behavior</strong></p>
<p dir="auto">The current solution, with component scoped directives, works like a charm for this use case. Not sure how this will play out with NgModule.</p>
<p dir="auto">More than that, currently we can clearly see the dependencies needed by each component (in this case ChecklistPage). Making maintenance that much more easy.</p>
<p dir="auto">Having all needed components imported into a NgModule, and then using them indistinctly on several components seems a fantastic solution for small applications. I feel that on a long term development, with several iterations across multiple years, with team rotation, ... having each component explicitly state on what it depends without looking into the template (and having compilation errors when something is missing) is a great advantage.</p>
<p dir="auto"><strong>Conclusion</strong></p>
<p dir="auto">Please let me know if I was clear in my explanation. The goal of this issue is to raise awareness about this situation and get feedback from you on how to proceed.</p>
<p dir="auto">We are available to show you our current work, we have several hundred Angular 2 components across 8 projects developed in the last year (since alpha 27).</p>