Angular2 ngIf 不能在部署环境中工作

Question

我编写了一个非常简单的 Angular2 小应用程序来生成练习表。但是，当我部署应用程序时，ngIf 似乎不起作用（我的 ISP default webserver or my own Heroku/local 部署的 node-http-server）。当我运行我的开发节点服务器 (npm start) 上完全相同的代码库时，ngIf 按预期工作。

如果有人对我如何调试它有一些指导，我将非常感激，或者如果我只是简单地做错了什么...

这是相关代码

src/template.html

Click on the top left word <span *ngIf="word">({{word}})</span><span *ngIf="!word">(&lt;click&gt;)</span>

app.ts

import {bootstrap} from 'angular2/platform/browser'
import {enableProdMode, Component} from 'angular2/core'
enableProdMode()

@Component({
  selector: 'app',
  templateUrl: 'src/template.html'
})
export class AppComponent {
  public word = '';
}

bootstrap(AppComponent)

当应用程序在本地启动时，我看到 "Click on the top left word (<click>)"（如此 plunker link 所示），但是当我部署应用程序时，我只看到 "Click on the top left word"。我之前在部署中发现了 ngFor 的类似问题。但是，我确实在 dev 和 deploy

中看到了以下代码

<!--template bindings={}-->
<!--template bindings={}-->

所以模板正在处理中，至少在某种程度上是这样。我最好的猜测是，当我通过 gulp。不过，我在开发或部署站点上没有看到任何 Javascript 错误，通过 Chrome 开发控制台。

这是我的 gulp 文件中的一些相关任务。

gulp.task('webpack', ['clean'], function() {
  return gulp.src('src/app/app.ts')
    .pipe(webpack(require('./webpack.config.js')))
    .pipe(gulp.dest('src/'));
});

gulp.task('dependencies', function() { return gulp.src(['node_modules/reflect-metadata/Reflect.js', 'node_modules/zone.js/dist/zone.js']) .pipe(concat('dependencies.js')) .pipe(uglify()) .pipe(gulp.dest('dist/')); });

我正在使用 Angular2.0.0-beta.7。我的 gulp 部署管道也使用具有以下配置的 Webpack1.12.2：

webpack.config.js

module.exports = {
  entry: './src/app/app',
  output: {
    path: __dirname + '/src', publicPath: 'src/', filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.ts']
  },
  module: {
    loaders: [{
      test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/
    }]
  }
};

Answer 1

感谢@EricMartinez 的调试建议，应用程序现在可以运行了。问题在于丑陋的 javascript 代码的修改。（我将尝试追溯在处理连接的 JavaScript 文件期间实际出了什么问题。）现在关闭 uglify() 中的重整可以解决问题，但当然我没有混淆代码不再存在（这对我的特定实现来说不是问题）。这是修复：

gulpfile.js

gulp.task('js', ['webpack'], function() {
  return gulp.src('src/bundle.js')
    .pipe(uglify({ mangle: false })) // <- added mangle option set to false
    .pipe(gulp.dest('dist/'));
});

原始代码如下所示

gulp.task('js', ['webpack'], function() {
  return gulp.src('src/bundle.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist/'));
});

有关更多信息，请参阅 github 上的 this issue。

Angular2 ngIf 不能在部署环境中工作

Angular2 ngIf not working in deployment environment

gulp

webpack

angular2-directives

angular2-template

angular