The architecture needs to be changed

[rubenCodeforges]

The current arch is a bit incorrect.

Angular is using the concept of web components, so each bit and peace should be split in to components , which can be grouped by modules.

The current arch has all its components inside the routes folder , which is incorrect. a example of correct arch can be found here https://github.com/rubenCodeforges/iService/tree/development/src/app

It is a bit outdated but the main idea is there.

Now lets go to some explanations:

The main module is AppModule , here you usually do some initialisation things. And you describe some main routes , if there are any.

Then you can create a feature specific folder , for example smartContracts Inside it you declare a new Module. SmartContractsModule and a route config file SmartContractsRouteConfig

for each PageComponent you define a route:

 {
            path: 'balance',
            component: BalanceComponent,
 }

This page component will be declared in the SmartContractsModule and will have they own folders inside smartContract folder.

// Folder structure

smartContracts 
    balance
       BalanceComponent.ts
       balance.html
       balance.[less|css|saas|scss]
    whitelist
       ....

in your app.html you should have a it will render all the components that are set by the route rule (match the route).

Also there are some issues inside the files , i will add comments in there.

[rubenCodeforges]

Oh and you should use 4 spaces for tabulation and not the tab character

[xxmuaddib]

Now it should be fine

[xxmuaddib]

Can you hint how to make the routes work? After architecture changes they stopped working.

[rubenCodeforges]

Yes ive forgot to import ContractsAdminModule in to AppModule

[rubenCodeforges]

ahh i see not only , that , routerLink need RouterModule , while its now separated in AppCommonModule it is not a know property , ill do a small fix

[rubenCodeforges]

@xxmuaddib here is the fix https://github.com/svandisproject/smart-contract-admin/pulls

[xxmuaddib]

I am sorry, it still doesn't work. Says "No provider for ActivatedRouteSnapshot". I tried different things, but couldn't figure out

[rubenCodeforges]

@xxmuaddib have you update your branch with master ?

[xxmuaddib]

@rubenCodeforges yes sure

[rubenCodeforges]

@xxmuaddib try this https://github.com/svandisproject/smart-contract-admin/pull/6

[xxmuaddib]

still the same: ERROR Error: Uncaught (in promise): Error: No provider for ActivatedRouteSnapshot!

[rubenCodeforges]

@xxmuaddib i dont have it , please paste the complete log

[xxmuaddib]

ERROR Error: Uncaught (in promise): Error: No provider for ActivatedRouteSnapshot! Error: No provider for ActivatedRouteSnapshot! at injectionError (core.es5.js:1169) at noProviderError (core.es5.js:1207) at ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector.throwOrNull (core.es5.js:2649) at ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKeyDefault (core.es5.js:2688) at ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKey (core.es5.js:2620) at ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector.get (core.es5.js:2489) at resolveNgModuleDep (core.es5.js:9492) at NgModuleRef.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleRef.get (core.es5.js:10562) at resolveDep (core.es5.js:11050) at createClass (core.es5.js:10916) at injectionError (core.es5.js:1169) at noProviderError (core.es5.js:1207) at ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.throwOrNull (core.es5.js:2649) at ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKeyDefault (core.es5.js:2688) at ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKey (core.es5.js:2620) at ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector.get (core.es5.js:2489) at resolveNgModuleDep (core.es5.js:9492) at NgModuleRef.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleRef_.get (core.es5.js:10562) at resolveDep (core.es5.js:11050) at createClass (core.es5.js:10916) at resolvePromise (zone.js:814) at resolvePromise (zone.js:771) at zone.js:873 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.es5.js:3881) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595) at webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:500) at ZoneTask.invoke (zone.js:485)

[xxmuaddib]

I used ActivatedRoute.snapshot instead of ActivatedRouteSnapshot and it fixed the issue. #8 is it ok?

[rubenCodeforges]

Yes you can use it that way as well