Свойство Angular 6 в форме не существует - PullRequest
0 голосов
/ 07 февраля 2019

Я строю угловое приложение, в котором я использовал угловые формы.Он хорошо работает на угловых 5, а также на угловых 6. Но когда я собираюсь развернуть его с помощью ng build -prod, он выдает ошибки

enter image description here

Здесьмой код для логинакомпонента

<form class="md-float-material form-material" [formGroup]="loginForm" (ngSubmit)="onSubmit()">
    <div class="text-center">
        <img src="../../assets/images/logo.png" alt="logo.png">
    </div>
    <div class="auth-box card">
        <div class="card-block">
            <div class="row m-b-20">
                <div class="col-md-12">
                    <h3 class="text-center">User Login</h3>
                </div>
            </div>
            <div class="form-group form-primary">
                <label for="username">Username</label>
                <input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
                <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
                    <div *ngIf="f.username.errors.required">Username is required</div>
                </div>
            </div>
            <div class="form-group form-primary">
                <label for="password">Password</label>
                <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
                <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
                    <div *ngIf="f.password.errors.required">Password is required</div>
                </div>
            </div>
            <div class="form-group form-primary">
                <button class="btn btn-primary btn-md btn-block waves-effect waves-light text-center m-b-20">Login</button>
            </div>
            <div class="row">
                <div class="col-md-2">
                    <img src="../../assets/images/Logo-small-bottom.png" alt="small-logo.png">
                </div>
            </div>
        </div>
    </div>
</form>

А вот код TS

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AlertService, UserService } from '../_services';

@Component({ templateUrl: 'login.component.html' })
export class LoginComponent implements OnInit {
    loginForm: FormGroup;
    returnUrl: string;
    selectedValue: 'observer';

    constructor(
        public formBuilder: FormBuilder,
        public route: ActivatedRoute,
        public router: Router,
        public userService: UserService,
        public alertService: AlertService) { }

    public ngOnInit() {
        this.loginForm = this.formBuilder.group({
            username: ['', Validators.required],
            password: ['', Validators.required],
        });

        this.userService.logout();

        this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
    }

    get f() { return this.loginForm.controls; }

    public onSubmit() {

        if (this.loginForm.invalid) {
            return;
        }


        this.userService.login(this.loginForm.value)
            .subscribe(
                response => {
                    this.alertService.success('User Authenticated', true);
                },
                error => this.alertService.error(error, false)
            );
    }
}

1 Ответ

0 голосов
/ 07 февраля 2019

Эта ошибка является результатом компиляции AoT (Ahead of Time).

Причина, по которой эти ошибки не отображаются при запуске "ng serve", заключается в том, что ng serve выполняет компиляцию JiT (Just in Time).

В компиляции AoTВы должны объявить каждый метод / переменную вместе со многими другими вещами.

Как только вы определили отсутствующие переменные (такие как отправленные в LoginComponent) в вашем ts, эти ошибки исчезнут.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...