Angular 2 - 以路径作为参数和 BrowserSync 的路由

Question

我的代码中有这个...

@RouteConfig([
{path: "/me", name: "Me", component: MeComponent, useAsDefault: true},
{path: "/me/edit", name: "EditProfile", component: EditProfileComponent},
{path: "/people/:group", name: "People", component: PeopleComponent}
])

但为了制作类似 /people/school 的内容，我需要在 browserSync 上设置路由。我的第一次尝试是通配符，像这样：

browserSync.init({
   server: {
        baseDir: "./",
        routes: {
            "/me": "index.html",
            "/me/edit" : "index.html",
            "/people/*" : "index.html"
        }
    }

它不起作用。关于如何配置 browserSync 以使用动态生成的 url 路径的任何建议？

有 !

Answer 1

您可以将您的应用配置为使用 HashLocationStrategy。

bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    provide(LocationStrategy, { useClass: HashLocationStrategy })
]);

或配置浏览器同步 rewriteRules 以重写您的 Angular 2 到应用程序根目录的路由路径 index.html。

Answer 2

您需要执行 URL 重写，将请求定向到您的 HTML 5 条路由返回到您的 index.html 页面。

var bsConfig = {
    "open": baseUrl,
    "server": { 
        //... 
    },
    middleware: function(req,res,next) {

        /*
            Re-write URL for each of our Angular routes, mapping them back to index.html (for single-page app, HTML5 routing)
        */
        switch (req.url) {
            //for all angular routes, re-rewrite to /index.html
            case baseUrl + '/customers' : 
            case baseUrl + '/products' : 
            case baseUrl + '/transactions' : 
            
            req.url = '/index.html';
            
            default : {
                //for all other requests (e.g.: to static content such as .css files) don't make any URL re-writing.
                break;
            }
            
        }

        return next();
    }
};


browserSync.init(bsConfig);

归功于： https://vinaygopinath.me/blog/tech/url-redirection-with-browsersync/

Angular 2 - 以路径作为参数和 BrowserSync 的路由

Angular 2 - routing with path as parameter and BrowserSync

angular

angular2-routing

browser-sync