Angular2 ngIf not working in deployment environment

问题

I've written a very simple little Angular2 app that I've built to generate exercise sheets. However it seems that when I deploy the app ngIf doesn't work (either my ISP default webserver or my own Heroku/local deployed node-http-server). When I run the exact same code base on my dev node server (npm start) ngIf works as expected.

If anyone has some guidance on how I can debug this I would be extremely grateful, or if I'm just plain doing something wrong...

Here's the relevant code

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)

When the app starts locally I see "Click on the top left word (<click>)" (as seen in this plunker link), however when I deploy the app I just see "Click on the top left word". I have previously found similar issues with ngFor in deployment. I do however see the following code in both dev and deploy

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

so the template is being processed, at least to some extent. My best guess is that something must be going wrong when I generate the bundle.js or dependencies.js files through gulp. I don't see any Javascript errors on the dev or deploy site via Chrome dev console though.

Here are some of the relevant tasks from my 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/'));
});

I'm using Angular2.0.0-beta.7. My gulp deployment pipeline also uses Webpack1.12.2 with the following config:

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/
    }]
  }
};

回答1:

Thanks to @EricMartinez's debug suggestion the app now works. The problem lies with the mangling of the uglified javascript code. (I'll try and trace back what actually goes wrong during the processing of the concatenated JavaScript file.) For now turning the mangling off in uglify() does the trick, but of course I don't have obscuration of the code anymore (which isn't an issue for my particular implementation). Here's the fix:

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/'));
});

The original code looked like this

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

See this issue on github for more.

来源：https://stackoverflow.com/questions/35612100/angular2-ngif-not-working-in-deployment-environment