是什么阻止了我的 AngularJs 2 应用程序运行检查器中显示的命令？答案

【问题标题】：What prevents my AngularJs 2 application from running the commands shown in the inspector?是什么阻止了我的 AngularJs 2 应用程序运行检查器中显示的命令？
【发布时间】：2017-06-08 06:05:51
【问题描述】：

我正在试验 Angular 2。我使用 npm start 在 Chrome 中创建实时编码环境，但我看到了不寻常的行为。

我的代码库的早期版本在文件 A.service.ts 中如下所示：

export class AService{
    constructor( private http : Http ){}
    test( valueA : string, valueB : string ){
        var dataObj = { valueA, valueB }
        console.log( dataObj );
        console.log( this.http );
    }
}

运行我的程序后，控制台会成功显示两个对象。第一个对象向我显示了值“valueA”和“valueB”，第二个对象是一个 Http 对象，它向我展示了我的服务正在正确加载，并且正在使用预期值调用该方法。为了将来参考，我们将此控制台日志模式称为“输出 A”。

我更改了我的服务定义。我改了好几次。每次保存文件的新版本时，应用程序都会自行重新加载。在每个版本中，我都尝试将代码和控制台输出添加到服务对象测试方法中。但是，在每次迭代中，只会出现“输出 A”。

我删除了测试方法的所有原始行，我再次运行代码，仍然看到“输出A”。

我在检查器中跟踪代码执行，检查器带我逐行浏览新代码，现在看起来像这样：

export class AService{
    constructor( private http : Http ){}
    test( valueA : string, valueB : string ){
        console.log( "Testing AService. Method called successfully.");
    }
}

调试行告诉我，执行的下一个命令应该将字符串“Testing AService...”记录到控制台，但不是这个，而是我之前实现的“输出 A”。我检查了 .ts 文件，检查了 .js 文件，并且都显示了新的代码库。 Chrome 显示新代码库，但控制台正在接收来自旧代码库的日志消息。

我已经使用 Ctrl-C 关闭 npm，并再次调用npm start，仍然看到旧代码库的输出......

这真的让我很困惑！对可能发生的事情有任何想法吗？

清除浏览器缓存并重启系统后的屏幕截图：

更新

重启系统并清除所有缓存后，我再次搜索所有 .js 文件，发现我的原始代码库实际上在 .js 文件中。我的问题的答案似乎在于删除这些文件，然后重新启动 NPM.... 在监视模式下运行 TSC 应用程序时，有些东西阻止 NPM 覆盖 JavaScript 文件。

【问题讨论】：

您可能需要重新启动 npm start 中运行的任何内容，并清除 Web 浏览器的缓存并清除生成的文件（这将有助于了解您是否使用 webpack 或其他方式捆绑生成的文件）
如果我使用 webpack 或其他文件捆绑器，我会在不知不觉中这样做。根据您的建议，我已将所有值类型的浏览器缓存“清空”。我已经关闭了 npm 服务器、Chrome 浏览器和 IDE，并且我也重新启动了计算机。尽管如此，我还是看到了旧代码库的输出，它不再存在于可见文件中。
我可以在上周末补充一点，我将 package.json 文件更改为具有以下设置：{ "scripts: { "start": "concurrently \"npm run tsc:w \" \"npm run lite\" ... } }.... 这是在另一篇文章建议对“npm start”命令进行此更改以避免第二次、第三次和第四次发生致命错误之后完成的我会尝试使用 'npm start' 运行 Quickstart-seed package.json 文件。新脚本将“并发”标识符移动到命令行的开头。

标签： node.js angular typescript

【解决方案1】：

我的问题的答案似乎在于删除这些文件，然后重新启动 NPM.... 在监视模式下运行 TSC 应用程序时，有些东西阻止了 NPM 覆盖 JavaScript 文件。

查看原始问题的更新。

【讨论】：