Angular 2 [routerLink] Not Resolving in Browser

孤街浪徒 提交于 2020-01-07 06:43:08

问题


Without adding too much code or documentation to my question, I'm having a resolving issue with the [routerLink] code for our Angular 2 Demo:

Versioning

Node.js - v4.4.7
@angular - 2.0.0-rc.1

app/app.component.ts

@RouteConfig([
    {
        path: '',
        name: 'TasksComponent',
        component: TasksComponent
    },
    {
        path: 'tasks/editor',
        name: 'TaskEditorComponent',
        component: TaskEditorComponent
    },
    {
        path: 'timer',
        name: 'TimerComponent',
        component: TimerComponent
    }
])


app/app.component.html

<nav class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <strong class="navbar-brand">My Pomodoro App</strong>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li><a [routerLink]="['TasksComponent']">Tasks</a></li>
            <li><a [routerLink]="['TimerComponent']">Timer</a></li>
            <li><a [routerLink]="['TaskEditorComponent']">Publish Task</a></li>
        </ul>
    </div>
</nav>

<router-outlet></router-outlet>


Rendered HTML (in browser)

<body>
    <script id="__bs_script__">
        //<![CDATA[
            document.write("<script async src='/browser-sync/browser-sync-client.2.14.0.js'><\/script>".replace("HOST", location.hostname));
        //]]>
    </script>
    <script async="" src="/browser-sync/browser-sync-client.2.14.0.js"></script>

    <pomodoro-app>
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <strong class="navbar-brand">My Pomodoro App</strong>
                </div>
                <ul class="nav navbar-nav navbar-right">
                <li><a></a></li></ul>
            </div>
        </nav>
    </pomodoro-app>
</body>


If I remove the [routerLink]="['TasksComponent'] from the anchor tags, the anchor tags show up with no issues. Somehow the rendering of the [routerLink] is causing an issue. It seems that the scope of the issue is not in my import commands or any other Angular 2 related information, so I have reduced the scope of my code to the versions, the typescript file and the html file in question.

I am running this using Lite Server. Any assistance would be appreciated.

来源:https://stackoverflow.com/questions/39082983/angular-2-routerlink-not-resolving-in-browser

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!