Angular ng build --prod不会在代码中引发错误（但Language Services会发生错误）

Question

我们有一个相当大的Angular应用程序-通过更改，我前几天发现了一个错误。不幸的是， ng build --prod 在编译期间不会引发任何错误。我创建了一个小示例来重现它。

这是一个简单的界面TestInterface和一个组件AppComponent。该接口具有一个属性：propertyExists。组件具有定义为test-的公共属性TestInterface，构造函数将propertyExists设置为true。很简单。

export interface TestInterface {
  propertyExists: boolean;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  test: TestInterface;
  constructor() {
    this.test = {
      propertyExists: true
    };
  }
}

该模板有两个段落，分别显示界面中未定义的propertyExists属性和propertyDoesNotExist属性。最后一段具有*ngIf条件。

<p>
  Property exists: {{ test.propertyExists }}
</p>
<p *ngIf="true">
  Property does not exist: {{ test.propertyDoesNotExist }}
</p>

如果我使用 ng build --prod 进行构建，则该应用程序的构建非常漂亮-即使我们引用了未定义的属性，也不会出现错误或警告或其他任何内容。

如果我从模板中删除*ngIf条件，如

<p>
Property does not exist: {{ test.propertyDoesNotExist }}
</p>

并再次使用 ng build --prod 进行编译，编译停止并抛出

ERROR in src\app\app.component.html(5,7): : Property 'propertyDoesNotExist'
does not exist on type 'TestInterface'.

我尝试了各种技巧和严格模式-但结果是相同的。奇怪的是我将VS Code与Angular Language Services扩展一起使用-并将该行标记为错误：

并且有正确的错误

Identifier 'propertyDoesNotExist' is not defined. 'TestInterface' does not 
contain such a member(undefined)

有人对此有解释/建议吗？

编辑

我的具体问题不太清楚。具体问题是：如果在父标记上设置了*ngIf=""，为什么 ng build --prod 不会在模板中抛出错误？

答案

在DrFreeze的编辑评论中，我通过在tsconfig.json中添加一个角度编译器参数来解决该问题：

"angularCompilerOptions": {
  "fullTemplateTypeCheck": true
}

在此处找到文档：https://angular.io/guide/aot-compiler#fulltemplatetypecheck

Answer 1

您要访问的属性未在界面中定义。您最简单的解决方案是使用：

<p>
   Property does not exist: {{ !test.propertyExists }}
</p>

如果这两个属性之间没有逻辑关系，另一种方法是制作一个扩展该接口的类

export class testClass implements TestInterface {
   constructor(public propertyExists: boolean){ }
}

export interface extendedInterface extends TestInterface {
    propertyDoesNotExist: boolean;
}

export class someClass extends testClass{
   propertyDoesNotExist: boolean;

   constructor(options: extendedInterface) { 
       super(options);
       this.propertyDoesNotExist = options.propertyDoesNotExist;
   }
}

编辑：根据dmoore1181注释，如果您在版本6以下使用Angular，则可以是Issue。参见Can I make the Angular Compiler throw an error when a non-existing property is bound?

Answer 2

在界面中

添加 propertyDoesNotExist

export interface TestInterface {
  propertyExists: boolean;
  propertyDoesNotExist : boolean;
}

完成此操作后 ng build --prod ，它可以正常工作:)