1

Angular2 アプリのリリース バージョンを使用するようにアプリをアップグレードしました。正常に動作しますが、バンドルされたファイルからアプリを実行すると問題が発生します。gulp を使用して、テンプレートも埋め込まれた単一の Javascript ファイルにアプリをバンドルします。Angular2 RC4 を使用してアプリのバンドル バージョンを正常に実行しましたが、リリース バージョンでは"No provider for AppConfig". AppConfig は私のクラスの 1 つであり、app.module.ts によって提供されます。

どんな助けでも大歓迎です。

gulpfile.js

var basePath = "xxxxxxxxxxxxxxx";
var del = require("del");

var gulp = require("gulp");
var rename = require("gulp-rename");
var uglify = require('gulp-uglify');
var tsc = require("gulp-typescript");
var tsProject = tsc.createProject("tsconfig.json");

var embedTemplates = require("gulp-angular-embed-templates");
var SystemBuilder = require("systemjs-builder");

//Inline templates & transpile into js
gulp.task("js:build", function () {
  return gulp.src("app/**/*.ts", { base: "./app" })
      .pipe(embedTemplates({
        sourceType: "ts",
        basePath: basePath,
        minimize: {
          empty: true,
          quotes: true,
          spare: true
        }
      })) 
      .pipe(tsc(tsProject))
      .js
      .pipe(gulp.dest("build/js"));
});

//Bundle JS files into one file
gulp.task("js:bundle", ["js:build"], function () {
  var builder = new SystemBuilder("build/js", {
    paths: {
      "*": "*.js"
    },
    meta: {
      "@angular/*": {
        build: false
      },
      "rxjs/*": {
        build: false
      }
    }
  });

  return builder.bundle("main", "js/app.bundle.js", { minify: false, mangle: false });
});


gulp.task("js:build:clean", ["js:min"], function () {
  return del([
    "build/js/**/*"
  ]);
});

gulp.task("js:min", ["js:bundle"], function () {
  return gulp.src("js/app.bundle.js")
      .pipe(rename("app.bundle.min.js"))
      .pipe(uglify({ mangle: false }))
      .pipe(gulp.dest("./js/"));
});

gulp.task("ts:clean", function () {
  return del([
    "./app/**/*.js", "./app/**/*.map", "!./app/ng2-file-upload/**/*"
  ]);
});

systemjs.config.js

(function (global) {
  var defaultExtension = "js";

  var map = {
    "app": "/app",
    "@angular": "node_modules/@angular",
    "angular2-in-memory-web-api": "node_modules/angular2-in-memory-web-api"
    ,"rxjs": "node_modules/rxjs"
  };

  var packages = {
    "app": { main: "main.js", defaultExtension: defaultExtension },
    "angular2-in-memory-web-api": { main: "index.js", defaultExtension: defaultExtension }
    ,"rxjs": { defaultExtension: defaultExtension }, 
  };
  var ngPackageNames = [
    "common",
    "compiler",
    "core",
    "forms",
    "http",
    "platform-browser",
    "platform-browser-dynamic",
    "router",
    "upgrade",
  ];

  function packUmd(pkgName) {
    packages["@angular/" + pkgName] = { main: "bundles/" + pkgName + ".umd.min.js", defaultExtension: defaultExtension }; ///bundles/
  }

  var setPackageConfig = packUmd;

  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);

  var config = {
    bundles: { "/js/app.bundle.min.js?t=@Model.JsFileVersionModifier":  ["main"] },
    map: map,
    packages: packages
  };

  System.config(config);
})(this);

index.html からのスクリプト

window["app.config"] = config;

var runApp = function(m) {
    m.RunApplication(config);
}

System.import(toImport).then(runApp, console.error.bind(console));

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from "./app.module";

export function RunApplication() {
  const platform = platformBrowserDynamic();
  platform.bootstrapModule(AppModule);
}
4

0 に答える 0