文章/答案/技术大牛

发布

社区首页 >问答首页 >ES2015无加载，无误差的角度2

问ES2015无加载，无误差的角度2
EN

Stack Overflow用户

提问于 2016-06-16 16:53:00

回答 1查看 732关注 0票数 1

我试图使用的角度2与巴贝尔，咕噜，褐化和ES2015的来源。我正在尝试一个非常基本的示例，简单地将一个组件及其模板加载到我的文档中。

构建运行良好，并且没有错误地创建包，但是当加载时，什么都不会发生，而且我在控制台中没有错误，这使得调试很困难。

我花了很多时间试图找出它，根据我可以在网上找到的例子，我的配置似乎还好，但如果它不能明显地工作，我搞错了。我根本看不见。

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>

为了让这个简单的演示运行，我遗漏了什么？

babeljs

javascript

angular

gruntjs

browserify

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-06-16 16:55:17

要使您的角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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37865122

复制

相似问题

问ES2015无加载，无误差的角度2
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ES2015无加载，无误差的角度2EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ES2015无加载，无误差的角度2
EN