简体   繁体   中英

Angular2 DI Debug

Is there a way to debug Angular 2 dependency injection in the console to check the order of services created?

For example:

Creating instance of "AuthService"...

Creating instance of "UserService"...

I'm getting some strange errors like:

reflective_provider.js:240 Uncaught Cannot resolve all parameters for 'ScaffoldStorage'(undefined, URLFileItemReader). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'ScaffoldStorage' is decorated with Injectable.

Maybe injector is trying to create MyService before AuthService (the service missing) or maybe I have interdependent services that im not aware of.. ( I have 20+ services in the app, not viable to list all here :( )

Edit:

1 - I forgot the simplest solution: write "console.log" in the constructor of each service..

2 - I just changed the import order and it worked.. Anyone knows why?

 # Before # ... import { AUTH_PROVIDERS } from 'src/authentication'; import { SCAFFOLD_PROVIDERS } from 'src/scaffold'; # ... # After # ... import { SCAFFOLD_PROVIDERS } from 'src/scaffold'; import { AUTH_PROVIDERS } from 'src/authentication'; # ... # Boostraping: No change bootstrap(AppComponent, [ # ... AUTH_PROVIDERS, ROUTER_PROVIDERS, SCAFFOLD_PROVIDERS, # ... provide(PLATFORM_DIRECTIVES, {useValue: SHARED_DIRECTIVES, multi: true}) ]).catch((error: Error) => console.error(error)); 

Most of the time, it's because the type of the first constructor parameter of your service can't be resolved.

For example:

import {SomeType} from './something'; // wrong import
import {URLFileItemReader} from './reader'; // rightimport

@Injectable()
export class ScaffoldStorage {
  constructor(private service:SomeType, private reader:URLFileItemReader) {
    (...)
  }
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM