shuhei / babel-angular2-app Goto Github PK

View Code? Open in Web Editor NEW

259.0 27.0 55.0 70 KB

A super-simple skeleton Angular 2 app built with Babel and Browserify.

HTML 3.22% JavaScript 96.78%

babel-angular2-app's Introduction

Build Angular 2 app with Babel

A skeleton Angular 2 app built with Babel and Browserify.

Uses Babel instead of TypeScript/Traceur.
Supports class/parameter decorators and parameter type annotations with Babel, babel-plugin-transform-decorators-legacy and babel-plugin-angular2-annotations.
Bundles JavaScript files into one file with Browserify. (However, it doesn't use any Browserify-specific technology. You can easily switch to Webpack and etc.)

Try

Install

Clone/fork this repo and:

npm install

Build

Build once:

npm run build

Watch files and rebuild:

npm run watch
# or
npm start

Preview

npm install -g http-server
http-server public

Test

Unit and e2e tests:

npm test

Unit tests:

npm run unit

e2e tests:

npm run e2e

Motivation

Back in the time of angular2 alpha.18, angular/quickstart provided us to try Angular 2 app with on-the-fly transpilation and lazy-loading, which resulted in long waiting time for each file change. Also, I was not familiar with the Traceur tool stack and its output. angular2 npm package said The files under /es6 are es6 compatible files that can be transpiled to es5 using any transpiler. So I gave it a shot.

Babel transformer plugin

To support type annotation, parameter decorator and property decorator without initializer, this skeleton app uses the following external Babel transform plugin that I made:

babel-plugin-angular2-annotations

License

ISC

babel-angular2-app's People

Contributors

Stargazers

Watchers

babel-angular2-app's Issues

Huge bundle size

2MB without minification. With a quick look, it seems that angular2, (literally) cryptographic stuff and polyfills have huge portions. Track down unnecessary modules.

Extract out the typescript bits into its own preset

I'd like to point folks to a Babel alternative for their TypeScript projects. I noticed you cover the feature gaps-and-fills here. Do you see a benefit to breaking out the preset into a TypeScript preset instead of scoping it to just Angular2?

Extract transformers as babel plugin modules

Remove gulp from dependencies

Bundle with jspm

Any chance of providing a configuration for jspm?
Thanks.

how to use templateUrl

in this project template work but templateUrl doesn't work ,
can anyone help me?

Server rendering with angular-universal

Thanks for this repo ! As I don't want to use TS it will help me a lot ^^
Does it work with server rendering with angular-universal ? That would be awesome :)
Also is there any limitation to use this instead of TS ?

Add babel-core to devDependencies

#29

undefined is not a function on make

Hey, thanks for making this, it's an interesting project.

I'm trying to build it after following the instructions, and getting this webpack error:

Unfortunately, the error has no line numbers for what is triggering the problem in app.es6.

max@ionitron:~/git/babel-angular2-app$ make
mkdir -p public
cp src/index.html public/
cp node_modules/angular2/node_modules/zone.js/zone.js public/
node_modules/.bin/webpack
Hash: 9a56cc72acac2de6f40c
Version: webpack 1.9.5
Time: 625ms
    + 1 hidden modules

ERROR in ./src/app.es6
Module build failed: TypeError: /Users/max/git/babel-angular2-app/src/app.es6: undefined is not a function
    at AssertionInjector.insertImport (/Users/max/git/babel-angular2-app/node_modules/babel-plugin-type-assertion/index.js:85:13)
    at AssertionInjector.run (/Users/max/git/babel-angular2-app/node_modules/babel-plugin-type-assertion/index.js:75:10)
    at TraversalPath.module.exports.Transformer.Program.enter (/Users/max/git/babel-angular2-app/node_modules/babel-plugin-type-assertion/index.js:151:41)
    at TraversalPath.call (/Users/max/git/babel-angular2-app/node_modules/babel-core/lib/babel/traversal/path/index.js:831:28)
    at TraversalPath.visit (/Users/max/git/babel-angular2-app/node_modules/babel-core/lib/babel/traversal/path/index.js:864:10)
    at TraversalContext.visitSingle (/Users/max/git/babel-angular2-app/node_modules/babel-core/lib/babel/traversal/context.js:78:43)
    at TraversalContext.visit (/Users/max/git/babel-angular2-app/node_modules/babel-core/lib/babel/traversal/context.js:89:19)
    at Function.traverse.node (/Users/max/git/babel-angular2-app/node_modules/babel-core/lib/babel/traversal/index.js:64:17)
    at Object.traverse [as default] (/Users/max/git/babel-angular2-app/node_modules/babel-core/lib/babel/traversal/index.js:50:14)
    at TransformerPass.transform (/Users/max/git/babel-angular2-app/node_modules/babel-core/lib/babel/transformation/transformer-pass.js:42:27)

Change parameter decorator injection to something else

I read in the readme that parameter decorator support will be dropped. What would be the solution instead of it?
I found that a static getter is the most elegant way for it.

static get parameters() {
  return [[TodoStore]];
}

Babel missing?

Excellent intro to Angular2 and Babel so thanks for that! Just cloned the project to mess around with it and noticed when trying to build that babel seemed to be missing. Investigating further I noticed there was no reference in the package.json. With that, I just added this to the top of the list:

"babel": "^6.5.2",
"babel-core": "^6.9.0",

Outside of that, thanks again! I think I'm going to fork your project and modify it for express.js and livereload.

