почему выдает ошибку при сборке проекта в angular 6?

Question

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

Home.Component.ts import {Component, OnInit} из '@ angular / core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  src: HTMLImageElement; 
  constructor() { }

  ngOnInit() {

  }

}

Home.component.html

<section class="featured-lis">
    <div class="container padding_zero">
        <div class="row">
            <div class="col-md-12">
                <div class="jumbotron custom_ads">
                    <img [src]="src/assets/images/ads/ad1.png" alt="">
                </div>
            </div>
        </div>
    </div>

</section>


    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-6 col-lg-4">
                <div class="single-cta">
                    <div class="cta-icon">
                        <i class="lni-grid"></i>
                    </div>
                    <h4>Refreshing Design</h4>
                    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie</p>
                </div>
            </div>
            <div class="col-xs-12 col-md-6 col-lg-4">
                <div class="single-cta">
                    <div class="cta-icon">
                        <i class="lni-brush"></i>
                    </div>
                    <h4>Easy to Customize</h4>
                    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie</p>
                </div>
            </div>
            <div class="col-xs-12 col-md-6 col-lg-4">
                <div class="single-cta">
                    <div class="cta-icon">
                        <i class="lni-headphone-alt"></i>
                    </div>
                    <h4>24/7 Support</h4>
                    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie</p>
                </div>
            </div>
        </div>
    </div>
</section>
<app-footer></app-footer>

Answer 1

Изменение

<img [src]="src/assets/images/ads/ad1.png" alt="">

до

<img [src]="'src/assets/images/ads/ad1.png'" alt="">

или даже

<img src="src/assets/images/ads/ad1.png" alt="">

И все подобные вопросы.

Answer 2

Такая ошибка может возникнуть, если вы пытаетесь получить доступ к свойствам класса, которые не были объявлены должным образом.

Например, если у вас есть такой компонент (упрощенный синтаксис):

export class HomeComponent implements OnInit {
    constructor() {}

    ngOninit() {}
}

И в его файле component.html вы пытаетесь получить доступ к некоторым не объявленным свойствам, например:

<div>{{ads}}</div>

Это не позволит вам правильно построить проект.

Чтобы исправить это, объявите все свойства, которые вы используете в классе компонента:

export class HomeComponent implements OnInit {
        ads: any;
        src: any;
        assets: any;  // and other....

        constructor() {}

        ngOninit() {}
        ... further code of your component
}