Question

我使用angular-cli创建一个新的Angular 2项目。我正在尝试添加js库kinto。

然而，Angular 2使用typescript，而kinto是一个js库，当我想导入它时，Angular不会检测到我的node_modules中的kinto.js。

我试图在我的index.html中直接导入它并且它不起作用

app.component.ts

import { Component } from '@angular/core';
import  { EnvComponent } from "./env/env.component"
import { Kinto } from "../../node"

// Routage
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [ROUTER_DIRECTIVES, EnvComponent]
})

export class AppComponent {

  constructor(){

  }

}

的index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ModuleApp</title>
  <base href="/">

  {{#unless environment.production}}
  <script src="/ember-cli-live-reload.js" type="text/javascript"></script>
  {{/unless}}
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="vendor/materialize-css/dist/css/materialize.css">
  <link rel="stylesheet" href="styles.css">
  <script src="../node_modules/requirejs/require.js"></script>
</head>
<body>
<header>
  <img src="app/ressources/img/INTESENS-logo-site-internet.png" alt="">
</header>
<app-root>
  <div class="preloader-wrapper big active" id="loader">
    <div class="spinner-layer spinner-green-only">
      <div class="circle-clipper left">
        <div class="circle"></div>
      </div>
      <div class="gap-patch">
        <div class="circle"></div>
      </div>
      <div class="circle-clipper right">
        <div class="circle"></div>
      </div>
    </div>
  </div>
</app-root>

{{#each scripts.polyfills}}
<script src="{{.}}"></script>
{{/each}}
<script src="../node_modules/kinto/dist/kinto.js"></script>
<script>
  System.import('system-config.js').then(function () {
    System.import('main');
  }).catch(console.error.bind(console));
</script>


</body>
</html>

system.config.ts

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
};

/** User packages configuration. */
const packages: any = {
};

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
const barrels: string[] = [

  'materialize-css',

  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/forms',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',

  // App specific barrels.
  'app',
  'app/shared',
  'app/module',
  'app/env',
  /** @cli-barrel */

];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
  cliSystemConfigPackages[barrelName] = { main: 'index' };
});

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js',
    'materialize' : 'vendor/materialize-css'
  },
  packages: cliSystemConfigPackages
});

// Apply the user's configuration.
System.config({ map, packages });

感谢您的帮助！

将Kinto（js library）导入Angular 2 projet

0 个答案: