Angular2 ng如果在部署环境中不起作用

Question

我写了一个非常简单的小Angular2应用程序,我已经构建它来生成练习表.但是,当我部署应用程序时,ngIf似乎不起作用(我的ISP默认网络服务器或我自己的Heroku /本地部署的节点-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>)"(如此plunker链接中所示),但是当我部署应用程序时,我只看到"单击左上角的单词".我以前在部署中发现了与ngFor类似的问题.但是我确实在dev和deploy中看到了以下代码

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

所以模板正在被处理,至少在某种程度上.我最好的猜测是说一定是想错了,当我生成bundle.js 或dependencies.js文件小号通过一饮而尽.我通过Chrome开发者控制台在开发或部署网站上看不到任何Javascript错误.

以下是我的gulpfile中的一些相关任务.

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的调试建议,该应用程序现在可以使用了.问题在于uglified 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上的此问题.