Question

我有一个简单的＆＃34;我想用快递服务的Angular2应用程序。我已经设置了一个非常基本的实现，但现在我无法使路由正常工作。当我导航到默认路由 - localhost：8081时，应用程序将加载，并且所有路由组件都能正常工作。

然后，当我转到角度定义的路线并刷新页面时，我收到以下错误：Cannot GET /landing。

我已将<base href="/" >标记添加到我的index.html文件中，并且我已经能够使用npm-lite正确地提供应用程序。

如果有人想查看文件结构，我已经设置了github个回购。

我的server.js：

var express = require('express');

var app = express();

app.use(express.static(__dirname));

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

var server = app.listen(8081, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("Example app listening at http://%s:%s", host, port)

})

的index.html：

<html>

<head>
    <!-- angular2 router -->
    <base href="/" >

    <meta charset="utf-8">

    <title>Miha Šušteršič - Portfolio</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- fonts -->
    <link href='https://fonts.googleapis.com/css?family=Bree+Serif|Open+Sans' rel='stylesheet' type='text/css'>

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <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>
    <!-- 2. Configure SystemJS -->

    <script>
        System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
</head>
<!-- 3. Display the application -->

<body>
    <portfolio-app>Loading...</portfolio-app>
</body>

</html>

查看this question我修改了我的main.ts应用程序文件，看起来像这样，但问题仍然存在：

import { bootstrap }    from 'angular2/platform/browser';
import { AppComponent } from './app.component';
import { provide } from 'angular2/core';
import {
  HashLocationStrategy,
  LocationStrategy,
  ROUTER_PROVIDERS
} from 'angular2/router';

bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    provide(LocationStrategy, {useClass: HashLocationStrategy})
]);

如果您需要其他信息，请告诉我们。

角度2，在刷新时表示未加载角度定义的路线

0 个答案: