Question

我正在尝试使用Typescript在Angular2中定义一个具有登录功能的简单应用程序。我已经定义了我的路由器，但在尝试访问浏览器中的URL时遇到错误。这是错误：

Cannot GET /login

我正在使用的网址：

http://localhost:3012/login

好像路由器没有正确地将URL路由到正确的组件，我不知道为什么。这是我的home.component.ts实例化应用程序和路由器：

import {Component} from 'angular2/core';

import {ROUTER_DIRECTIVES, RouteConfig} from 'angular2/router';
import {LoginComponent} from './login/login.component';
import {DashboardComponent} from './dashboard/dashboard.component';

@Component({
    selector: 'home',
    templateUrl: '<router-outlet></router-outlet>',
    directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
    {path: '/login', name: 'Login', component: LoginComponent, useAsDefault: true},
    {path: '/dashboard', name: 'Dashboard', component: DashboardComponent},
    {path: '/*other', name: 'Other', redirectTo: ['Login']}
])
export class HomeComponent {

}

登录和仪表板组件都已正确定义，PHPStorm未发现任何错误。

有没有人知道为什么会这样？

这是我的服务器端代码。 server.ts（NodeJS入口点）

import express = require('express');
import path    = require('path');

let port: number = process.env.PORT || 3012;
let app = express();

app.set('views', path.join('./src/Client/views'));
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);

app.use("/node_modules", express.static(path.resolve(__dirname, '../../node_modules')));
app.use("/app", express.static(path.resolve(__dirname, '../Client/app')));

app.use("/*.html", function(req, res) {
    res.render(req.params[0] + ".html");
});

app.get('/', function(req: express.Request, res: express.Response) {
    res.render('index.html');
});

let server = app.listen(port, function() {
    let host = server.address().address;
    let port = server.address().port;
});

我的index.html文件包含所有必需的Angular2脚本并启动SystemJS

<html>
    <head>
        <title>Test</title>

        <script src="node_modules/es6-shim/es6-shim.min.js"></script>
        <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
        <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

        <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>
        <script src="node_modules/rxjs/bundles/Rx.js"></script>
        <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
        <script src="node_modules/angular2/bundles/router.dev.js"></script>
        <script src="node_modules/angular2/bundles/http.dev.js"></script>
        <script>
            System.config({
                packages: {
                    app: {
                        format: 'register',
                        defaultExtension: 'js'
                    }
                }
            });
            System.import('app/bootstrap')
                    .then(null, console.error.bind(console));
        </script>
    </head>

    <body>
        <home>Loading...</home>
    </body>
</html>

我的文件结构：

由于

Answer 1

我想这个：

app.use("/*.html", function(req, res) {
    res.render(req.params[0] + ".html");
});

应该是

app.use("/*", function(req, res) {
    res.render(req.params[0] + ".html");
});

因为我不确定为什么你会再次向.html发送html请求。

这是否解决了这个问题？

Answer 2

我相信路由器需要设置基本href，以便它知道你相对的路由。

Angular 2 router no base href set

Angular2路由器无法正常工作

2 个答案: