バベルES2015は、私がバベル、うなり声、browserifyとES2015源と角度2を使用しようとしているロードしないとエラー

ないと2角度。私は非常に基本的な例を試していますが、コンポーネントをテンプレートでドキュメントにロードするだけです。バベルES2015は、私がバベル、うなり声、browserifyとES2015源と角度2を使用しようとしているロードしないとエラー

ビルドの実行罰金とバンドルはエラーなしで作成されますが、ロードされた何も起こりませんし、私は、コンソールにはエラーがデバッグするのは難しいそれを作るん取得します。

私はそれを理解しようと多くの時間を費やしたと例からベースきた私は、私の設定がOKに見えたが、それは明らかに動作しない場合、私は間違って何かを得たオンライン見つけることができます。私は単にそれを見ることができません。

Package.json

{ 
    "name": "angular2-es2015-babel", 
    "version": "0.0.1", 
    "description": "angular2-es2015-babel", 
    "devDependencies": { 

    "http-server": "^0.9.0", 
    "shelljs": "^0.6.0", 

    "babel-preset-es2015": "6.9.0", 
    "babel-preset-angular2": "0.0.2", 
    "babel-plugin-transform-es2015-modules-umd": "6.8.0", 

    "grunt": "~1.0.1", 
    "grunt-babel": "6.0.0", 
    "grunt-browserify": "4.0.1" 
    }, 
    "dependencies": { 

    "@angular/common": "2.0.0-rc.2", 
    "@angular/compiler": "2.0.0-rc.2", 
    "@angular/core": "2.0.0-rc.2", 
    "@angular/http": "2.0.0-rc.2", 
    "@angular/platform-browser": "2.0.0-rc.2", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.2", 
    "@angular/router": "2.0.0-rc.2", 
    "@angular/router-deprecated": "2.0.0-rc.2", 
    "@angular/upgrade": "2.0.0-rc.2", 

    "core-js": "^2.4.0", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.6", 
    "zone.js": "^0.6.12" 
    }, 
    "scripts": { 

    "prestart": "npm install && grunt", 
    "start": "http-server -a localhost -p 8000 -c-1 ./", 
    "preupdate-webdriver": "npm install", 
    "update-webdriver": "webdriver-manager update", 
    "preprotractor": "npm run update-webdriver", 
    "protractor": "protractor test/protractor.conf.js" 
    } 
}

Gruntfile.js

module.exports = function(grunt) { 

    var tasks = ["babel", "browserify"]; 

    grunt.initConfig({ 
     pkg: grunt.file.readJSON("package.json"), 
     babel: { 
      options: { 
       presets: ["es2015", "angular2"], 
       plugins: ["babel-plugin-transform-es2015-modules-umd"] 
      }, 
      demo: { 
       files: { 
        "app.babel.js": "app.js" 
       } 
      } 
     }, 
     browserify: { 
      demo: { 
       files: { 
        "bundle.js": [ 
         "node_modules/core-js/client/shim.js", 
         "node_modules/zone.js/dist/zone.js", 
         "node_modules/reflect-metadata/Reflect.js", 
         "node_modules/@angular/*/bundles/*.umd.js", 
         "app.babel.js" 
        ] 
       } 
      } 
     } 
    }); 

    grunt.loadNpmTasks("grunt-browserify"); 
    grunt.loadNpmTasks("grunt-babel"); 

    grunt.registerTask("default", tasks); 
};

app.js

import { Component } from "@angular/core"; 

@Component({ 
    selector: "my-app", 
    template: "<p>It works!</p>" 
}) 

export class AppComponent { 

}

index.htmlを

<!DOCTYPE html> 
<html> 
<body> 
    <my-app>Loading...</my-app> 
    <script src="bundle.js"></script> 
</body> 
</html>

私はこの簡単なデモ走行を行うために欠けているのですか？

出典

2016-06-16 GillesC

あなたの角度のアプリコンポーネントをブートストラップする必要があなたの角度2のアプリケーションを動作させるために。あなたの迅速な応答を

コード

import { Component } from "@angular/core"; 
import { bootstrap } from '@angular/platform-browser-dynamic'; //added import 

@Component({ 
    selector: "my-app", 
    template: "<p>It works!</p>" 
}) 

export class AppComponent { 

} 

bootstrap(AppComponent); //bootstrap application here

出典

2016-06-16 16:55:17

感謝。今すぐ動作します:)私はブートストラップを試しましたが、それをインポートするのを忘れて、未定義のエラーが発生しました！ – GillesC

@GillesC私も私の答えを更新しました、ありがとう:) –

バベルES2015は、私がバベル、うなり声、browserifyとES2015源と角度2を使用しようとしているロードしないとエラー

答えて

関連する問題