我使用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 });
感谢您的帮助!