2

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

如果有人对我如何调试有一些指导，我将非常感激，或者如果我只是做错了什么......

这是相关代码

src/template.html

Click on the top left word <span *ngIf="word">({{word}})</span><span *ngIf="!word">(&lt;click&gt;)</span>

应用程序.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={}-->

所以模板正在被处理，至少在某种程度上是这样。我最好的猜测是，当我通过gulp生成bundle.js ordependencies.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/
    }]
  }
};
4

1 回答 1

5

感谢@EricMartinez 的调试建议，该应用程序现在可以运行了。问题在于丑陋的 javascript 代码的修改。（我将尝试追溯在处理连接的 JavaScript 文件过程中实际出了什么问题。）现在，在 uglify() 中关闭 mangling 可以解决问题，但当然我不再对代码有任何模糊（这对我的特定实现来说不是问题）。这是修复：

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 上的此问题。

于 2016-02-25T19:38:18.910 回答