时间戳

首页 > 解决方案 > 当我运行我的角度程序时，无法在网络浏览器上看到网页/输出

angular - 当我运行我的角度程序时，无法在网络浏览器上看到网页/输出

问题描述

问题：当我运行程序时，浏览器上看不到输出/网页。我正在使用 Visual Studio 代码来创建登录表单。我在这里错过了什么吗？下面是组件的代码。

login.component.html 类

<div class="container">
    <form #loginForm="ngForm" (ngSubmit)="submitLoginForm(loginForm)" style="background-color: aqua; ">
        <div class="row">
            <div class="col-md-4">
            </div>
            <div class="col-md-4">
                <h2>login</h2>
            </div>
            <div class="col-md-4">
                <h2 style="text-align: center;color: brown;font-size: small;">all fields 
                    are mandatory
                </h2>
                <div class="form-group">
                    <div class="col" style="text-align: right;">
                        <label>emailId</label>
                    </div>
                    <div class="col; input-group">
                        <input type="email" name="email" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col" style="text-align: right;">
                        <lable> password</lable>
                    </div>
                    <div class="col; input-group">
                        <input type="password" name="password" class="form-control">
                    </div>
                </div>
                <div class="form-group" style="text-align:left">
                    <button type="submit" class="btn">Login</button>
                </div>
            </div>
            <div class="col-md-4">
            </div>
        </div>
    </form>
</div>

login.component.ts 类 

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor() { }

  submitLoginForm(form : NgForm){
    console.log(form.value.email);
    console.log(form.value.password);
  }
  ngOnInit() {
  }

}

app.component.html 类

<div style="text-align:center">
  <h1>
    Welcome
  </h1>
  <p>
    <app-login></app-login>
  </p>
</div>

app.component.ts 类

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

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

app.module.ts 类

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

索引.html 类

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>QuickKartApp</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></app-root>
</body>
</html>

控制台中的错误

Uncaught Error: Template parse errors:
'lable' is not a known element:
1. If 'lable' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("rm-group">
                    <div class="col" style="text-align: right;">
                        [ERROR ->]<lable> password</lable>
                    </div>
                    <div class="col; input-group""): ng:///AppModule/LoginComponent.html@22:24
    at syntaxError (compiler.js:2175)
    at TemplateParser.parse (compiler.js:11169)
    at JitCompiler._parseTemplate (compiler.js:25541)
    at JitCompiler._compileTemplate (compiler.js:25529)
    at compiler.js:25473
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:25473)
    at compiler.js:25386
    at Object.then (compiler.js:2166)
    at JitCompiler._compileModuleAndComponents (compiler.js:25385)

标签： angulartypescript

解决方案

推荐阅读