I have the following angular2 app with a simple dependency injected and it doesn't work. What am I missing?
Here's the error:
EXCEPTION: Cannot resolve all parameters for 'AppComponent'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'AppComponent' is decorated with Injectable.
and the code:
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
class DataService {
items: Array<any>;
constructor() {
this.items = [
{ name: 'Christoph Burgdorf' },
{ name: 'Pascal Precht' },
{ name: 'thoughtram' }
];
}
getItems() {
return this.items;
}
}
#Component({
selector: 'app',
providers: [DataService],
template: `
<ul>
<li *ngFor="#item of items">{{item.name}}</li>
</ul>
`
})
class AppComponent {
items: Array<any>;
constructor(dataService: DataService) {
this.items = dataService.getItems();
}
}
bootstrap(AppComponent, []);
Can't reproduce. I added your code to a Plunker
https://plnkr.co/edit/0DTjG5?p=preview
and it seems to work fine with or without #Injectable().
It is suggested to always add #Injectable() to services but it is only required when the service has constructor parameters.
.
Related
I recently upgrade form Angular 8 to Angular 9 and it appears that nothing can be dependency injected.
I've commented out so much code in my project to something as basic as the following:
// configuration.state.ts
#State<ConfigurationStateModel>({
name: 'ConfigurationStateModel',
defaults: defaultConfiguration,
})
export class ConfigurationState {
constructor(
//private configurationService: ConfigurationService,
private configurationService: HeroService,
) { }
// .. irrelevant code
}
//hero.service.ts
// generated by ng g s heroservice
import { Injectable } from '#angular/core';
#Injectable({
providedIn: 'root'
})
export class HeroService {
constructor() { }
}
Errors with
Error: Can't resolve all parameters for ConfigurationState: (?).
at getUndecoratedInjectableFactory (core.js:17311)
at injectableDefOrInjectorDefFactory (core.js:17295)
at providerToFactory (core.js:17363)
at providerToRecord (core.js:17345)
at R3Injector.processProvider (core.js:17161)
at core.js:17122
at core.js:1400
at Array.forEach ()
at deepForEach (core.js:1400)
at R3Injector.processInjectorType (core.js:17118)
Apparently with NGXS, all States must be now decorated with the #Injectable().
This does not work:
#Injectable()
#State<ConfigurationStateModel>({
name: 'ConfigurationStateModel',
defaults: defaultConfiguration,
})
export class ConfigurationState {
but adding it after #State does:
#State<ConfigurationStateModel>({
name: 'ConfigurationStateModel',
defaults: defaultConfiguration,
})
#Injectable()
export class ConfigurationState {
How can we share data between two components - both are completely separate components? (which are not in a child-parent relationship)
I want to show my registration component's variable 'totalReg' value in my header component. Both files are below.
This is my reg.component.ts
import { Component, Output } from '#angular/core';
import { UserService } from '../services/reg.service';
import { VERSION } from '#angular/core';
#Component({
templateUrl: 'reg.component.html'
})
export class RegComponent {
constructor(
private userService: UserService,
) { }
#Output() totalReg: any;
register(event: any) {
this.userService.create(event.target.username.value)
.subscribe(
data => {
this.totalReg = data['data'].userId;
console.log(this.totalReg); // Navigate to the
listing aftr registration done successfully
},
error => {
console.log(error);
});
}
}
This is my header.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
This is html of my header component header.component.html
<div class="container">
<mat-toolbar>
<ul class="nav navbar-nav">
<li><a [routerLink]="['/login']">Login</a></li>
<li><a [routerLink]="['/reg']">Registration</a>
</li>
<li><a [routerLink]="['/users']">All Users</a>
</li>
</ul>
</mat-toolbar>
<span>{{totalReg}}</span>
</div>
header component should show the value of totalReg .
you can do this with help of service class.
you are already using the UserService in RegComponent , so use the same service in the HeaderComponent to get the data.
HeaderComponent.ts
export class HeaderComponent implements OnInit {
totalReg: any;
constructor(private service : UserService) { }
ngOnInit() {
this.totalReg = this.service.totalRg;
}
}
RegComponent.ts
export class RegComponent {
#Output() totalReg: any;
constructor(private userService: UserService) { }
register(event: any) {
this.userService.create(event.target.username.value)
.subscribe(data => {
this.totalReg = data['data'].userId;
console.log(this.totalReg); // Navigate to the listing aftr registration done successfully
this.service.totalRg = this.totalReg;
},
error => {
console.log(error);
});
}
}
you are already using a class in service class you need add the variable as totalRg
UserService.ts
export class UserService {
totalRg:any;
constructor() { }
create(name: any) {
return ....//
}
}
I've been trying to troubleshoot a strange problem with angular 2 where it isn't detecting my provider declaration, but nothing is working. I can't even replicate it in plunkr.
I'm using angular 2 rc 3 with router 3.0 alpha.8.
Error message is: ORIGINAL EXCEPTION: No provider for TestService!
app.routes.ts:
import { provideRouter, RouterConfig } from '#angular/router';
import { HomeComponent } from './app/home/home.component';
import { LogInComponent } from './app/log-in/log-in.component';
import { SignUpComponent } from './app/sign-up/sign-up.component';
export const routes: RouterConfig = [
{ path: '', component: HomeComponent },
{ path: 'log-in', component: LogInComponent },
{ path: 'sign-up', component: SignUpComponent }
];
export const APP_ROUTER_PROVIDERS = [
provideRouter(routes)
];
main.ts:
import { bootstrap } from '#angular/platform-browser-dynamic';
import { enableProdMode } from "#angular/core";
import { AppComponent } from './app/app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';
// enableProdMode();
bootstrap(AppComponent, [
APP_ROUTER_PROVIDERS
])
.catch(error => console.log(error));
app/app.component.ts:
import { Component } from '#angular/core';
import { ROUTER_DIRECTIVES } from '#angular/router';
import { TestService } from './shared/test.service';
#Component({
selector: 'my-app',
template: `
<div id="menu">
<a [routerLink]="['/sign-up']"><button>Sign Up</button></a>
</div>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES],
providers: [TestService]
})
export class AppComponent {
constructor() { }
}
app/sign-up/sign-up.component.ts:
import { Component } from '#angular/core';
import { ROUTER_DIRECTIVES } from '#angular/router';
import { TestService } from '../shared/test.service';
#Component({
selector: 'sign-up',
template: `<h1>Sign up!</h1>`,
directives: [ROUTER_DIRECTIVES]
})
export class SignUpComponent {
constructor(private testService: TestService) {
this.testService.test('works?');
}
}
app/shared/test.service.ts:
import { Injectable } from '#angular/core';
#Injectable()
export class TestService {
constructor() { }
test(message: string) {
console.log(message);
}
}
So, I'm providing the testservice in the base component (app.component.ts) because I want all my components to access the same instance. However, when I navigate to sign-up, I get the no provider for testservice error. If I provide the TestService within the sign-up component, this then works:
import { Component, OnInit } from '#angular/core';
import { ROUTER_DIRECTIVES } from '#angular/router';
import { TestService } from '../shared/test.service';
#Component({
selector: 'sign-up',
template: `<h1>Sign up!</h1>`,
directives: [ROUTER_DIRECTIVES],
providers: [TestService]
})
export class SignUpComponent implements OnInit {
constructor(private testService: TestService) { }
ngOnInit() { }
}
However, I need the same instance accessible throughout my app, so how can I inject this at the main component level?
I even tried replicating this app-level service providing with plunkr with the same version of everything, but it doesn't seem to give me the same error...
http://plnkr.co/edit/5bpeHs72NrlyUITCAJim?p=preview
Injecting something on the app level is done in bootstrap:
main.ts:
import { TestService } from '../shared/test.service';
bootstrap(AppComponent, [
APP_ROUTER_PROVIDERS, TestService
])
For me, some references to the "services" folder were "Services". When I made them all "services" (lower case), it worked.
For example:
import {ApiService} from "./Services/api.service";
didn't work, but this worked:
import {ApiService} from "./services/api.service";
To All future readers - and this is correct for angular 2.0.0 rc-4:
make sure that you follow the below folder structure:
root:
index.html
package.json
systemjs.config.js
tsconfig.json (if using TypeScript)
typings.json
app (folder):
- main.js (the root script for your app)
- app.component.js (the root component for the entire app)
This is crucial for the hierarchical injection to properly scope and identify providers.
Also, and this is very important - if still encountering problems and you are using TypeScript or any other transpiled language- delete any artifacts which your transpiler produces for every associated class in the problematic object graph - this, and the OP's answer eventually helped in my case (*.map.js and *.js files deleted and re-transpiled).
It was a configuration issue after all, and a completely elusive one at that.
Per the ang2 style guide, I had my main.ts one folder up from my main app folder, and in systemjs.config I had to declare the main for app as '../main.js'. When I moved the main file to the root app folder and changed the package declaration in systemjs to 'main.js' it worked.
The odd thing is everything else worked, right up until I try to utilize hierarchical dependency injection.
My AppComponent sample:
///other imports here
import { ApplyColor } from './../../shared/directives/applycolor';
import { SomeComponent} from './../../components/somecomponent';
#Component({
selector: 'my-app',
directives: [ApplyColor, ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS],
templateUrl: 'myurl.html'
})
#RouteConfig([
//routes here
{ path: '/main', name: 'Main', component: SomeComponent, useAsDefault: true },
])
export class AppComponent {
}
In order to instantiate ApplyColor in SomeComponent
Import ApplyColor
Add to directives: [ApplyColor]
Instantiate with a new keyword
Which is:
import {Component, AfterViewInit, ViewChild} from 'angular2/core';
import { ApplyColor } from './../../shared/directives/applycolor';
#Component({
selector: 'my-selector',
directives: [ApplyColor],
templateUrl: 'app/components/mycomponenturl.html'
})
export class MyComponent implements AfterViewInit {
constructor() { }
ngAfterViewInit() {
var color = new ApplyColor();
color.apply(2);
}
}
How can I instantiate/inject ApplyColor without there 3 steps above?
Directive instances are managed by Angular2. This means that you only need to specify it into the directives attribute. So if ApplyColor is a directive just add it into the directives attribute.
If ApplyColor isn't a directive, you can explicitly instantiate into the provide to the child component using #Input.
In your case, it's a bit particular since you leverage routing. In this case, you need to rely on a shared service. Such service needs to be defined when bootstrapping the application to be able to share a single instance for all components. You can set your instance of ApplyColor into a field of this service. So both component (AppComponent and SomeComponent) can access it.
Define the service
export class SharedService {
color:ApplyColor;
}
Bootstrapping the service
bootstrap(AppComponent, [ SharedService ]);
Set color from AppComponent
#Component({
(...)
})
export class AppComponent {
constructor(private service:SharedService) {
var color = new ApplyColor();
this.service.color = color;
}
}
Get color from SomeComponent
#Component({
(...)
})
export class AppComponent {
constructor(private service:SharedService) {
this.service.color.apply(2);
}
}
I have just started working angular2 but as I can understand:
import ApplyColor => you can't remove that, it required by the compiler to know which class you are referenced to
directives : [ApplyColor] => that means you will use the selector (the one you have defined in applycolor.ts) in the template (app/components/mycomponenturl.html). it is only to know where the component will be in the view.
new ApplyColor => you are creating the object yourself, it is not injected.
To inject your component,
export class MyComponent implements AfterViewInit {
constructor(private color:ApplyColor) { }
ngAfterViewInit() {
this.color.apply(2);
}
}
I hope it helped you ?
I'm not using typescript but ES6 and angular2 alpha39 to load a component dynamically. The following code is similar to what I have in my app. What I have noticed is angular2 does not create an instance of DynamicComponentLoader nor ElementRef and inject into the constructor. They are undefined.
How can I do the injection of DynamicComponentLoader using ES6 and angular2 alpha39?
import {Component, View, Inject, DynamicComponentLoader, ElementRef } from 'angular2/angular2'
#Component({
selector: 'dc',
bindings: [ DynamicComponentLoader ]
})
#View({
template: '<b>Some template</b>'
})
class DynamicComponent {}
#Component({
selector: 'my-app'
})
#View({
template: '<div #container></div>'
})
#Inject(DynamicComponentLoader)
#Inject(ElementRef)
export class App {
constructor(
dynamicComponentLoader,
elementRef
) {
dynamicComponentLoader.loadIntoLocation(DynamicComponent, elementRef, 'container');
}
}
If you want to write code in ES7, I think the most concise approach to specify injections at this time is to use static getter for parameters:
import {Component, View, DynamicComponentLoader, ElementRef } from 'angular2/angular2'
#Component({
selector: 'my-app'
})
#View({
template: '<div #container></b>'
})
export class App {
static get parameters() {
return [[DynamicComponentLoader], [ElementRef]];
}
constructor(dynamicComponentLoader, elementRef) {
dynamicComponentLoader.loadIntoLocation(DynamicComponent, elementRef, 'container');
}
}
See this plunker
If you want to write code in ES6, which doesn't support decorators, you must also use static getter for annotations property. In this case you must import ComponentMetadata and ViewMetadata instead of Component and View For example:
import {ComponentMetadata, ViewMetadata, DynamicComponentLoader, ElementRef } from 'angular2/angular2';
export class App {
static get annotations() {
return [
new ComponentMetadata({
selector: 'app'
}),
new ViewMetadata({
template: '<div #container></b>'
})
];
}
static get parameters() {
return [[DynamicComponentLoader],[ElementRef]];
}
constructor(dynamicComponentLoader, elementRef) {
dynamicComponentLoader.loadIntoLocation(DynamicComponent, elementRef, 'container');
}
}
See this plunker