Angular2 ngIf not working in deployment environment

Question

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

Hard to say. But why are you bundling Reflect and zone? angular2-polyfills bundle already contain both of them, you're redoing it. — Eric Martinez, Feb 24 '16 at 21:09
Glad you picked that up @EricMartinez, that's just an oversight on my part. Of course it doesn't help solve the problem, but it will eventually lead to a cleaner app;-) — carnun, Feb 24 '16 at 21:44
@EricMartinez here's a link to the app - https://sudo-words.herokuapp.com/. The relevant code is on the blue modal at the start. — carnun, Feb 25 '16 at 05:02
To be honest it's impossible to say, there's nothing to see really. I saw though that you're not using the same version in your heroku page (you have references to trackBy that was added in beta.3). Have you tried without minifying? Have you tried using beta.0 in your heroku page? — Eric Martinez, Feb 25 '16 at 11:22

score 5 · Accepted Answer · edited Aug 20 '16 at 05:54

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.

Angular2 ngIf not working in deployment environment

1 Answers1

Linked