deep link feature promised but not implemented in tutorial

[martyychang]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
The Routing Around the App chapter in the tutorial talks about a new requirement for deep linking.

Clicking a deep link in an email opens the detail view for a particular hero.

However, the sample code in the tutorial does not seem to be enough to actually implement this feature. Reaching the end of the chapter leaves me with an app that does not support deep linking.

Expected behavior
Pasting a deep link like http://localhost:3000/detail/11 should take me to the hero detail view, but instead I get an HTTP 404 error.

Minimal reproduction of the problem with instructions
The live example linked from the chapter actually exhibits the same problem.

1. Open the Routing Around the App chapter
2. Click the link in this sentence, "Run the live example for this part."
3. Click the button in the top-right corner of the preview frame to open the preview in its own window. You should see a URL like this: http://run.plnkr.co/qRrUMG91xG1WZaDA/dashboard
4. Reload the page (in Chrome, by right-clicking the page and clicking Reload). At this point you would expect the dashboard to appear but instead you will get an HTTP 404.

What is the motivation / use case for changing the behavior?
I was excited to see deep linking included as part of the new Angular tutorial, since this is an expected feature of any web app. I believe this should be included in the tutorial and would love to see the tutorial updated, so others learning Angular 2 can really get a head start on building usable web apps.

Please tell us about your environment:

# Mac OS X El Capitan 10.11.6
node --version  # 5.6.0
npm --version  # 3.6.0

• Angular version: 2.0.0-beta.17
  I assume this is still a problem since the "live example" exhibits the same issue.
• Browser: Chrome 53.0.2785.116 (64-bit)
• Language: TypeScript 2.0.3
• Node (for AoT issues): node --version = 5.6.0

[brandonroberts]

This is a limitation of plunker, not of the tutorial. If you run the example locally, the deep link works correctly.

[seanareed]

Would you consider re-opening this?

I have the tutorial running locally and am experiencing the same issue.

Entering http://www.ng2finaltut.debvm/detail/12 in the address bar returns this:

Not Found

The requested URL /detail/12 was not found on this server.

Apache/2.4.10 (Debian) Server at www.ng2finaltut.debvm Port 80

[wardbell]

Can't reopen until there is a reproduction. I just ran the code locally and it works exactly as described. I don't doubt that you have a different experience. But we can't fix something we don't see.

I notice in your report that you're running the site at "www.ng2finaltut.debvm Port 80". When we say locally we mean "localhost" and some port. For example, right now I'm navigating successfully to http://localhost:3000/detail/12.

This leads me to believe that your server is not configured to allow for deep linking at all. I'm no good at apache configuration but I'm pretty sure that is the place to look. By contrast, the lite-server supporting the sample is a node express server specifically designed to recognize these requests as deep links and to serve index.html so that the Angular router in the client side app can process that URL.

[seanareed]

Thanks, Ward.

This was exactly the tip I needed.

It was indeed a matter of Apache configuration.

For anyone else stumbling on this topic: The solution for me was to ad an .htaccess file to the same directory as my index.html file with rewrite rules and conditions for Apache:

<IfModule mod_rewrite.c>                                                          
  Options Indexes FollowSymLinks                                                  
  RewriteEngine On                                                                
  RewriteBase /                                                                   
  RewriteRule ^index\.html$ - [L]                                                 
  RewriteCond %{REQUEST_FILENAME} !-f                                             
  RewriteCond %{REQUEST_FILENAME} !-d                                             
  RewriteRule . /index.html [L]                                                   
</IfModule> 

I followed instructions found here: http://stackoverflow.com/questions/34816025/angular2-routing-deep-linking-not-working-with-apache-404