本文介绍了带有babel ES2015的Angular 2无法加载并且没有错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用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-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
}，
脚本：{
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-browser-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无法加载并且没有错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！