0
私は、Angular2でTypescriptを使用してログイン機能を持つ簡単なアプリケーションを定義しようとしています。私はルータを定義しましたが、ブラウザのURLにアクセスしようとするとエラーが発生しています。Angular2ルータが正しく動作しない
Cannot GET /login
とURL私が使用しています：
http://localhost:3012/login
ルータが正しく成分を補正するためにURLをルーティングされていないと私はなぜわからないかのように思えるこれは誤りです。
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がエラーを拾っていない：ここでアプリやルータをインスタンス化し、私のhome.component.tsです。
これはどうして起こっているのでしょうか？
ここに私のサーバーサイドコードがあります。 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;
});
そして、すべての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>
そして、私のファイル構造を開始含まれて私のindex.htmlファイル：
ありがとう
ホストするのにどのサーバーを使用していますか？サーバーが '/ login'ディレクトリの内容を返そうとしているようです。 'lite-server'を使うと、これは問題にはなりません。また、 'HashLocationStrategy'に切り替えると、あなたのサーバは正しく評価される' http：// localhost：3012 /＃/ login'になります。 –
あなたはどんなバージョンですか？ – wolfhoundjesse
すぐにお返事ありがとうございます。カスタムNodeJSサーバーを使用しています。私はNodeJSレイヤーを完全に制御したいのでlite-serverを使いたくありません。ルータが正しく動作していたので、これが問題であるとは思えません。 – devoncrazylegs