如何判断我的应用程序从 angular 2 升级到 angular 4 是否成功？答案

【问题标题】：How can I tell if my app upgrade from angular 2 to angular 4 was successful?如何判断我的应用程序从 angular 2 升级到 angular 4 是否成功？
【发布时间】：2017-12-12 01:38:11
【问题描述】：

我有一个使用 Angular 2 的 .NET WebAPI 应用程序，并决定升级到 Angular 4。

我在项目目录的 cmd 中经历了类似以下的事情（以及安装缺少的依赖项的几次迭代）：

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

我最近通过 CLI 将我的 angular 应用程序从 angular 2 更新到 angular 4。现在，有没有办法让我确认我的应用程序实际上使用的是 angular 4 而不是 2？

如果我在直接拥有我的项目的 cmd 行中输入“ng --version”，那么我会得到以下结果：

@angular/cli: 1.2.0
node: 6.10.2
os: win32 x64
@angular/animations: 4.2.5
@angular/common: 4.2.5
@angular/compiler: 4.2.5
@angular/compiler-cli: 4.2.5
@angular/core: 4.2.5
@angular/forms: 4.2.5
@angular/http: 4.2.5
@angular/platform-browser: 4.2.5
@angular/platform-browser-dynamic: 4.2.5
@angular/platform-server: 4.2.5
@angular/router: 4.2.5
@angular/cli: 1.2.0

如果我运行我的应用程序并查看浏览器开发人员工具，我会在 DOM 资源管理器中看到：

<html>
<body>
    <my-app ng-version="2.4.8" _nghost-vrp-0=""> 
... other stuff that isn't important
</html>
</body>

所以看起来我的应用说 ng-version ="2.4.8" 但是我的 CLI 说的不同吗？我升级成功了吗，如果是，为什么浏览器开发者工具里的 DOM 说的不一样？

同样，这是一个使用 angular 2 的 .NET WebAPI 应用程序。

【问题讨论】：

标签： .net angular asp.net-web-api npm

【解决方案1】：

您总是可以尝试一些热门的 angular4 新功能，看看它是否有效，或者看看它是否可以使用 ng build --prod --aot 进行编译

 <div *ngIf="userList | async as users; else loading">
  <user-profile *ngFor="let user of users; count as count; index as i" [user]="user">
User {{i}} of {{count}}
  </user-profile>
</div>
<ng-template #loading>Loading...</ng-template>

【讨论】：

该代码是否应该在 HTML 中按原样工作而没有添加到组件中？它不起作用：未处理的承诺拒绝：模板解析错误：无法绑定到“用户”，因为它不是“用户配置文件”的已知属性......我猜这意味着我在应用程序上没有 Angular 4 ?
您需要将正确的对象绑定到 ts 文件。这只是 Angular 给出的关于 ngIfs 和 ngFors 新语法的示例
您有该文档的链接吗？我想通过它并尝试您的建议
当然，它是从这里提取的angularjs.blogspot.com/2017/03/angular-400-now-available.html 你可以在文档中的某个地方做一个更简单的 angular 4 示例。 ngFor 的东西真的很酷。这是一个不错的教程youtube.com/watch?v=K5G-9tJTces
原来我的应用程序升级到了 Angular 4。这是一个没有清除我的缓存的问题，所以它显示为 2.x 而不是 4.x。现在它正确显示了正确的版本，并且 Angular 4 语法工作正常。

【解决方案2】：

原来我的应用已升级到 Angular 4。这是未清除缓存的问题，因此显示为 2.x 而不是 4.x。现在它正确显示了正确的版本，并且 Angular 4 语法工作正常。

【讨论】：