CODEWITHSUNDEEP
angulardependency-injectionappsettings
Josh
Josh

Reputation: 16567

Angular 2 injectable AppSettings Class

I'm using angular 2 inside of a ASP.NET Core application, but that isn't important for this issue. Part of my current task is to get configuration values from the server into my angular application.

I have the settings flowing through to the point that I am writing one setting into my layout like so:

<script>
    var BASE_WEB_API_URL = '@appSettings.BaseUrls.Api';
</script>

And this is working, which I have verified by looking at the markup. Now, what I want is to make an appsettings class that I can inject via DI into my services and components that need it. Here is what I have so far:

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

@Injectable()
export class AppSettings {
    public BASE_WEB_API_URL: string = window['BASE_WEB_API_URL'];
}

Very simple and straight forward and it should allow me to inject my server variables. However, I get an error when I try to use it.

Error: Uncaught (in promise): Error: No provider for AppSettings!

So, I thought my problem was that it wasn't listed in the imports in my app module. So I added it only to get this error:

Error: Unexpected value 'AppSettings' imported by the module 'AppModule'

So, googling this error lead me to a post saying it maybe needed to be in the bootstrap section, so I tried that next only to get a new error message.

Error: No Directive annotation found on AppSettings

I'm very green to Angular 2, so these errors are throwing me off. Any thoughts on what I am doing wrong?

Thank you

Upvotes: 1

Views: 599

Answers (1)

pe8ter
pe8ter

Reputation: 1263

Put injectables into your module's providers metadata, not imports.

Upvotes: 1

Related Questions