vlio20 vlio20 - 2 months ago 33
AngularJS Question

Making moment injectable in angular2

I would like to make moment to be injectable through out my app.

I just started learning ng2 and couldn't find this type of usage in the docs.

Here is what I have in my

app.module.ts
:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import {AppComponent} from './app.component';
import * as moment from 'moment';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [{provide: 'moment', useValue: moment}],
bootstrap: [AppComponent]
})
export class AppModule {
}


and here is the component:

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

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


export class AppComponent {
title = 'app works!';

constructor(private moment) {
this.title += this.moment;
}
}


there is this error:

Uncaught Error: Can't resolve all parameters for AppComponent:


How should this be done correctly?

UPDATED MODULE

const moment = new OpaqueToken('moment');

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [{provide: moment, useValue: moment}],
bootstrap: [AppComponent]
})

export class AppModule {
}


UPDATED COMPONENT

import { Component } from '@angular/core';
import * as moment from 'moment';

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


export class AppComponent {
title = 'app works!';

constructor(private moment: moment) {
this.title += this.moment()
}
}


There is an error on this line
constructor(private moment: moment)
which tells that:
Cannot find name 'moment'.

Answer

Moment by itself is not an injectable for Angular2. However it can be wrapped inside one.

moment.service.ts

import { Injectable } from '@angular/core';
import * as m from 'moment';
@Injectable()
export class MomentService {
    moment = m;
}

app.module.ts

import { MomentService } from './moment.service';

@NgModule({
    providers: [MomentService]
    ...

app.component.ts

import { MomentService } from './moment.service';

export class AppComponent {
    constructor(private ms: MomentService){
        console.log('Moment:' + this.ms.moment("20111031", "YYYYMMDD").toString());
    }
}

Not perfect, but works.