The idea for your tool is great, but it does not work well with large projects. The output is just a huge unreadable ball of lines and boxes (makes our architecture look much worse than it actually is :) ).

We have 159 modules, 351 components, 283 services, 210 data model files, and 28 pipes. For such a large application, we could really use a tool that helps us analyse the application structure. Unfortunately, the current layout generated by ngrev does not help us.

Thanks,
Mathias

Allow quick focus on symbol by using fuzzy search.

Hello,

On Windows, there's an error which seems to be due to confusion between /and \:

This was run against this project and works fine on Ubuntu.

A javascript error ocurred inthe main process
Unexpected value 'null' declared by the module .... in .. at syntax error

When trying to open a project folder

Get the dependencies of given directive and visualize them in the DirectiveState.

Allow navigation to previous (parent) symbols by providing a hierarchical structure:

ModuleA -> ModuleB -> ComponentB -> TemplateB -> ComponentC

The user should be able to navigate directly by clicking on top of any of the symbols above.

There is no windows application for version 0.0.17

The exported and declared pipes need to be visualized. There should also exist a PipeState which visualize the dependencies of given pipe.

We have apps compiled by only ngc without any problems and then bundled using other tools like SystemJS Builder, Rollup, CC, ... and it looks that it is not possible to open such projects in ngrev ... selecting a correct tsconfig.json file ... the following error message appears:

Hi,

Thanks very much for this awesome tool! Are there any plans to release it as a VSCode extension also? It should be really handy, especially for newcomers in a project, to take a quick look at the structure while navigating the code.

Thanks!

Angular circular dependency is a nightmare, especially in big projects.
you can find yourself (or team mates) using @forwardref, just because it seems right at the time.

This tool seems like a solid ground for targeting Circular dependency, any I could not find any other tools that solve it. - so it would be great if you will add this feature :)

Thanks.

As the title states, when ever I get an exception about ngrev not being able to parse my project, the exception has good information in it about the exception and the line number and column, but it says it always occurs in original.ts (or something like that).

This makes it much harder to find the exceptions origin in big project, and adding the real file names to it will make it much better in my opinion

I am getting the error - Error during parsing and make sure its compatible with Angular AOT Compiler

Function expressions are not supported in decorators. image attached

Create binaries for:

• macOS
• linux
• windows

I get a "Cannot parse your project" error with a nonsensical error message: Error during parsing: {}.

When starting the project from source code, I get some more info in the console:

Get symbols
{ Error: Can't resolve all parameters for MatExpansionPanel in C:/moapr-dev/webclients/moapr/node_modules/@angular/material/expansion/typings/expansion-panel.d.ts: (?, [object Object], [object Object], [object Object], ?).
    at syntaxError (C:\stuff\ngrev\ngrev\node_modules\@angular\compiler\bundles\compiler.umd.js:1098:21)
    at CompileMetadataResolver._getDependenciesMetadata (C:\stuff\ngrev\ngrev\node_modules\@angular\compiler\bundles\compiler.umd.js:11008:39)
    at CompileMetadataResolver._getTypeMetadata (C:\stuff\ngrev\ngrev\node_modules\@angular\compiler\bundles\compiler.umd.js:10901:30)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (C:\stuff\ngrev\ngrev\node_modules\@angular\compiler\bundles\compiler.umd.js:10520:28)
    at DirectiveSymbol.getNonResolvedMetadata (C:\stuff\ngrev\ngrev\node_modules\ngast\ngast.bundle.js:2139:42)
    at DirectiveSymbol.getProviders (C:\stuff\ngrev\ngrev\node_modules\ngast\ngast.bundle.js:2338:25)
    at C:\stuff\ngrev\ngrev\node_modules\ngast\ngast.bundle.js:2558:15
    at Array.forEach (<anonymous>)
    at ProjectSymbols.getProviders (C:\stuff\ngrev\ngrev\node_modules\ngast\ngast.bundle.js:2557:30)
    at SymbolIndexImpl.getIndex (C:\stuff\ngrev\ngrev\app\parser.js:1233:17) ngSyntaxError: true }
Got message with topic get-symbols
Got symbols response

So maybe an error in angular material? But like I said, my project AOT-compiles. Also when I comment out my usages of MatExpansionModule the problem persists.

I'm trying to parse a CLI project, but end up with this screen https://i.imgur.com/mKq5YYM.png

I see the modules being listed in the output, so it's finding something. Last few lines of output is this:

AppModule
Project loaded
Getting data
Get symbols
Get symbols

Very exciting project :)

Hi, I opened a project inside a folder containing a space on OSX, and when displaying a component's template it said "ENOENT failed to open {...PATH}/My%252520Dir/..."

