Search code examples
typescriptangularoffice365angular2-routingoffice365-apps

Office 365 app & Angular 2 routing only works the first time

I am trying to get Angular 2 routing to work with Office App. It only works the first time and after that, it stops working. I have managed to get the same code to work with ASP.Net5 but not with Office Apps.

I am using Visual Studio Enterprise 2015 Update 2 and Office 2016. I have attached the solution to reproduce the issue.

Link to the solution files: https://onedrive.live.com/redir?resid=1D346F6F0769D8C!991&authkey=!AGQlHsr70YHepv4&ithint=file%2crar

Steps to reproduce:

1) Compile and run the solution.

2) Click on Page 1.

3) It will navigate to Page 1.

4) Click on Page 2 and nothing happens.

Repeat the above with Page 2 first and it will show Page 2. Somehow, it stops working after the first time. I can't figure out what I am doing incorrectly as I can't get such a simple example to work.

Thanks in advance!

Edit #1: I added the following and managed to get routing to work but only by using the navigateByUrl method.

The app.component.html is now:

<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 app.component.ts is now:

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);
    }
}

As mentioned above, the navigate method will only work the first time and the navigateByUrl method will only work if you set _skipLocationChange to true.

Edit #2: Bootstrap is:

///<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]);

Home.html is:

<!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>
    <div id="content-header">
        <div class="padding">
            <h1>Welcome</h1>
        </div>
    </div>
    <div id="content-main">
        <div class="padding">
            <my-app>LOADING.........</my-app>
        </div>
    </div>
</body>
</html>
Solution

  • This was fixed in a later version of Angular 2.