Pub: angular2 routing defaults don't work well with pub serve

[kasperpeulen]

If I set up routing in angular2, and run pub serve everything works at first, I can click on routes, but when I refresh the page I get a 404.

This doesn't happen when I run the typescript version using lite-server

I can run the pub build output using lite-server, and it works fine as well.

As a workaround, I can enable the hashlocation routing strategy in angular2, but I think it would be nice if pub serve would support routing without hash as well.

[zoechi]

AFAIK the official strategy is to use your own server and make it work as a proxy to forward requests to Dart sources for pub serve. AFAIR you shouldn't need pub serve at all if you're working with Dartium. Any webserver (probably lite-server) would work with Dart Angular2 (also Dart Polymer 1)

[kasperpeulen]

@zoechi thanks. Using lite-server in dartium without pub serve works for angular2 indeed, and make routing works then as expected.

AFAIK the official strategy is to use your own server and make it work as a proxy to forward requests to Dart sources to pub serve.

I guess I would need something like that, if I also need something like a sass transformer for development. I will look into it.

[adaojunior]

I dont know how the internals of pub serve works but I think a way to support apps using pushState would be having a pubserve.yaml file in the project root with some configs such as:

rewrites:
- source: /admin/**
    destination: web/admin.html
- source: **
  destination: web/index.html

This should redirect /admin/auth to web/admin.html
or / to web/index.html.
But when the browser request a file, eg: main.dart.js the server should respond with web/main.dart.js.

It should be used on development or to serve static files, but when the app is served by a back-end server written in dart this should be the server responsability, and could be done using eg: shelf.

References:

• Firebase rewrites
• superstatic
• Appengine config

[zoechi]

I think a better approach would be to add missing features to a community development server.

• proxy pub serve
• URL rewrites
• ...

A candidate could be

• https://pub.dartlang.org/packages/simple_http_server
  AFAIR there were similar projects published but couldn't find more just now

[adaojunior]

@zoechi How could we integrate transformers into it ?
It is only necessary when (as you said) we're using another browser other than Dartium.
I often use chrome's Remote Debugging Devices
and I like how pub serve compiles the dart files to js when required by a browser that does not support dart by default.
If an approach like that is possible I think it is even better than changing pub serve itself.

[adaojunior]

@zoechi got it, we would proxy pub serve so that feature (transformers) would be there already, that's a great idea.

[adaojunior]

Just found Shelf Proxy, I'm gonna play with it

[kasperpeulen]

For people searching for a workaround, I'm now using @adaojunior packages, which seems to work well:
https://pub.dartlang.org/packages/pub_serve_rewrites

[kwalrath]

I'm going to have to explain this in the Angular docs, so anything we can do to make this simpler would be good.

@nex3 @munificent

[adaojunior]

I'm using this : https://github.com/adaojunior/pub_serve_rewrites
I still think this is too much of hack. I'm interested to discuss and find a better solution for this problem.

[FranklinYu]

Is it possible for pub serve to allow some pluggable middleware to deal with this? This way a user don't need a global rewrite command, but instead their local pub serve do the rewrite through the middleware, only in the projects where pub_serve_rewrites is listed as a dependency. (I stole the idea from Rack middleware.)

[RandalSchwartz]

As it is, the Heroes tutorial is broken, and frustrating by the time you get to the routing chapter. Nothing works as written. It'd be great if an out-of-the-box solution would be available for anyone wanting to use the router (which should be most Angular apps!).

[kasperpeulen]

Yes, would be a great enhancement, if you ask me :)

@thosakwe seems to have worked on this in this fork:
https://github.com/thosakwe/repub

[chalin]

As it is, the Heroes tutorial is broken, and frustrating by the time you get to the routing chapter.

@RandalSchwartz, sorry that you are having problems with the tutorial.

Nothing works as written.

As far as I know, the only thing that isn't working as documented is deep linking, and we're tracking that particular problem via https://github.com/dart-lang/site-webdev/issues/252.

If there are any other problems, we'd be glad to address them. Please report problems with the tutorial over on site-webdev.

It'd be great if an out-of-the-box solution would be available for anyone wanting to use the router (which should be most Angular apps!).

Something will be made available eventually. In the meantime, as @kasperpeulen points out, there are community-based solutions. (When I need to test deep linking, which isn't often the case, I use https://github.com/dart-lang/pub/pull/1437.)

[RandalSchwartz]

OK, so the real issue is that I was using WebStorm's server instead of "pub serve", which almost works, but I suspect they are launching it from the wrong directory, so that the paths are $projectname/web/index.html instead of just /index.html. Perhaps the tutorial should make it clearer that when you say to use pub serve, even in webstorm it means "open the terminal window and type this right in that window".

That, and using this:

    directives: const [ROUTER_DIRECTIVES],
    providers: const [
      HeroService,
      ROUTER_PROVIDERS,
      const Provider(LocationStrategy, useClass: HashLocationStrategy),
    ])

in my app component made everything work better, including reloads.

[FranklinYu]

@RandalSchwartz HashLocationStrategy has been working since the first version of AngularJS, but to me it seems more like a hack to use fragment part as virtual path. I like the idea of PathLocationStrategy being default, because it is semantically correct.

As for the WebStorm pub serve, I guess the main cause of your frustration is WebStorm not providing a sane default configuration for a new project. It helps indeed if there's a corresponding caveat in tutorial, until JetBrains fix that issue.

[RandalSchwartz]

I'm told this is fixed in 2017.2, due for release in July. So, although a workaround to validate my findings would be nice... you could just consider this probably closed in July. :)

[RandalSchwartz]

Hmm. Just tried without HashLocationStrategy, and it fails when I hit reload on http://localhost:8080/detail/17. So there's still something odd there.

[FranklinYu]

@RandalSchwartz Yes, there is: with the default PathLocationStrategy, by now pub serve doesn't support reload. Current known workarounds:

• Just don't reload during development. It works in production, if the server is properly configured.
• Try "repub" mentioned above (which doesn't work for me).
• Use the rewrites package mentioned above.

[thosakwe]

@franklinyu Did you run into an error when using repub? If so, please file an issue so I can get it working again.

[FranklinYu]

@thosakwe You mean filing an issue in this repository?

[thosakwe]

No, in https://github.com/thosakwe/repub. Sorry for the confusion!

[FranklinYu]

@thosakwe Hmm, I don't think I can see the "Issue" tab (and that's why I didn't do it in the first place).

[thosakwe]

Ah, I'm an idiot. Repub is a fork and thus has no Issues page. Perhaps email me ([email protected]). I feel as though I've hijacked this thread.

[FranklinYu]

@thosakwe You may as well just re-enable issue in project setting: "Settings -> Options -> Features -> Issues", check the checkbox. Issue in forks are just disabled by default.

And this is not as bad as hijacking IMO… At least we are not posting junk messages like "+1".

[thosakwe]

@franklinyu Thanks for the tip! https://github.com/thosakwe/repub/issues

[matanlurey]

We are no longer supporting transformers or pub serve/build going forward (this tooling has moved elsewhere into the https://github.com/dart-lang/build repository and https://github.com/dart-lang/webdev CLI) so a fix for this is not planned.

We'll be updating the tooling section of the Dart website in the coming weeks with more formal documentation on how to get started.