2

演習シートを生成するために構築した、非常に単純な小さな Angular2 アプリを作成しました。ただし、アプリ ngIf をデプロイすると機能しないようです ( ISP のデフォルト Web サーバーまたは自分の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>

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>)」と表示されます (このプランカー リンクに表示されているように)。ただし、アプリをデプロイすると、「左上の単語をクリックします」と表示されます。私は以前、デプロイメントでの 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() でマングリングをオフにするとうまくいきますが、もちろん、コードが不明瞭になることはもうありません (これは私の特定の実装の問題ではありません)。修正は次のとおりです。

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 に答える