Based on the ments on another of my questions (gradle how to add files javascript fies to a directory in the war file) I'm trying to use angular-cli to help build and manage an angular project. However, I cannot seem to find any documentation on how to create a second webpage in the project, which to me seems like a very basic task. I tried creating a "ponent" with ng g ponent {ponent name}, but this didn't add anything to the build result.

Based on the ments on another of my questions (gradle how to add files javascript fies to a directory in the war file) I'm trying to use angular-cli to help build and manage an angular project. However, I cannot seem to find any documentation on how to create a second webpage in the project, which to me seems like a very basic task. I tried creating a "ponent" with ng g ponent {ponent name}, but this didn't add anything to the build result.

• javascript
• angular
• angular-cli

• 3 You should go though tutorial. Routing (navigating between pages) is covered in detail here: angular.io/docs/ts/latest/tutorial/toh-pt5.html – Sasxa Commented Mar 13, 2017 at 5:11

1 Answer 1

I had missed the section of the angular docs on routing since I did not make the connection between the word "routing" and what I wanted to do. Routing as described here works perfectly when using Node as your server. However, other web servers such as Tomcat (which I am using for this project) will not since ng build only generates an index.html file. Node knows that it should re-route URLs under the angular base to that file, but Tomcat doesn't. A proxy server such as apache needs to be placed in front of the Tomcat server to redirect the urls to the base url for the application.

With that out of the way, here is the basics of routing:

1. create a ponent for each "page" (the ponent does not need to be responsible for the whole page displayed. see 2)
2. create a "shell" ponent that contains features that will be on all pages e.g. toolbar, side navigation.
3. add <router-outlet></router-outlet> to the point in the shell ponent ponent where ponents for sub-URLs will appear (note that they are inserted into the DOM after this tag, not within it.)
4. in the imports for your module, add RouterModule.forRoot(). This function takes an array of Route. Each route has a path and a ponent property. path is the url (relative to the base url) that will cause ponent to be inserted into the DOM. Note that path values should not begin with a slash.
5. add a tags with the routerLink property bound to the url of your new page. Note that here, there should be a leading slash.