使用 vert.x 加载静态 angular2 Web 项目答案

【问题标题】：Load static angular2 web project using vert.x使用 vert.x 加载静态 angular2 Web 项目
【发布时间】：2017-04-20 21:52:33
【问题描述】：

我们可以通过将 index.html 放在 assets 文件夹中并在 Router 中给出其路径来使用 vert.x 加载静态网页

router.route("/assets/*").handler(StaticHandler.create("assets"));

如果我将 Angular2 构建项目放在 assets 文件夹中并尝试加载 index.html，浏览器无法理解 Angular2，因为浏览器中没有加载任何依赖项。

据我所知，我们可以使用 lite-server 或 node 来运行 Angular2 项目。

有没有办法使用 vert.x 来加载 Angular2 项目，或者没有网络服务器有没有其他可能的解决方案？

【问题讨论】：

标签： angular vert.x

【解决方案1】：

如 Vert.x 文档中所述，

对静态处理程序处理的路径的任何请求都将导致从文件系统上的目录或从类路径。默认的静态文件目录是 webroot 但这可以进行配置。

由于您已将默认 Web 根文件夹配置为 assets，因此对路径 /assets/ 的任何请求将导致在 assets/assets/ 下提交，并按照官方文档中的说明提供：

例如，如果有一个路径为 /static/css/mystyles.css 的请求静态服务将在目录中查找文件 webroot/static/css/mystyle.css.

例如带有路径 /assets/js/angular2.js 的请求将指示服务器在 assets/assets/js/angular2.js 下查找文件，因此您应该：

将您的静态资产移动到 assets/assets/ 文件夹下。
或者保留默认根文件夹并将您的静态文件放在 webroot/assets 下。

【讨论】：

【解决方案2】：

附加组件：适用于任何偶然发现这篇文章的人。在 sn-p 下面处理浏览器上的刷新。

Stack - Vertx 提供 Angular 2 文件。

   // Create a router endpoint for the static content.

   basically route any files - js, css, jpg etc
   router.route("/*")
   .handler(StaticHandler.create("webroot").setCachingEnabled(false));

   // so anything else re route to home page
   router.route("/*").handler(rc -> {
        logger.info("For refresh handling");

        rc.response().sendFile("webroot/index.html");

   });

【讨论】：