mgechev / ngworld Goto Github PK

Generate a Minecraft/Christmas-like world out of an Angular application.

Home Page: https://mgechev.github.io/ngworld/

License: MIT License

TypeScript 97.61% JavaScript 2.39%

ngworld's Introduction

🌍 ngworld 🌍

This project aims to illustrate how powerful the Angular compiler is by generating a Minecraft-like world out of an Angular application.

The project uses ngast - a library which wraps the Angular compiler and provides user friendly API to it's metadata collector.

Warning: this project is a prototype/demonstration built on top of the Angular compiler. If you're looking for a tool for reverse engineering of Angular applications, you might be interested in ngrev.

How to use

npm i -g ngworld
mkdir world && ngworld -p [PATH_TO_TSCONFIG]
http-server .

🎄 ng-xmas 🎄

Over the weekend, before Christmas 2017, I built ng-xmas. That's variation of the original world which renders an Angular application as Christmas trees 🎄.

The world embeds the following rules:

Each garden is an NgModule.
Each tree inside of each garden is a component.
The crowns of all trees are generated from the components' templates.
- The template is being flatten after which the ngworld compiler consumes up to 7 elements.
- If there's at least one directive attached to any of the elements, the toys on this layer of the tree are shown with goldenrod color otherwise they are red.

ngworld uses particle system plugin which performs heavy computations which can dramatically reduce the framerate. In order to prevent this, it's snowing only over a particular region of the world.

How to Install

The Christmas edition of ngworld is published under the ng-xmas package:

npm i -g ng-xmas
mkdir xmas && cd xmas && ng-xmas -p [PATH_TO_TSCONFIG]
http-server .

Code

You can find the code for ng-xmas in the ng-xmas branch.

Demo

Here.

License

MIT

ngworld's People

Contributors

Stargazers

Watchers

Forkers

evan-carey quramy m00k berardo mrjmd loicsalou js-van fadysamirsadek mstanton nishugoel junxie6 excloudx6

ngworld's Issues

Rendering query

Awesome project! I know this is just a demo and not supported, but thought I would just ask if you knew why the grass and modules would not be rendering (only the sky).

I thought it might be the structure of my app so i tried with a boilerplate angular-cli project and the same thing happens. I am using Angular 4.2.4 generated using the Angular CLI.

I inspected the elements and noticed the a-frame entities don't have positions
<a-entity ... width: -Infinity" position="NaN 0 NaN" ...></a-entity>

Thanks :)

Doesn't Run

I know this is just a demo project for you and not that critical but i saw it and thought it would be a fun little thing to try for our fairly large app. Installed globally and ran resulting in a bunch of errors like so:

ngworld -p .
�  Creating a program...
✅  Program created!
Error: Could not resolve module @angular/core

(with stack traces)

also got errors like these:

Error: Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function
    at simplify (userprofile\npm\node_modules\ngworld\node_modules\@angular\compiler\bundles\compiler.umd.js:23849:54)

Just letting you know. Not critical for me in any way.

Thanks!

TypeError: this.symbolResolver.getSymbolByModule is not a function

Hey Minko,

Thanks for helping me on Twitter (used my company's profile, @Especializa), but I still can't seem to find a way to get it working.

I tried it against several different projects but always the same output:

📝  Creating a program...
✅  Program created!
/usr/local/lib/node_modules/ngworld/node_modules/@angular/compiler/bundles/compiler.umd.js:23289
        return this.findSymbolDeclaration(this.symbolResolver.getSymbolByModule(moduleUrl, name, containingFile));
                                                              ^

TypeError: this.symbolResolver.getSymbolByModule is not a function
    at StaticReflector.findDeclaration (/usr/local/lib/node_modules/ngworld/node_modules/@angular/compiler/bundles/compiler.umd.js:23289:63)
    at StaticReflector.initializeConversionMap (/usr/local/lib/node_modules/ngworld/node_modules/@angular/compiler/bundles/compiler.umd.js:23507:36)
    at new StaticReflector (/usr/local/lib/node_modules/ngworld/node_modules/@angular/compiler/bundles/compiler.umd.js:23236:14)
    at ContextSymbols.init (/usr/local/lib/node_modules/ngworld/node_modules/ngast/ngast.bundle.js:2479:26)
    at new ContextSymbols (/usr/local/lib/node_modules/ngworld/node_modules/ngast/ngast.bundle.js:2340:14)
    at ProjectSymbols.getRootContext (/usr/local/lib/node_modules/ngworld/node_modules/ngast/ngast.bundle.js:2558:28)
    at Object.exports.parse (/usr/local/lib/node_modules/ngworld/parser/index.js:16:47)
    at Object.<anonymous> (/usr/local/lib/node_modules/ngworld/index.js:33:37)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)

My current configurations:
Node: v7.9.0
NPM: 4.2.0
ngworld: 0.0.4

The latest target project config:
@angular libs: 4.1.0
typescript: 2.3.1

I've run ng build --prod --aot previously and served with no error.

Even on a fresh new angular-cli project that's the same outcome.

Also tried ngworld locally, running this npm script:
"ngworld": "ngworld -p src/tsconfig.app.json"
On terminal npm run ngworld

Nuking node_modules and npm i again doesn't seem to help.

Would you still have any idea?

mgechev / ngworld Goto Github PK

ngworld's Introduction

🌍 ngworld 🌍

How to use

🎄 ng-xmas 🎄

How to Install

Code

Demo

License

ngworld's People

Contributors

Stargazers

Watchers

Forkers

ngworld's Issues

Rendering query

Doesn't Run

TypeError: this.symbolResolver.getSymbolByModule is not a function

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent