11

I've got a brand new app create with a ng-cli with this very simple code ^^

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private my: string) {}
} 

and I've got in the console

EXCEPTION: No provider for String!

I don't see any error in the code so what's wrong !

In ng-book I can read

export class Article { 
  title: string; 
  link: string; 
  votes: number;
  constructor(title: string, link: string, votes?: number) { 
    this.title = title;
    this.link = link;
    this.votes = votes || 0;
  }
}

Take a look at

https://github.com/Microsoft/TypeScriptSamples/blob/master/greeter/greeter.ts

9
  • The DI system is trying to inject a value for you; what were you expecting my to be? Where should the value come from? Commented Jan 26, 2017 at 20:42
  • a string a ts type in plain ts is a valid sintax Commented Jan 26, 2017 at 20:55
  • I don't know what you're trying to say. Commented Jan 26, 2017 at 20:57
  • github.com/Microsoft/TypeScriptSamples/blob/master/greeter/… Commented Jan 26, 2017 at 20:59
  • 1
    I wrote ie a service Commented Jan 26, 2017 at 21:13

2 Answers 2

18

Error in constructor:

export class AppComponent {
  constructor(private my: string) {}
} 

private my: string should not be injected in the constructor, but outside, here assuming it's a variable you want to use in your component.

export class AppComponent {
  private my: string;
  constructor() {
    this.my = 'Hello!'; // if you want to assign a value (in the constructor) to your string, do it here!
  }
} 

I suggest you start of with the Tutorial from the beginning, so you learn the basics of Angular :)

EDIT, the latter part you added is a class e.g for typing your object, not a component, for a typed Object of class Article, this is valid syntax:

export class Article { 
  title: string; 
  link: string; 
  votes: number;
  constructor(title: string, link: string, votes?: number) { 
    this.title = title;
    this.link = link;
    this.votes = votes || 0;
  }
}

Then you can import this class to your AppComponent, and use to assign an Article object.

import { Component } from '@angular/core';
import { Article } from './your.path'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  article: Article = new Article('titleHere', 'linkHere', 3)

  constructor() {}
}
Sign up to request clarification or add additional context in comments.

5 Comments

It's a ts valid sintax its not about angular itself
But all in all AppComponent is a class - What's the different from component and a class ? imo the angular di should be aware that the param is a string
@Whisher it is aware that it's a string. It doesn't know which string that should be. Hence the error.
a string as a type is a string so I wait the same plain ts behaviour
@Whisher To cut things short and MUCH simplified, the @Component decorator tells that AppComponent is a not a "normal" class, but a Component. And in that case you would have to tell that string is a provider for your component, because it expects that what is in injected in the constructor should be a provider, and therefore declared in providers: [string] in your component or ngModule. "string" wouldn't work as it's no known angular 2 provider, unless you create a service (or whatever) that is named string and has Angular magic in it ;) As said this was just a simplified example.
0

I had this error and can solve it

just need to re-run the build process

by stopping it with cntrl+c

and ionic serve again

or angular command

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.