this is view on relatively big project (+1000) files

I find it "not analyable" or it mean project is not correctly structured ^^

A feature request from me woul be: infos near legend to resume number of modules or lazymodule or component in projects?

thank you

I get the following when trying to open my angular-cli project. It builds with the --aot flag with no errors

I'm using ngrev version 0.0.7

Error while parsing project
Cannot parse your project. Make sure it's compatible with the Angular's AoT compiler. Error during parsing:
Cannot read property 'reference' of undefined

The same result is given when I use the tsconfig.json file in the root, or /src/tsconfig.app.json

Hi is there a portable version which we can use

Hi,
Is there a way to choose the path/folder in Windows 10 where to install the application?
I would like to install it under e.g. C:\dev\

The problem is that I have only 1 folder (e.g. C:\dev) where I am allowed to install software. When I try to install ngrev it trys to install in a folder where it is not allowed to install anything.
Right now I can not install the application.

command lines run:
ng new testingtester

( ... Project is created, dependancies downloaded .. )

cd testingtester
ng -v

Angular CLI: 1.5.0
Node: 8.7.0
OS: win32 x64
Angular: 5.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.1
typescript: 2.4.2
webpack: 3.8.1

Open ngrev.
Click on Select Project and select testingtester/src/tsconfig.app.json.

Error while parsing project

Cannot parse your project. Make sure it's compatible with the Angular's AoT compiler. Error during parsing:

Error encountered resolving symbol values statically. Expression form not supported (position 65:11 in the otiginal .ts file)

Cannot parse PhoneBookDemo project, which is compatible with AoT compiler.

Though my project is compatible with the Angular's AoT compiler, I get the following parse error:

Looks like the key error here is: function expressions that are not supported in the decorators, in the app/app.module.ts file, line 45, which has following code (line 45 is useFactory):

Any Ideas?
Oh, and thanks for providing such an amazing tool 😻

This will improve the UX by allowing the user to see the loading spinner.

Hi,

wanted to try this app with my project but I'm getting this error:

Project is AOT compatible (buildable through --aot and ngc)

Deps:

"dependencies": {
    "@angular/animations": "^5.1.0",
    "@angular/common": "^5.1.0",
    "@angular/compiler": "^5.1.0",
    "@angular/core": "^5.1.0",
    "@angular/forms": "^5.1.0",
    "@angular/http": "^5.1.0",
    "@angular/platform-browser": "^5.1.0",
    "@angular/platform-browser-dynamic": "^5.1.0",
    "@angular/platform-server": "^5.1.0",
    "@angular/router": "^5.1.0",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^4.1.1",
    "@ngrx/router-store": "^4.1.1",
    "@ngrx/store": "^4.1.1",
    "@ngrx/store-devtools": "^4.1.1",
    "core-js": "^2.4.1",
    "deep-diff": "0.3.4",
    "enhanced-resolve": "3.3.0",
    "enumerate-devices-shim": "^1.0.2",
    "get-user-media-promise": "^1.1.1",
    "howler": "^2.0.3",
    "immutable": "^3.8.1",
    "mv-api-js": "~0.0.0",
    "ngx-popover": "0.0.16",
    "ngx-smart-modal": "^3.1.0",
    "node-uuid": "^1.4.8",
    "normalize.css": "^7.0.0",
    "rxjs": "^5.5.5",
    "typescript-memoize": "^0.0.4",
    "web-animations-js": "^2.3.1",
    "webrtc-adapter": "3.3.4",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.0",
    "@angular/compiler-cli": "^5.1.0",
    "@types/jasmine": "https://nexus.protmv.com/repository/npm-public/@types/jasmine/-/jasmine-2.5.38.tgz",
    "@types/node": "~6.0.60",
    "audiosprite": "^0.6.0",
    "babel-polyfill": "^6.26.0",
    "bootstrap": "4.0.0-alpha.6",
    "codelyzer": "~2.0.0",
    "ffbinaries": "^1.0.1",
    "intl": "^1.2.5",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-es6-shim": "^1.0.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-junit-reporter": "^1.2.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "phantomjs-prebuilt": "^2.1.14",
    "postcss-grid-kiss": "^1.4.2",
    "protractor": "~5.1.0",
    "ts-helpers": "^1.1.1",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "^2.6.2",
    "wallaby-webpack": "*",
    "webpack-bundle-analyzer": "^2.7.0"
  }

Is this application compatible with angular v6?

Here is a link to the project: https://github.com/ipassynk/angular-springboot-jwt

ngrev on mac version 0.0.9

Trying to use ngrev on Mac. The following exception is displayed:

