Question

我正在使用angular-cli与Angular2开发进行斗争。

我并不完全知道如何设置我的源代码查看其他外部CSS＆＃39;，javascript库。

首先，这是我的angular-cli配置。（嗯，你知道，首先我在这里加载了很多库来制作另一个页面）

"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"
  }

实际上，我成功进行了角度编译，但是在nginx上运行时，它会在图像下方呕吐2个错误。

以及下面的tsconfig.json。

{
  "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"
    ]
  }
}

然而另一个。 typings.d.ts（我不知道我应该怎么做）

// 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;

这是我自己的来源。（你知道，它基于adminLTE登录页面。我正准备在这里使用iCheck插件。）

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() {
  }

}

你可以给我任何建议吗？

Answer 1

我建议您使用npm安装时刻，然后将它导入到您使用它的任何地方。

npm install moment --save
import moment from 'moment'在您使用的每个TypeScript文件中

角cli.json？说＆＃34;时刻没有定义＆＃34;

1 个答案: