Допомога у програмуванні, відповіді на питання / Nodejs / Як використовувати маршрутизацію Angular2 - node.js, кутовий, URL-маршрутизація, кутовий2-маршрутизація

Як використовувати маршрутизацію Angular2 - node.js, кутова, маршрутизація URL-адреси, кутовий 2-маршрутизація

Я намагаюся написати односторінкове додаток, але я не можу отримати маршрут на роботу. Я намагався використовувати багато підручників, але, здається, вони дуже швидко застаріли, вважаючи, що Angular2 все ще знаходиться на бета-версії.

Здається, що як тільки я додам будь-які посилання на директиви маршрутизатора або конфігурацію маршрутизатора або постачальників маршрутизаторів, програма припиняє роботу, а на консолі браузера друкується наступна помилка:

Error: Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:332:20
Zone</Zone</Zone.prototype.run@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:227:25
scheduleResolveOrReject/<@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:576:53
Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:365:24
Zone</Zone</Zone.prototype.runTask@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:263:29
drainMicroTaskQueue@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:482:26
ZoneTask/this.invoke@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:434:22

Evaluating http://localhost:3000/angular2/router
Error loading http://localhost:3000/app/main.js

Зараз у мене є наступні файли, які не працюють:

index.html

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rapid</title>

<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->

<link href="css/dashboard.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">

<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="https://code.angularjs.org/2.0.0-beta.0/http.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>
<app>Loading...</app>
</body>
</html>

main.ts

import {MainApp} from "./mainApp.component";
import {ROUTER_PROVIDERS} from "angular2/router";
import {bootstrap} from "angular2/platform/browser";

bootstrap(MainApp, [
ROUTER_PROVIDERS
]);

mainApp.component.ts

import {Component} from "angular2/core";
import {ROUTER_DIRECTIVES, RouteConfig} from "angular2/router";
import {Home} from "./home.component"

@Component({
selector: "app",
template: `
<div>Done</div>

`,
directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
{ path: "/", component: Home, as: "Home" }
])

export class MainApp {}

home.component.ts

import {Component} from "angular2/core";

@Component({
template: "<div>Home</div>",
})

export class Home {}

Я шкодую, якщо це питання новачка, але я встиг це з вчора, і я не знаю, як ще це вирішити ...

Відповіді:

4 для відповіді № 1

Переконайтеся router.dev.js(включено) & app/main.js в правильному місці

Ви пропустили кілька речей тут.

Додати base з href="/" тег на вашій сторінці як <base href="/">
Шаблон компонента програми матиме <router-outlet></router-outlet> директива
Потім скористайтеся useAsDefault: true за вказаний вами маршрут

Зробіть нижче зміни у маршруті

  @RouteConfig([
{ path: "/", component: Home, as: "Home", useAsDefault: true }
])

2 для відповіді № 2

Проблема з помилкою, з якою ви стикаєтесь зараз, - через відсутність router.dev.js в твоїй index.html. Але, як вже запропонував @PankajParkar, вам потрібно додати трохи більше матеріалів у свій код, щоб він дійсно працював :)