julia-mac:angular-springboot-jwt$/Applications/ngrev.app/Contents/MacOS/ngrev 
{ name: 'production' }
Loading project: "/Users/juliapassynkova/angular2/code/angular-springboot-jwt/package.json"
/Users/juliapassynkova/angular2/code/angular-springboot-jwt/package.json
Error: Error encountered resolving symbol values statically. Could not resolve app/guards/auth-guard.service relative to /Users/juliapassynkova/angular2/code/angular-springboot-jwt/src/app/app-routing.module.ts.
    at simplify (/Applications/ngrev.app/Contents/Resources/app.asar/node_modules/@angular/compiler/bundles/compiler.umd.js:23849:54)
    at simplify (/Applications/ngrev.app/Contents/Resources/app.asar/node_modules/@angular/compiler/bundles/compiler.umd.js:23680:56)
    at /Applications/ngrev.app/Contents/Resources/app.asar/node_modules/@angular/compiler/bundles/compiler.umd.js:23857:85
    at /Applications/ngrev.app/Contents/Resources/app.asar/node_modules/@angular/compiler/bundles/compiler.umd.js:23948:38
    at Array.forEach (native)
    at mapStringMap (/Applications/ngrev.app/Contents/Resources/app.asar/node_modules/@angular/compiler/bundles/compiler.umd.js:23947:24)
    at simplify (/Applications/ngrev.app/Contents/Resources/app.asar/node_modules/@angular/compiler/bundles/compiler.umd.js:23857:28)
    at simplify (/Applications/ngrev.app/Contents/Resources/app.asar/node_modules/@angular/compiler/bundles/compiler.umd.js:23680:56)
    at simplifyInContext (/Applications/ngrev.app/Contents/Resources/app.asar/node_modules/@angular/compiler/bundles/compiler.umd.js:23862:24)
    at /Applications/ngrev.app/Contents/Resources/app.asar/node_modules/@angular/compiler/bundles/compiler.umd.js:23624:69

The project complies with AOT without problem:

julia-mac:angular-springboot-jwt$ng build --prod --aot
Hash: 4d86fd37fd5320274fcf                                                              
Time: 16897ms
chunk    {0} polyfills.5aae015f16e5b66f61e9.bundle.js (polyfills) 157 kB {4} [initial] [rendered]
chunk    {1} main.c31742351d49e328b5f3.bundle.js (main) 96.5 kB {3} [initial] [rendered]
chunk    {2} styles.b17b8c150ef19d5eb7a6.bundle.css (styles) 122 bytes {4} [initial] [rendered]
chunk    {3} vendor.3048f582ab3c6e829f9b.bundle.js (vendor) 1.39 MB [initial] [rendered]
chunk    {4} inline.dab39c4f3c13a4e0b67f.bundle.js (inline) 0 bytes [entry] [rendered]

compilation failed when i have declared the tsconfig paths

This messes up the back button.

Maybe you could provide some sort of indication that ngRev is working or loading the app.
I loaded my app and it stayed as a blank page for over half an hour. I ended up just killing it since im not sure if it failed or was just still loading the app (its quite large).

Thanks,

getting a ERR_FILE_NOT_FOUND
../ngrev/app/helpers/external_links.js
../ngrev/app/helpers/context_menu.js

Issue

Only 3 module boxes are rendering, where app has many more modules than this. Haven't had time to investigate further, but will drop here in case it helps.

Folder structure is as follows. yy and xx are licensees of a white labelable app, all implementing base modules of core

src
├── core
│   ├── +cms
│   ├── +crm
│   ├── +logs
│   ├── +reports
│   ├── +settlements
│   ├── actions
│   ├── app-routing.module.ts
│   ├── app.module.ts
│   ├── components
│   ├── containers
│   ├── core.scss
│   ├── domain.enum.ts
│   ├── effects
│   ├── guards
│   ├── models
│   ├── reducers
│   ├── services
│   ├── shared
│   ├── testing
│   └── utils
├── yy
│   ├── +cms
│   ├── +crm
│   ├── +logs
│   ├── +reports
│   ├── +settlements
│   ├── _config.js
│   ├── yy-routing.module.ts
│   ├── yy.module.hot.ts
│   └── yy.module.ts
├── xx
│   ├── ...
├── main-yy.aot.ts
├── main-yy.ts
├── main-xx.aot.ts
├── main-xx.ts
├── polyfills.ts
└── vendor.ts

App is AoT compliant and compiles with the latest version of ngc.

The current color scheme is not the best ever. Suggestions for node background/border + edges color will be appreciated!

For anyone interested in opening a PR, here's the color map.

