如何在 angular-cli 项目中添加另一个页面？

Question

基于我的另一个问题 (gradle how to add files javascript fies to a directory in the war file) 上的 cmets，我正在尝试使用 angular-cli 来帮助构建和管理 angular 项目。但是，我似乎找不到任何关于如何在项目中创建第二个网页的文档，这对我来说似乎是一项非常基本的任务。我尝试使用ng g component {component name} 创建一个“组件”，但这并没有在构建结果中添加任何内容。

Answer 1

我错过了有关路由的角度文档部分，因为我没有在“路由”一词和我想做的事情之间建立联系。使用 Node 作为服务器时，here 中描述的路由可以完美运行。但是，其他 Web 服务器，例如 Tomcat（我在这个项目中使用的）不会因为 ng build 只生成一个 index.html 文件。 Node 知道它应该将 angular base 下的 URL 重新路由到该文件，但 Tomcat 不知道。需要在 Tomcat 服务器前面放置 apache 等代理服务器，以将 url 重定向到应用程序的基本 url。

说完这些，下面是路由的基础知识：

1. 为每个“页面”创建一个组件（该组件不需要负责显示的整个页面。参见2）
2. 创建一个“shell”组件，其中包含将出现在所有页面上的功能，例如工具栏、侧边导航。
3. 将<router-outlet></router-outlet>添加到shell组件组件中将出现子URL组件的位置（请注意，它们是在此标记之后插入到DOM中，而不是在其中。）
4. 在模块的导入中，添加RouterModule.forRoot()。此函数采用Route 的数组。每条路由都有一个path 和一个component 属性。 path 是将导致component 插入DOM 的url（相对于基本url）。 请注意，path 值不应以斜杠开头。
5. 添加a 标记，并将routerLink 属性绑定到新页面的url。请注意，这里应该有一个前导斜杠。