Angular 2 - 没有错误，但应用程序也未正确加载

Question

我是 angular 的新手，我已经开始 angular 2. 我已经开始示例项目，最初它运行良好，但突然停止工作。因为它没有在浏览器中显示输出。下面是我的代码。

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bulletin Board</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
  }
  title = 'app';
}

app.module.ts

const appRoute: Routes = [
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  {path: 'login', component: UserComponent},
  {path: 'registration', component: UserRegistrationComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    UserComponent,
    UserRegistrationComponent
  ],
  imports: [
    RouterModule.forRoot(appRoute),
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

编辑

app.component.html

<router-outlet></router-outlet>

user.component.ts

<div class="login-box">
  <div class="login-logo">
    <b>Bulletin</b>Board
  </div>
  <div class="login-box-body">
      <div class="form-group has-feedback">
        <input type="text" #txtUsername class="form-control" placeholder="Usrename or Email">
        <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="password" #txtPassword class="form-control" placeholder="Password">
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
      </div>
      <div class="row">
        <div class="col-xs-8">
          <div class="checkbox icheck">
            <label>
              <input type="checkbox"> Remember Me
            </label>
          </div>
        </div>
        <div class="col-xs-4">
          <button type="submit" class="btn btn-primary btn-block btn-flat" (click)="onButtonClick(txtUsername.value,txtPassword.value)">Sign In</button>
        </div>
      </div>
    <a routerLink="/registration" class="text-center">Register a new membership</a>
  </div>
</div>

现在我无法弄清楚发生了什么，什么是错误，并且无法获得输出。

需要做什么改变？

Answer 1

您没有任何脚本包含来加载 angular 或任何其他脚本文件。大多数模板在 Index.html 中使用以下设置。根据您的设置进行调整：

<head>
    <meta charset="utf-8">
    <base href="/">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>

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

Answer 2

我确实解决了这个问题。

我只需要将 HttpModule 导入 app.module.ts 文件。即

import { HttpModule } from '@angular/http'

并进入import数组，

imports: [
RouterModule.forRoot(appRoute),
BrowserModule,
HttpModule
],

所以我的整个 app.module.ts 看起来像这样。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Http, HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { UserComponent } from './user-login/user.component';
import { UserRegistrationComponent } from './user-registration/user-registration.component';

const appRoute: Routes = [
  { path: '',
  redirectTo: 'login',
  pathMatch: 'full'
} ,
  { path: 'login', component: UserComponent},
  { path: 'registration', component: UserRegistrationComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    UserComponent,
    UserRegistrationComponent
  ],
  imports: [
    RouterModule.forRoot(appRoute),
    BrowserModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

谢谢大家的帮助。

Angular 2 - 没有错误，但应用程序也未正确加载

Angular 2 - No errors, but application is not loading properly too

javascript

typescript

angular2-routing