Question

我是棱角分明的新手，我已经开始角度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

您没有任何脚本包含加载角度或任何其他脚本文件。大多数模板在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 - 没有错误，但应用程序也没有正确加载

2 个答案: