Question

我已经编写了一个非常简单的小Angular2应用程序，我已经构建了它来生成练习表。但是，当我部署应用程序时，似乎没有工作（我的ISP default webserver或我自己的Heroku /本地部署的节点-http-server）。当我在我的开发节点服务器（npm start）上运行完全相同的代码库时，ngIf按预期工作。

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

这是相关代码

的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)

当应用程序在本地启动时，我会看到＆＃34;单击左上角的单词（＆lt; click＆gt;）＆＃34; （如此plunker link中所示），但是当我部署应用程序时，我只看到＆＃34;单击左上角的单词＆＃34;。我以前在部署中发现了与ngFor类似的问题。但是，我确实在dev和deploy中看到了以下代码

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

所以模板正在被处理，至少在某种程度上。我最好的猜测是，当我通过gulp生成bundle.js ~~或dependencies.js~~ 文件 s 时，一定会出错。我通过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/
    }]
  }
};

Answer 1

感谢@ EricMartinez的调试建议，该应用程序现在可以运行。问题在于uglified javascript代码的破坏。（我会尝试并追溯在连接的JavaScript文件处理过程中出现的问题。）现在，在uglify（）中关闭修改工具可以解决问题，但当然我没有掩饰代码了（这对我的特定实现来说不是问题）。这是修复：

<强> 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上的this issue。

Angular2 ng如果在部署环境中不起作用

1 个答案: