Angular2 ng如果在部署环境中不起作用 [英] Angular2 ngIf not working in deployment environment

问题描述

我编写了一个非常简单的小 Angular2 应用程序，用于生成练习表.但是，当我部署应用程序时，ngIf 似乎不起作用(我的 ISP 默认网络服务器或我自己的 Heroku/local 部署的 node-http-server).当我在我的开发节点服务器 (npm start) 上运行完全相同的代码库时，ngIf 按预期工作.

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...

这是相关的代码

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 中都看到了以下代码

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={}-->

所以模板正在被处理，至少在某种程度上是这样.我最好的猜测是，当我生成 bundle.js 或 dependencies.js 文件s 通过吞咽.不过，我没有通过 Chrome 开发控制台在开发或部署站点上看到任何 Javascript 错误.

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.

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

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

我使用的是 Angular2.0.0-beta.7.我的 gulp 部署管道也使用带有以下配置的 Webpack1.12.2:

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

推荐答案

感谢 @EricMartinez 的调试建议，该应用程序现在可以运行了.问题在于丑陋的 javascript 代码的重整.(我将尝试追溯在处理连接的 JavaScript 文件期间实际出错的地方.)现在，在 uglify() 中关闭重整可以解决问题，但当然我不再混淆代码了(这对我的特定实现来说不是问题).修复方法如下:

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

原来的代码是这样的

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

有关更多信息，请参阅 github 上的此问题.

See this issue on github for more.

这篇关于Angular2 ng如果在部署环境中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！