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.
我正在尝试使用带有babel,grunt,browserify和ES2015源的角度2。我正在尝试一个非常基本的例子,只需将带有模板的组件加载到我的文档中。
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?
这个简单的演示运行我错过了什么?
1 个解决方案
#1
2
To make your Angular 2 application work you need to bootstrap your Angular app component.
要使Angular 2应用程序正常工作,您需要引导Angular应用程序组件。
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
#1
2
To make your Angular 2 application work you need to bootstrap your Angular app component.
要使Angular 2应用程序正常工作,您需要引导Angular应用程序组件。
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