Question

我正在测试一个非常基本的Angular2应用程序，但在路由方面遇到了一些麻烦。我把所有东西都剥掉了，所以我只有两个测试组件。该项目是RC4，使用角度CLI构建。我昨晚做了噩梦......似乎应该很容易搞清楚但我无法看到它。我觉得它与app在src文件夹中有关系？（app不是真的＆＃39; root＆＃39;？）

感谢您的帮助。

错误（来自Chrome Dev）

zone.js:461 Unhandled Promise rejection: Cannot match any routes: '' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot match any routes: ''(…)

zone.js:463 Error: Uncaught (in promise): Error: Cannot match any routes: ''(…)

编辑*****修复此问题我们修了它做了几件事。（1）我们在app.routes.ts中添加了一个到routes数组的默认路由。

项目结构

SRC
   APP
     test.component.ts
     test2.component.ts
     app.routes.ts

App Routes：

import { provideRouter, RouterConfig } from '@angular/router';
import {Test2Component} from './test2.component';
import {TestComponent} from './test.component';

const routes: RouterConfig = [
{ path: '', component: TestComponent },
{ path: 'test2', component: Test2Component }
];

export const appRouterProviders = [
    provideRouter(routes)
];

TestComponent

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
  moduleId: module.id,
  selector: 'test-nav',
  templateUrl: 'test.component.html',
  directives: [ROUTER_DIRECTIVES]
})

export class TestComponent {}

TestComponent2

import {Component} from "@angular/core";

@Component({
    templateUrl: "test2.component.html",
})

export class Test2Component{}

测试组件链接的HTML

<a href="#" routerLink="/test2" routerLinkActive="active"><h1>test</h1></a>

Error when we click on the link from that HTML
zone.js:101 GET http://localhost:4200/test2.component.html 404 (Not Found)

的index.html

<!doctype html>
<html>
<head>
  <base href="/">
  <meta charset="utf-8">
  <title>Webstimate</title>
  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script src="vendor/bootstrap/dist/js/bootstrap.js"></script>
  <link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
  <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>-->
  {{#unless environment.production}}
  <script src="/ember-cli-live-reload.js" type="text/javascript"></script>
  {{/unless}}
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

</head>
<body>
  <test-nav>Loading...</test-nav>
    {{#each scripts.polyfills}}<script src="{{.}}"></script>{{/each}}
    <script>
      System.import('system-config.js').then(function () {
        System.import('app/main');
      }).catch(console.error.bind(console));
    </script>
</body>
</html>

Main.TS

    import { bootstrap } from '@angular/platform-browser-dynamic';
    import { enableProdMode } from '@angular/core';
    import { appRouterProviders } from './app.routes';
    import { ROUTER_DIRECTIVES } from '@angular/router';


    if (environment.production) {
      enableProdMode();
    }

bootstrap(TestComponent, [appRouterProviders, ROUTER_DIRECTIVES]);

Angular 2 Routes - 无法匹配任何路径RC4

0 个答案: