I've been experimenting with Angular 2 routing in Office App, and I'm facing an issue where it only works the first time and then stops working. Interestingly, the same code works fine with ASP.Net5 but not with Office Apps.
My development environment includes Visual Studio Enterprise 2015 Update 2 and Office 2016. I have provided the solution files for reference to replicate this issue.
Access the solution files here:
To reproduce the issue, follow these steps:
1) Compile and run the solution.
2) Click on Page 1.
3) It will navigate to Page 1 as expected.
4) However, clicking on Page 2 does not lead to any action.
If you reverse the order and click on Page 2 first, it shows Page 2. The functionality seems to break after the initial use. I'm struggling to identify what might be causing this problem, especially because a simple example like this should work seamlessly.
Any help or insights would be greatly appreciated!
Edit #1: I made some adjustments by incorporating the navigateByUrl method to make routing function correctly.
The updated app.component.html is as follows:
<nav>
<a [routerLink]="['PageOne']">Page 1</a>
<a [routerLink]="['PageTwo']>Page 2</a>
</nav>
<button (click)="pOne()">Page 1</button>
<button (click)="pTwo()">Page 2</button>
<router-outlet></router-outlet>
And the amended app.component.ts is as shown below:
import {Component} from 'angular2/core';
import {RouteConfig, Router, ROUTER_DIRECTIVES} from "angular2/router";
import {PageOneComponent} from "./pageone.component";
import {PageTwoComponent} from "./pagetwo.component";
@Component({
selector: "my-app",
templateUrl: "app/app.component.html",
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{
path: "/pageone",
name: "PageOne",
component: PageOneComponent
},
{
path: "/pagetwo",
name: "PageTwo",
component: PageTwoComponent
}
])
export class AppComponent {
constructor(private _router: Router) { }
public pOne() {
//this._router.navigate(["PageOne"]);
this._router.navigateByUrl("/pageone", true);
}
public pTwo() {
//this._router.navigate(["PageTwo"]);
this._router.navigateByUrl("/pagetwo", true);
}
}
Just to highlight again, the navigate method has limitations in terms of working consistently, while the navigateByUrl method requires setting _skipLocationChange to true.
Edit #2: Bootstrap configuration is described as:
///<reference path="../../../node_modules/angular2/typings/browser.d.ts"/>
//import {enableProdMode} from 'angular2/core'
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import {ROUTER_PROVIDERS} from 'angular2/router';
//enableProdMode();
bootstrap(AppComponent, [ROUTER_PROVIDERS]);
For Home.html, the setup is detailed below:
<!DOCTYPE html>
<html>
<head>
<base href="../../App/Home/"/>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title></title>
<script src="../../Scripts/node_modules/es6-shim.js"></script>
<script src="../../Scripts/node_modules/system-polyfills.js"></script>
<script src="../../Scripts/node_modules/shims_for_IE.js"></script>
<script src="../../Scripts/node_modules/angular2-polyfills.js"></script>
<script src="../../Scripts/node_modules/system.src.js"></script>
<script src="../../Scripts/node_modules/Rx.js"></script>
<script src="../../Scripts/node_modules/angular2.dev.js"></script>
<script src="../../Scripts/node_modules/http.dev.js"></script>
<script src="../../Scripts/node_modules/router.dev.js"></script>
<script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<link href="../../Content/Office.css" rel="stylesheet" type="text/css"/>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<!-- To enable offline debugging using a local reference to Office.js, use: -->
<!-- <script src="../../Scripts/Office/MicrosoftAjax.js" type="text/javascript"></script> -->
<!-- <script src="../../Scripts/Office/1/office.js" type="text/javascript"></script> -->
<!--<link href="../App.css" rel="stylesheet" type="text/css"/>
<script src="../App.js" type="text/javascript"></script>
<link href="Home.css" rel="stylesheet" type="text/css"/>
<script src="Home.js" type="text/javascript"></script>-->
<!-- 2. Configure SystemJS -->
<script>
Office.initialize = function(reason) {
System.config({
meta: {
"./*": { scriptLoad: true }
},
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
}
</script>
</head>
<body>
...
</body>
</html>