Question

学习angular2

因为我想用angular来吞下systemjs-bundle，所以有些不对劲。

Angular2 versoin是2.0.0-rc.5

我很确定我错过了它的一些基本方面，但我在我的代码中找不到它。

BTW：如果我不想要gulp bundle任务，请更改html代码：

var net = require("net");
var ffi = require("ffi");
var ref = require("ref");
var getSocketHandleAddress;

var SOL_SOCKET = 0x1;
var SO_OOBINLINE = 0xA;
var _setsockopt;

if (process.platform == "win32") {
  SOL_SOCKET = 0xffff;
  SO_OOBINLINE = 0x0100;
}

var setSocketOption = function (handle, level, option, value) {
  if (!_setsockopt) {
    var library;
    var paramTypes;
    if (process.platform === "win32") {
      library = "ws2_32.dll";
      paramTypes = [
        ref.types.int,
        ref.types.int,
        ref.types.int,
        ref.refType(ref.types.void),
        ref.types.int
      ];
    } else {
      paramTypes = [
        ref.types.int,
        ref.types.int,
        ref.types.int,
        ref.refType(ref.types.void),
        ref.refType(ref.types.int)
      ];
    }
    var lib = new ffi.DynamicLibrary(library);
    _setsockopt = ffi.ForeignFunction(
      lib.get("setsockopt"),
      ref.types.int,
      paramTypes);
  }
  var refType;
  var length;
  if (typeof value === "boolean") {
    refType = ref.types.bool;
  } else {
    refType = ref.types.int;
  }
  if (process.platform !== "win32") {
    return _setsockopt(
      handle.fd, 
      level, 
      option, 
      ref.alloc(refType, value), 
      ref.alloc(ref.types.int, refType.size)
    );
  }
  if (!getSocketHandleAddress) {
    getSocketHandleAddress = require("getsockethandleaddress");
  }
  return _setsockopt(
    getSocketHandleAddress.getAddress(handle),
    level,
    option,
    ref.alloc(refType, value), 
    refType.size
  );

};

var tcpserver = net.createServer(function (socket) {
  var ret = setSocketOption(socket._handle, SOL_SOCKET, SO_OOBINLINE, true);
  if (ret !== 0) {
    console.error("OOB Inline socket option failed: " + ret);
  }
});

到

<script src="app/bundle.js"></script>

一切都很好，并将其解决。

所以我认为gulp bundle任务有问题。

这是一条错误消息

 <script>
  System.import('app').catch(function(err){ console.error(err); });
</script>

这是主要的源代码

HTML：

nhandled Promise rejection: EXCEPTION: Error in ./AppComponent class AppComponent_Host - inline template:0:0

bundle.js Error: The selector "my-app" did not match any elements

system.config.js

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
    
    <!-- 2. Configure SystemJS -->
    <script src="libs/vendors.min.js"></script>
    <script src="app/bundle.js"></script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

gulpfile：

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'libs/@angular',
    'angular2-in-memory-web-api': 'libs/angular2-in-memory-web-api',
    'rxjs':                       'libs/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

Answer 1

移动此行：

<script src="app/bundle.js"></script>

之后：

<my-app>Loading...</my-app>

看看是否有效。

Answer 2

您不需要在脚本标记中引用您的bundle.js。你只需要System.import。我通常只是直接指向我的包文件：

System.import('app/bundle.js').catch(function(err){ console.error(err); });

angular2 system-bundler无法正常工作

2 个答案: