Angular2，我做错了什么？答案

【问题标题】：Angular2, what am i doing wrong?Angular2，我做错了什么？
【发布时间】：2017-01-18 22:50:07
【问题描述】：

我正在学习 Angular2 框架，只是卡在了中间。目标 - 从所需组件（主页）加载视图的简单应用程序。

这是我所拥有的：

app/app.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

app/app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { HttpModule }    from '@angular/http';

import { AppComponent }         from './app.component';
import { HomeComponent }        from './home/home.component';
import { DemoService }          from './services/demo.service';
import { routing }              from './app.routing';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing
  ],
  declarations: [
    AppComponent,
    HomeComponent
  ],
  providers: [
    DemoService,
  ],
  bootstrap: [ AppComponent ]
})

export class AppModule {
}

app/app.component.ts

import {Component} from '@angular/core';
import {DemoService} from './services/demo.service';
import {HomeComponent} from './home/home.component';
import {routing,
         appRoutingProviders} from './app.routing';

@Component({
  selector: 'app',
  template: require('./app.component.html'),
  providers: [DemoService]
})

export class AppComponent {}

/app/app.component.html

<div>AppComponent</div>

../index.html

<!DOCTYPE html>
<html>
  <body>
    <app>Loading...</app>
  </body>
</html>

app/home/home.component.ts

import {Component, OnInit} from '@angular/core';
import {DemoService} from '../services/demo.service';

@Component({
  selector: 'home',
  template: require('./home.component.html')
})
export class HomeComponent implements OnInit {
  title: string = 'Home Page';
  body:  string = 'This is the about home body';
  message: string;

  constructor(private _stateService: DemoService) { }

  ngOnInit() {
    this.message = this._stateService.getMessage();
  }

  updateMessage(m: string): void {
    this._stateService.setMessage(m);
  }
}

app/app.routing.ts

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent }      from './home/home.component';

const appRoutes: Routes = [
  {
    path: '/',
    component: HomeComponent
  }
];

export const appRoutingProviders: any[] = [

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app/home/home.component.html

<div>HomeComponent</div>

由于它来自组件定义，我有各自的 DemoSevice，目前没有任何作用。启动应用程序后，我得到“正在加载...”，其他没有任何变化。

你能建议我正确的路径吗？

【问题讨论】：

你能检查浏览器控制台吗？
你有什么错误吗？看看控制台，你确定你的./app.component.html 有<router-outlet></router-outlet>？
首先从app/app.component.ts 中删除providers: [DemoService]。然后检查浏览器控制台，让我们知道错误。
@micronyks，删除了供应商声明。控制台什么都没有 - 空的。
@PankajParkar，不确定 router-outler，我为什么需要它？我想我没有。它应该在哪里？

标签： angular angular2-routing

【解决方案1】：

您应该在您的app.component.html 中放置router-outlet 指令。添加该指令的原因是，它将跟踪浏览器 URL 和 Angular 路由器将在 router-outlet 指令中加载适当的 Component

/app/app.component.html

<div>AppComponent</div>
<router-outlet></router-outlet>

此外，您必须将与 angular2 相关的各种脚本文件放在 index.html 上

<head>
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

    <script src="https://unpkg.com/zone.js@0.6.17?main=browser"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
</head>

<body>
    <app>Loading...</app>
</body>

【讨论】：

已添加，没有变化。相同的“正在加载...”，仅此而已。
@Pankaj 它应该是<app>Loading...</app>。否则 OP 可以检查脚本部分。
@Pankaj，一旦添加
脚本，我在控制台中得到 404 - localhost:3000/app/main.js。但我在任何地方都没有 main.ts 文件...
如果我没记错的话，我认为 OP 使用 webpack 的另一件事。
@micronyks 感谢提醒，我确实弄错了，谢谢 :) 他一定把脚本弄乱了，包括部分

【解决方案2】：

1) 您需要将template: require('./app.component.html') 更改为templateUrl:'app/app.component.html'。

2)尝试将其更改为

const appRoutes: Routes = [
  {
    path: '',
    redirectTo:'home',
    component: HomeComponent
  },
  {
    path: 'home',
    component: HomeComponent
  }
];

3) app/app.componet.html

<div>AppComponent</div>
<router-outlet></router-outlet>  //<----added here..

【讨论】：

试过这个没有运气。 AppComponent 似乎没有加载
然后尝试从imports 中删除routing 和从declarations 中删除homeComponent 并同时删除router-outlet。然后看看AppComponnent 是否至少被加载。