angular-seed: endpoints with "." not working

Steps to reproduce and a minimal demo of the problem http://localhost:5555/users/a.b

Want to access there. “a.b” is a username, but all I get is:

<html><head></head>
<body>Cannot GET /users/a.b
</body></html>

Any endpoint having a user without a “.” char is working perfectly.

My Routes:

export const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full', canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'discover', component: DiscoverComponent, canActivate: [AuthGuard] },
  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
  { path: 'settings', component: SettingsComponent, canActivate: [AuthGuard] },
  { path: 'users', children: [
    {path: ':username', component: ProfileComponent, canActivate: [AuthChecker]}
  ]},
];

Thanks!

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 22 (20 by maintainers)

Commits related to this issue

Merge remote-tracking branch 'sasikumardr/master' * sasikumardr/master: Alphabetically sort imports to comply with style guide Additional fix for #1269. Also mapping /dist/dev/css/ to /css/ in in... — committed to mgechev/angular-seed by mgechev 8 years ago

Most upvoted comments

@mgechev how about this fix? If okay, i can create a PR.

Reference for regex: http://stackoverflow.com/questions/18086473/regular-expression-for-extension-of-file.

 /**
   * Configuration for enabling Angular Routes with dots in it.
   * If this field is configured as true, KNOWN_EXTENSIONS field needs to be customized 
   * in order to render static files.
   */
  ENABLE_DOTTED_ROUTES = false;

  /**
   * Static file extensions seperated by '|'. This will be used in browser-sync middleware to identify static files.
   * To be used in combination with ENABLE_DOTTED_ROUTES = true
   */
  KNOWN_EXTENSIONS = 'js|css|html|ts|json|svg';
  /**
   * Configurations for NPM module configurations. Add to or override in project.config.ts.
   * If you like, use the mergeObject() method to assist with this.
   */
  PLUGIN_CONFIGS: any = {
    /**
     * The BrowserSync configuration of the application.
     * The default open behavior is to open the browser. To prevent the browser from opening use the `--b`  flag when
     * running `npm start` (tested with serve.dev).
     * Example: `npm start -- --b`
     * @type {any}
     */
    'browser-sync': {
      middleware: [require('connect-history-api-fallback')({
        index: `${this.APP_BASE}index.html`,
        rewrites: !this.ENABLE_DOTTED_ROUTES ? [] : [
          {
            from: new RegExp(`^(.*\.(?!(${this.KNOWN_EXTENSIONS})$))?[^.]*$`, 'i'),
            to: (context:any) => context.parsedUrl.pathname
          }
        ],
        disableDotRule: this.ENABLE_DOTTED_ROUTES
      })],
      port: this.PORT,
      ...
   }

sasikumardr on Oct 10, 2016

I would like to show some light to the issue, I have too much work to do yet before we release 😞 , need to focus… I don’t need it in development, as long as it works good in production don’t have the need to solve it 😃 .

Perezmarc on Sep 2, 2016

@sasikumardr yep, this makes sense, maybe we can also drop ENABLE_DOTTED_ROUTES and add more complete list of extensions? Some subset of these looks fine to me.

mgechev on Oct 10, 2016

@mgechev This issue is related to browser-sync library. More specifically “connect-history-api-fallback” middleware configured in PLUGIN_CONFIGS (seed.config.ts). “connect-history-api-fallback” treats urls with dots as static resource. This such cases, angular will not come into picture as static-server will try to serve this file directly.

In latest version of library (>=1.3) we have option to disable dot checking in url. But configuring this will cause issues with loading app specific js files.

sasikumardr on Sep 7, 2016