Uncaught TypeError: undefined is not a function

I got an error on line app.js:68. Any ideas?

 HelloApp.annotations = [new _Component$Template$bootstrap.Component({
      selector: 'hello-app',
      services: [_Greeter.Greeter]
    }), new _Component$Template$bootstrap.Template({   <------------undefined is not a func
      inline: '\n    <p>{{message}}</p>\n  '
    })];
    HelloApp.parameters = [[_Greeter.Greeter]];

Use New Router

It seems like angular-new-router is available only for Angular 1.x.

Bundle HTML template with something like $templateCache

Can we use TemplateLoader?

https://github.com/angular/angular/blob/master/modules/angular2/src/render/dom/compiler/template_loader.js

"Undefined is not a function" on make

Hi,
I just cloned the project and got a bug similar to the one reported a month ago:

$ make
mkdir -p public
cp src/index.html public/
cp node_modules/angular2/node_modules/zone.js/dist/zone.js public/
node_modules/.bin/webpack
Hash: 9a56cc72acac2de6f40c
Version: webpack 1.9.11
Time: 583ms
    + 1 hidden modules

ERROR in ./src/app.es6
Module build failed: TypeError: /Users/ivan/www/babel-angular2-app/src/app.es6: undefined is not a function
    at AssertionInjector.insertImport (/Users/ivan/www/babel-angular2-app/node_modules/babel-plugin-type-assertion/index.js:89:31)
    at AssertionInjector.run (/Users/ivan/www/babel-angular2-app/node_modules/babel-plugin-type-assertion/index.js:77:12)
    at NodePath.Transformer.Program.enter (/Users/ivan/www/babel-angular2-app/node_modules/babel-plugin-type-assertion/index.js:152:43)
    at NodePath.call (/Users/ivan/www/babel-angular2-app/node_modules/babel-core/lib/babel/traversal/path/context.js:122:26)
    at NodePath.visit (/Users/ivan/www/babel-angular2-app/node_modules/babel-core/lib/babel/traversal/path/context.js:146:8)
    at TraversalContext.visitSingle (/Users/ivan/www/babel-angular2-app/node_modules/babel-core/lib/babel/traversal/context.js:105:12)
    at TraversalContext.visit (/Users/ivan/www/babel-angular2-app/node_modules/babel-core/lib/babel/traversal/context.js:117:19)
    at Function.traverse.node (/Users/ivan/www/babel-angular2-app/node_modules/babel-core/lib/babel/traversal/index.js:67:17)
    at traverse (/Users/ivan/www/babel-angular2-app/node_modules/babel-core/lib/babel/traversal/index.js:50:14)
    at TransformerPass.transform (/Users/ivan/www/babel-angular2-app/node_modules/babel-core/lib/babel/transformation/transformer-pass.js:39:32)
    at File.transform (/Users/ivan/www/babel-angular2-app/node_modules/babel-core/lib/babel/transformation/file/index.js:590:12)
    at /Users/ivan/www/babel-angular2-app/node_modules/babel-core/lib/babel/transformation/transformer-pipeline.js:100:19
    at File.wrap (/Users/ivan/www/babel-angular2-app/node_modules/babel-core/lib/babel/transformation/file/index.js:604:16)
    at TransformerPipeline.transform (/Users/ivan/www/babel-angular2-app/node_modules/babel-core/lib/babel/transformation/transformer-pipeline.js:97:17)
    at transpile (/Users/ivan/www/babel-angular2-app/node_modules/babel-loader/index.js:10:22)
    at Object.module.exports (/Users/ivan/www/babel-angular2-app/node_modules/babel-loader/index.js:65:12)

Update to Babel 6.0

shuhei/babel-plugin-angular2-annotations#7

gulp babel transpile

Is there any way to use gulp-babel to transpile es6 instead browsify?
reason: on my dev environment, i need to transpile only change file not all files.

Unit/E2E Tests?

Are there any plans to add test examples for karma/protractor?

Upgrade to alpha.23

Blocked by router's change. Still not sure how to use it properly.

Also, need to update make copy to copy zone.js from zone.js/dist dir.

Can I build app to many files in public to easy for debug?

Hi shuhei,

I clone your app, and It work good.
But I wants build app to many files for debug, not one file bundle.js.
Could you please help me ???
Thanks.

angular2 beta.3

dependencies: angular2, zone.js and tsd (for zone.js 0.5.11)
load zone-microtask with <script>
update tests

Errors in console when loading application

After following the setup instructions in the readme I'm seeing the below errors in the browser console.

It looks like babel doesn't like the main angular exporting file but I'm not entirely sure why, happy to help debug if you'd like.

Fix angular's version in package.json

Windows support - 'make' command

I'm trying to run this app on Windows 7 and running into problems with the make command.
Could you clarify, is this app unix/linux only or is there an intaller for make that should work on windows?

Have you considered using a cross-platform javascript build tool like Grunt or Gulp?

Instantiation error

I built the app and tried to load the page, but I get this error message on app.js:1033:

Uncaught (in promise)
InstantiationError
message: "Error during instantiation of Token(AppComponentAnnotatedType)! (Token(AppView) -> Token(AppElement) -> Token(AppComponentAnnotatedType)). ORIGINAL ERROR: Error: No Directive annotation found on HelloApp"

angular2 beta.0

Long build time

On mu machine the build time takes 18 seconds, is there any way to speed it up?