带有babel ES2015的Angular 2无法加载并且没有错误 [英] Angular 2 with babel ES2015 not loading and no error

问题描述

我正在尝试使用babel，grunt，browserify和ES2015来源的角度2。我正在尝试一个简单的加载组件的模板到我的文档中的基本示例。

构建运行正常，并且创建的包没有错误，但是当加载没有任何反应，我在控制台中没有任何错误，因此很难进行调试。

我花了很多时间试图弄明白，并且基于我可能的例子在网上找到我的配置似乎没问题，但如果它不工作清楚我有什么问题。我根本看不到它。

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-b​​rowser：2.0.0-rc.2，
@ angular / platform-b​​rowser-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
}，
脚本：{
 
prestart：npm install&& grunt，
start：http-server -a localhost -p 8000 -c-1 ./，
preupdate-webdriver：npm install，
更新-webdriver：webdriver-manager update，
preprotractor：npm run update-webdriver，
量角器：量角器测试/ 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]，
插件：[babel-plugin-transform-es2015-modules-umd] 
}，
演示：{
 files： {
app.babel.js：app.js
} 
} 
}，
 browserify：{
 demo：{
文件：{
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

 从@ angular / core导入{Component}; 
 
 @Component（{
 selector：my-app，
 template：< p> It works！< / p>
}） 
 
导出类AppComponent {
 
} 
  

index.html

 <！DOCTYPE html> 
< html> 
< body> 
< my-app>正在加载...< / my-app> 
< script src =bundle.js>< / script> 
< / body> 
< / html> 
  

我缺少什么让这个简单演示运行？

$ b

 从@ angular / core导入{Component}; 
从'@ angular / platform-b​​rowser-dynamic'导入{bootstrap}; //添加了导入
 
 @Component（{
选择器：my-app，
模板：< p> It works！< / p>
 $）
 
导出类AppComponent {
 
} 
 
 bootstrap（AppComponent）; // bootstrap application here 
  

I'm trying to use angular 2 with babel, grunt, browserify and ES2015 sources. I'm trying a very basic example of simply loading a component with its template into my document.

The build run fine and the bundle is created with no error but when loaded nothing happens and I get no error in the console making it hard to debug.

I've spent a lot of time trying to figure it out and based from examples I could find online my configuration seemed ok but if it doesn't work clearly I got something wrong. I simply cannot see it.

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>

What am I missing to make this simple demo run?

解决方案

To make your Angular 2 application work you need to bootstrap your Angular app component.

Code

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

这篇关于带有babel ES2015的Angular 2无法加载并且没有错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！