After doing some manual shifting to the diagrams configuration, switching to dark mode will reset it to its default layout. In bigger projects this is very inconvenient since the standard layout sometimes is way to cluttered. Also the option to save the layout for further use would be a great idea.

Unlike the previous version, this time there are no error messages from zone. This is what I get:

Cannot parse your project. Make sure it's compatible with the Angular's AoT compiler. Error during parsing:
{}

The project is compatible with AOT because that's the way it is compiled by both ng server and ng build

Best!

The lazy loaded modules should be shown on module level and connected to their parent with a dashed arrow.

Hi, I got this error after loading tsconfig.app.json.

{
	"extends": "../tsconfig.json",
	"angularCompilerOptions": {
		"paths": {
			"eyc-sol-ant-pln": [ "../my-lib/src/public_api.ts" ]
		}
	},
	"compilerOptions": {
		"outDir": "../out-tsc/app",
		"module": "es2015",
		"baseUrl": "",
		"types": [],
		"paths": {
			"eyc-sol-ant-pln": [ "../my-lib/src/public_api.ts" ]
		}
	},
	"exclude": [ "test.ts", "**/*.spec.ts", "**/*.mock.ts" ]
}

I don't really think, the module is declared in two modules, it is only declared in CoreModule:

Isn't it the problem with paths (/ vs \, I'm on Win10)?

Load project failed for two different route paths that point to same lazy loaded module. Here is example with one route path that point to lazy loaded module https://github.com/MichalMaM/ngx-simple-project/blob/master/src/app/app.routing.ts (it works good), but for two different route paths ngrev throw error (routing source is here https://github.com/MichalMaM/ngx-simple-project/blob/widget/src/app/app.routing.ts):

Cannot parse your project. Make sure it's compatible with the Angular's AoT compiler. Error during parsing:

{"__zone_symbol__currentTask":{"type":"microTask","state":"notScheduled","source":"Promise.then","zone":"angular","cancelFn":null,"runCount":0}}

I tried fork ngrev repo and add this commit MichalMaM@d68993f to my fork and then ngrev load my project correctly, but I'm not sure If this is good solution. For me it is hotfix that work :)

Here is my tsconfig.json

{ "extends": "./lib/ic/icTsConfig", "include": [ "**/*.ts" ], "exclude": [ "gen", "node_modules", "lib/dist", "lib/node-*", "**/*.spec.ts", "**/bootstrap_*.ts" ], "compilerOptions": { "baseUrl": ".", "paths": { "*": [ "*", "lib/dist/*", "lib/dist/@types/*", "lib/node-coreweb/*", "lib/node-coreweb/@types/*" ] } } }

icTsConfig is

{ "extends": "../inin/ininTsConfig" }

and ininTSConfig is
{ "compilerOptions": { "module": "AMD", "moduleResolution": "Node", "noImplicitAny": true, "removeComments": false, "preserveConstEnums": true, "noEmit": true, "target": "ES5", "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": ["es2017", "dom"], "strictNullChecks": true, "noStrictGenericChecks": true, "skipLibCheck": true } }

Import isn't working on my angular 5 app, says it isn't AoT compatible, but my ng buid --prod command is working fine.
How can I make sure my app is AoT compatible ?

I started working with ngrev today.
I think its a neat tool which is very important for the angular echo systems.
One issue that I found is that when I try to parse my project as is. I get an error about not allowing to use function. It always occured for all instance in my code where I tried to provide a token with useFactory, heres an example (I can't post the project that i'm working on specifically so ill only post examples):

{ provide: APP_INITIALIZER, useFactory: (configService: ConfigService) => () => configService.load(), deps: [ConfigService], multi: true },

so to overcome it, I just did something like this:
`
export function nothing(): any {}

...

{ provide:
APP_INITIALIZER,
useFactory: nothing,
deps: [ConfigService], multi: true
},`
which made the project parse, but ofc its not a great solution and also this configuration will not be visible in the ngrev output graph.

Add export to png of any structural diagram.

Apologies if I am doing something dumb. I just installed latest windows version. when I click select project a folder picker comes up instead of file picker so that I am not actually able to select a tsconfig file. I am on Windows 7

I tried to run this in our angular cli project using 5.1.2 and received the following error:

Cannot parse your project. Make sure it's compatible with the Angular's AoT compiler. Error during parsing:

{"__zone_symbol__currentTask":{"type":"microTask","state":"notScheduled","source":"Promise.then","zone":"angular", "cancelFn":null,"runCount":0}}

tsconfig.app.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts",
    .... bunch of our components that are excluded
    "jquery",
    "mcustomscrollbar"
  ]
}

I am able to compile the project fine with --aot.