Question

我已经有一个正在运行的Angular应用程序，因为要扩展功能，我必须实现该应用程序的路由和登录页面。以前路由不存在，作为路由的一部分，我添加了以下代码。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { EditorModule } from '@tinymce/tinymce-angular';
import { AngularEditorModule } from '@kolkov/angular-editor';
import { NgxUiLoaderModule } from 'ngx-ui-loader';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        HttpClientModule,
        EditorModule,
        AngularEditorModule,
        NgxUiLoaderModule,
        AppRoutingModule,
        CommonModule,
        LoginComponent,
        RouterModule.forRoot([]),
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { ReactiveFormsModule }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from '../app/login/login.component';
import { AppComponent } from '../app/app.component';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common'
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

const routes: Routes = [
    { path: '', component: LoginComponent, pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    { path: 'home', component: AppComponent },
    { path: '**', redirectTo: 'LoginComponent' },
];

@NgModule({
    imports: [BrowserModule,
        CommonModule,
        RouterModule.forRoot(routes),
        FormsModule,
        ReactiveFormsModule
    ],
    exports: [RouterModule]
})

export class AppRoutingModule {}

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from '../app/login/login.component';
import { AppComponent } from '../app/app.component';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common'
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

const routes: Routes = [
    { path: '', component: LoginComponent, pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    { path: 'home', component: AppComponent },
    { path: '**', redirectTo: 'LoginComponent' },
];

@NgModule({
    imports: [BrowserModule,
        CommonModule,
        RouterModule.forRoot(routes),
        FormsModule,
        ReactiveFormsModule
    ],
    exports: [RouterModule]
})

export class AppRoutingModule {}

login.component.html

<body>
    <div class="container col-lg-6">
        <h1 class="text-center">Login</h1>
        <div class="card">
            <div class="card-body">
                <form class="form-group" [formGroup]="loginForm" (ngSubmit)="handleLogin()">
                    <div class="alert alert-warning" *ngIf='invalidLogin'>{{errorMessage}}</div>
                    <div class="alert alert-success" *ngIf='loginSuccess'>{{successMessage}}</div>
                    <div class="form-group">
                        <label for="email">User Name :</label>
                        <input type="text" class="form-control" formControlName="username" id="username" [ngClass]="{ 'is-invalid': submitted && l.username.errors }" placeholder="Enter User Name" name="username">
                        <div *ngIf="submitted && l.username.errors" class="invalid-feedback">
                            <div *ngIf="l.username.errors.required">User Name is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="pwd">Password:</label>
                        <input type="password" class="form-control" formControlName="password" id="password" [ngClass]="{ 'is-invalid': submitted && l.password.errors }" placeholder="Enter password" name="password">
                        <div *ngIf="submitted && l.password.errors" class="invalid-feedback">
                            <div *ngIf="l.password.errors.required">Password is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <button [disabled]="loading" class="btn btn-success">
                            <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
                            Login
                        </button>
                        <a routerLink="/register" class="btn btn-link">Register</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>

login.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
import { AuthenticationService } from './auth.service';

@Component({
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
    loginForm: FormGroup;
    username: string;
    password: string;
    errorMessage = 'Invalid Credentials';
    successMessage: string;
    invalidLogin = false;
    loginSuccess = false;
    loading = false;
    submitted = false;

    constructor(
        private formBuilder: FormBuilder,
        private route: ActivatedRoute,
        private router: Router,
        private authenticationService: AuthenticationService) {}

    ngOnInit() {
        debugger;
        this.loginForm = this.formBuilder.group({
            username: ['', Validators.required],
            password: ['', Validators.required]
        });
     }
     get l() {
         return this.loginForm.controls;
     }

     handleLogin() {
         debugger;
         this.submitted = true;

         // stop here if form is invalid
         if (this.loginForm.invalid) {
             return;
         }

         this.loading = true;
         this.authenticationService.authenticationService(this.loginForm.value).subscribe((result) => {
             debugger;
             this.loading = false;
             if (result) {
                 this.router.navigate(['/home']);
             }
         });
     }
 }

当我尝试使用ng-serve执行时，出现以下错误：

 ERROR in src / app / login / login.component.html: 6: 34 - error NG8002: Can 't bind to '
 formGroup ' since it isn'
 t a known property of 'form'.

 6 < form class = "form-group" [formGroup] = "loginForm"(ngSubmit) = "handleLogin()" >
     ~~~~~~~~~~~~~~~~~~~~~~~

     src / app / login / login.component.ts: 7: 16
 7 templateUrl: './login.component.html',
     ~~~~~~~~~~~~~~~~~~~~~~~~
     Error occurs in the template of component LoginComponent.
 src / app / login / login.component.html: 11: 94 - error NG8002: Can 't bind to '
 ngClass ' since it isn'
 t a known property of 'input'.

 11 < input type = "text"
 class = "form-control"
 formControlName = "username"
 id = "username" [ngClass] = "{ 'is-invalid': submitted && 
 l.username.errors
 }
 "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 src / app / login / login.component.ts: 7: 16
 7 templateUrl: './login.component.html',
     ~~~~~~~~~~~~~~~~~~~~~~~~
     Error occurs in the template of component LoginComponent.
 src / app / login / login.component.html: 19: 98 - error NG8002: Can 't bind to '
 ngClass ' since it isn'
 t a known property of 'input'.

 19 < input type = "password"
 class = "form-control"
 formControlName = "password"
 id = "password" [ngClass] = "{ 'is-invalid': submitted && l.password.errors }"~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

     src / app / login / login.component.ts: 7: 16
 7 templateUrl: './login.component.html',
     ~~~~~~~~~~~~~~~~~~~~~~~~
     Error occurs in the template of component LoginComponent.

Answer 1

问题是您尚未在LoginComponent中声明app.module.ts

只需在LoginComponent中声明declarations

  declarations: [
    AppComponent,
    LoginComponent==> Add this!
  ]

Answer 2

在您的login.component.ts中没有组件选择器，应该像这样：

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

另外在app.module.ts中，将LoginComponent放在declarations中。您将其放在imports中，这是不正确的。

Answer 3

问题似乎来自LoginComponent。我们可以看到您的LoginComponent的模块/组件吗？我怀疑您忘记在其中实现FormsModule和CommonModule。

它也可能来自您制作LoginComponent的方式。创建一个login.module.ts，在声明中添加LoginComponent并导出。

Answer 4

以防万一有人遇到我遇到的同样问题——那就是，我已经根据 Angular 风格指南在核心模块 (core.module.ts) 中创建了登录组件，但我忘记了（或 Angular- CLI 忽略）将其包含在 apps.module.ts 中。

这是该问题的众多症状之一，另一个是：无法绑定“ngModel”，因为它不是“div”的已知属性。

一旦我将核心模块放入应用模块中，问题就消失了。有助于解决的问题还在于问题是通过 IVY（编译器）还是通过 VSCode（TypeScript）抛出的。对我来说，我可以通过 StackOverflow 解决很多 TypeScript 问题，但是在 IVY 中编译失败。

Angular 10-无法绑定到“ formGroup”，因为它不是“ form”的已知属性

4 个答案: