Angular2 ngIf不是在部署环境中工作 [英] Angular2 ngIf not working in deployment environment

问题描述

我写我建立的生成练习表一个非常简单的小Angular2应用程序。但是看来，当我部署的应用程序ngIf不工作（无论是我的 ISP默认的Web服务器还是我自己 Heroku的 /本地部署的节点HTTP服务器）。当我在我的dev的节点服务器上运行完全一样的code基（ NPM启动）ngIf按预期工作。

如果任何人有我怎么能调试此我将非常感谢，或者一些指导，如果我只是普通做错了什么......

下面是有关的code

的src / template.html

 点击左上角字LT;跨度* ngIf =字＆GT;（{{字}}）LT; / SPAN＆GT;＆LT;！跨度* ngIf =字＆GT;（放大器; LT;单击＆放大器; GT;）＆LT; / SPAN＆GT;
 

app.ts

 从'angular2 /平台/浏览器的进口{}引导
进口{enableProdMode，组件}从'angular2 /核心
enableProdMode（）@零件（{
  选择：应用程序，
  templateUrl：'SRC / template.html
}）
出口类AppComponent {
  公共字='';
}引导（AppComponent）
 

当应用程序在本地启动之我见，点击左上角字（小于点击＆GT;）（如被看见在此的 plunker链接），但是当我部署应用程序，我只看到点击左上角词。我有previously发现了类似的问题，与ngFor部署。然而，我看到两个dev目录下code和部署

 ＆LT;！ - 模板绑定= {}  - ＆GT;
＆LT;！ - 模板绑定= {}  - ＆GT;
 

所以模板被处理，至少到一定程度。我最好的猜测是说一定是想错了，当我生成 bundle.js <击>或 dependencies.js 文件<击>取值通过一饮而尽。我没有看到在开发任何JavaScript错误或通过Chrome的开发者控制台部署，虽然现场。

下面是一些相关任务从我gulpfile。

  gulp.task（'的WebPack'，['干净']，函数（）{
  返回gulp.src（'SRC /应用/ app.ts'）
    .pipe（的WebPack（要求（'./ webpack.config.js'）））
    .pipe（gulp.dest（'SRC /'））;
}）;
 

<击>

  gulp.task（'依赖'，函数（）{
  返回gulp.src（['node_modules /反映的元数据/ Reflect.js'，
                   node_modules / zone.js /距离/ zone.js']）
    .pipe（CONCAT（'dependencies.js'））
    .pipe（丑化（））
    .pipe（gulp.dest（'DIST /'））;
}）;
 

我使用Angular2.0.0-beta.7。我一饮而尽部署管道也使用Webpack1.12.2具有以下配置：

webpack.config.js

  module.exports = {
  项：./src/app/app'，
  输出：{
    路径：__dirname +'/ src'中，publicPath：'SRC /，文件名：bundle.js
  }，
  解析：{
    扩展：[''，'.js文件'，'.TS']
  }，
  模块：{
    装载机：[{
      测试：/\\.ts/，装载机：['TS-装载机']，排除：/ node_modules /
    }]
  }
};
 

解决方案

感谢@ EricMartinez的调试建议应用程序现在工作。问题出在JavaScript的变丑code的截断。 （我会试着级联JavaScript文件的处理过程中追溯究竟出了问题。）现在转向在丑化重整关（）的伎俩，但我当然没有$ C $的遮蔽ç了（这是不是我的具体实现中的问题）。这里的修复：

gulpfile.js

  gulp.task（'JS'，['的WebPack']，函数（）{
  返回gulp.src（'SRC / bundle.js'）
    .pipe（丑化（{
            轧：假的
          }））
    .pipe（gulp.dest（'DIST /'））;
}）;
 

原来的code看上去像这样

  gulp.task（'JS'，['的WebPack']，函数（）{
  返回gulp.src（'SRC / bundle.js'）
    .pipe（丑化（））
    .pipe（gulp.dest（'DIST /'））;
}）;
 

请参阅在github上这个问题了解。

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

解决方案

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
          }))
    .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不是在部署环境中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！