angular-cli.json? says “moment is not defined”

Question

I'm struggling with Angular2 development with angular-cli.

I don't exactly know of how to set my source see other external CSSs', javascript Libraries.

first of all, here is my angular-cli configuration. (well you know, first thing I loaded lots of libraries in here for making another pages)

"main": "main.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.json",
  "prefix": "app",
  "mobile": false,
  "styles": [
    "../node_modules/admin-lte/bootstrap/css/bootstrap.min.css",
    "../node_modules/admin-lte/dist/css/AdminLTE.min.css",
    "../node_modules/admin-lte/dist/css/skins/_all-skins.min.css",
    "../node_modules/admin-lte/dist/css/skins/skin-blue.min.css",
    "../node_modules/admin-lte/plugins/colorpicker/bootstrap-colorpicker.min.css",
    "../node_modules/admin-lte/plugins/daterangepicker/daterangepicker.css",
    "../node_modules/admin-lte/plugins/timepicker/bootstrap-timepicker.min.css",
    "../node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css",
    "../node_modules/bootstrap-fileinput/css/fileinput.min.css",
    "../node_modules/fullcalendar/dist/fullcalendar.min.css",
    "../node_modules/fullcalendar/dist/fullcalendar.print.css",
    "../node_modules/fullcalendar-scheduler/dist/scheduler.min.css",
    "../node_modules/morris.js/morris.css",
    "../node_modules/flickity/dist/flickity.min.css",
    "../node_modules/font-awesome/css/font-awesome.min.css",
    "../node_modules/ionicons/dist/css/ionicons.min.css",
    "../node_modules/icheck/skins/all.css",
    "../node_modules/icheck/skins/flat/blue.css",
    "../node_modules/icheck/skins/minimal/blue.css",
    "admin.less",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/jqueryui/jquery-ui.min.js",
    "../node_modules/admin-lte/bootstrap/js/bootstrap.min.js",
    "../node_modules/admin-lte/dist/js/app.min.js",
    "../node_modules/admin-lte/plugins/chartjs/Chart.min.js",
    "../node_modules/admin-lte/plugins/colorpicker/bootstrap-colorpicker.min.js",
    "../node_modules/admin-lte/plugins/datatables/jquery.dataTables.min.js",
    "../node_modules/admin-lte/plugins/datatables/dataTables.bootstrap.min.js",
    "../node_modules/admin-lte/plugins/daterangepicker/daterangepicker.js",
    "../node_modules/admin-lte/plugins/fastclick/fastclick.min.js",
    "../node_modules/admin-lte/plugins/input-mask/jquery.inputmask.js",
    "../node_modules/admin-lte/plugins/input-mask/jquery.inputmask.date.extensions.js",
    "../node_modules/admin-lte/plugins/input-mask/jquery.inputmask.extensions.js",
    "../node_modules/admin-lte/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js",
    "../node_modules/admin-lte/plugins/jvectormap/jquery-jvectormap-world-mill-en.js",
    "../node_modules/admin-lte/plugins/select2/select2.full.min.js",
    "../node_modules/admin-lte/plugins/slimScroll/jquery.slimscroll.min.js",
    "../node_modules/admin-lte/plugins/timepicker/bootstrap-timepicker.min.js",
    "../node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js",
    "../node_modules/bootstrap-fileinput/js/fileinput.min.js",
    "../node_modules/bootstrap-fileinput/js/plugins/sortable.min.js",
    "../node_modules/bootstrap-fileinput/js/plugins/purify.min.js",
    "../node_modules/bootstrap-fileinput/js/locales/ja.js",
    "../node_modules/bootstrap-fileinput/themes/fa/theme.min.js",
    "../node_modules/flickity/dist/flickity.pkgd.min.js",
    "../node_modules/fullcalendar/dist/fullcalendar.min.js",
    "../node_modules/fullcalendar/dist/locale/ja.js",
    "../node_modules/fullcalendar/dist/gcal.min.js",
    "../node_modules/fullcalendar-scheduler/dist/scheduler.min.js",
    "../node_modules/blueimp-canvas-to-blob/js/canvas-to-blob.min.js",
    "../node_modules/blueimp-load-image/js/load-image.all.min.js",
    "../node_modules/raphael/raphael.min.js",
    "../node_modules/moment/moment.js",
    "../node_modules/morris.js/morris.min.js",
    "../node_modules/jquery-knob/dist/jquery.knob.min.js",
    "../node_modules/icheck/icheck.min.js",
    "../node_modules/html5shiv/dist/html5shiv.min.js",
    "../node_modules/respond.js/dest/respond.min.js",
    "assets/js/ajax-load.js",
    "assets/js/form_parts_initialize.js",
    "assets/js/sidebar_addActive.js",
    "scripts.js"
  ],
  "environmentSource": "environments/environment.ts",
  "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }

actually, I succeeded angular compile, but while running on nginx, it vomits 2 errors below image.

and here's tsconfig.json below.

{
  "compileOnSave": true,
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types",
      "../node_modules/moment"
    ]
  }
}

and yet goes another. typings.d.ts(I don't know what I should have done with this)

// Typings reference file, you can add your own global typings here
// https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html

declare var System: any;

and this is me-made source. (you know, it's based on adminLTE login page. I was about to using iCheck plugin here.)

import { Component, OnInit } from '@angular/core';
import { Router }   from '@angular/router';


@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  bodyClasses:string = "login-page";
  body = document.getElementsByTagName('body')[0];
  icheck: JQuery;

  constructor(private router:Router) { 
  }

  ngOnInit() {
    //Add the login-page class to the body
    //$('body').addClass(this.bodyClasses);
    this.body.classList.add(this.bodyClasses);   //add the class

    this.icheck = jQuery('input[type="checkbox"].minimal-blue').iCheck({
      checkboxClass: "icheckbox_flat-blue",
      radioClass: "iradio_flat-blue",
      increaseArea: "20%" // optional
    });
  }

  ngOnDestroy() {
    //remove the login-page class to the body
    //$('body').removeClass(this.bodyClasses);
    this.body.classList.remove(this.bodyClasses);
  }

  ngAfterViewInit() {
  }

}

Could you give me any advice?

Answer 1

I suggest you use npm to install moment and them import it everywhere where you use it.

• npm install moment --save
• import moment from 'moment' in every TypeScript file where you use moment