<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[X ] bug report
[ ] feature request
[ ] support request"><pre class="notranslate"><code class="notranslate">[X ] bug report
[ ] feature request
[ ] support request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
I am working on my Angular2 component where I have a component that displays a login status that has no dependency on which routing is picked. I have also a component that displays the proper page with . Both are defined in the same <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/NgModule/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/NgModule">@NgModule</a> annotation and both need to be bootstrapped as they are part of a static html page.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@NgModule({
    declarations: [DisplayPageComponent, LoginStatusComponent],
    imports: [RouterModule.forRoot(routes)],
    bootstrap: [DisplayPageComponent, LoginStatusComponent]
})"><pre class="notranslate"><code class="notranslate">@NgModule({
    declarations: [DisplayPageComponent, LoginStatusComponent],
    imports: [RouterModule.forRoot(routes)],
    bootstrap: [DisplayPageComponent, LoginStatusComponent]
})
</code></pre></div>
<p dir="auto">When I press the next button to go a different page, I go to the other page for a split second and then go back to the previous step.</p>
<p dir="auto">If I subscribe to router.events I see I navigate to the page and then the page is disabled again as the id has changed on this line:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="this.routerEvents.next(new NavigationCancel(id, this.serializeUrl(url), &quot;Navigation ID &quot; + id + &quot; is not equal to the current navigation id &quot; + this.navigationId));"><pre class="notranslate"><code class="notranslate">this.routerEvents.next(new NavigationCancel(id, this.serializeUrl(url), "Navigation ID " + id + " is not equal to the current navigation id " + this.navigationId));
</code></pre></div>
<p dir="auto">It seems the login status component also listens to the routing and disables the page and you receive no feedback if you do not subscribe to router events.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
I expect the routing navigation is only handled once and not the number of components that are bootstrapped.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
I can create a plunkr if required</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Even if the way I use modules is incorrect I would expect to get at least some feedback why the navigation was blocked/failed</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.1</li>
<li><strong>Browser:</strong> all</li>
<li><strong>Language:</strong> all</li>
</ul>
<ul dir="auto">
<li>*<em>I'm submitting a ... *</em><br>
[ ] bug report<br>
[ X] feature request</li>
<li><strong>What is the current behavior?</strong></li>
</ul>
<p dir="auto">I'm using Http in an app and accidentally forgot to include <strong>http.dev.js</strong> in my index.html and received the following error as the app tried to load:</p>
<p dir="auto">angular2-polyfills.js:322 Error: SyntaxError: <strong>Unexpected number(…)</strong><br>
ZoneDelegate.invoke @ angular2-polyfills.js:322<br>
Zone.run @ angular2-polyfills.js:218<br>
(anonymous function) @ angular2-polyfills.js:567<br>
ZoneDelegate.invokeTask @ angular2-polyfills.js:355<br>
Zone.runTask @ angular2-polyfills.js:254<br>
drainMicroTaskQueue @ angular2-polyfills.js:473<br>
ZoneTask.invoke @ angular2-polyfills.js:425</p>
<ul dir="auto">
<li><strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem</strong> via</li>
</ul>
<p dir="auto">Although this isn't a bug, here's how to duplicate the error above:</p>
<p dir="auto">Use an Http import in an Angular 2 service:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { Http, Response } from 'angular2/http';"><pre class="notranslate"><code class="notranslate">import { Http, Response } from 'angular2/http';
</code></pre></div>
<p dir="auto">Leave out the http.dev.js script from index.html (I should've included something like the script below but forgot it). Leaving out any of the key Angular scripts seems to cause the error if imports need objects that are in the missing script.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;!-- Should have included this script --&gt;
&lt;script src=&quot;node_modules/angular2/bundles/http.dev.js&quot;&gt;&lt;/script&gt;"><pre class="notranslate"><code class="notranslate">&lt;!-- Should have included this script --&gt;
&lt;script src="node_modules/angular2/bundles/http.dev.js"&gt;&lt;/script&gt;
</code></pre></div>
<p dir="auto">Since Http is missing you'll get the angular2-polyfills.js:322 Error: SyntaxError: Unexpected number(…) error. The obvious answer is "Don't forget the script!" but I suspect I won't be the first or the last to do that and having a more detailed error would be helpful.</p>
<ul dir="auto">
<li><strong>What is the expected behavior?</strong></li>
</ul>
<p dir="auto">Show a more detailed error about the actual script, object (or import) that is missing or that led to the problem. Getting "Unexpected number" is tough to debug.</p>
<ul dir="auto">
<li><strong>What is the motivation / use case for changing the behavior?</strong></li>
</ul>
<p dir="auto">Would save devs a lot of time figuring out simple mistakes like this if an import won't work due to a missing script.</p>
<ul dir="auto">
<li><strong>Please tell us about your environment:</strong></li>
<li>Angular version: 2.0.0-beta.11</li>
<li>Browser: [Chrome 49 ]</li>
<li>Language: [TypeScript 1.8.7]</li>
</ul>