我在 this post 中看到您可以使用 SystemJS 将外部 javascript 文件加载到我在 Angular 2 中的组件中。
在我的 index.html 中:
<script>
System.config({
packages: {
"frontOfficeA2/src": {
format: 'register',
defaultExtension: 'js'
},
"angular2-jwt": {
"defaultExtension": "js"
},
"ng2-bootstrap": {
"defaultExtension": "js"
},
"system": {
"defaultExtension": "js"
}
},
map: {
"angular2-jwt": "lib/angular2-jwt",
"ng2-bootstrap": "lib/ng2-bootstrap",
"moment": 'lib/moment/moment.js',
"system": 'lib/systemjs/dist/system.src.js'
}
});
System.import('frontOfficeA2/src/app.js').then(null, console.error.bind(console));
</script>
还有我的组件:
import {Component} from 'angular2/core';
import { DATEPICKER_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';
import { System } from 'system';
@Component({
selector: 'main',
templateUrl: 'app/components/main/main.html',
styleUrls: ['app/components/main/main.css'],
providers: [],
directives: [DATEPICKER_DIRECTIVES],
pipes: []
})
export class Main {
date: Date = new Date();
constructor() {
System.import('path/to/your/file').then(refToLoadedScript => {
refToLoadedScript.someFunction();
});
}
}
最后,当我启动我的应用时:
frontOfficeA2/src/app/components/main/main.ts(3,24): error TS2307: Cannot find module 'system'.
如果有人知道我做错了什么.. :)
谢谢:)
最佳答案
事实上,当您导入东西时,SystemJS 是在幕后使用的。这是因为您配置了 TypeScript 编译器来使用它。查看 tsconfig.json
文件:
{
"compilerOptions": {
"target": "ES5",
"module": "system", <---------------
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
如果你看一下编译后的 JS 文件(这些 JS 文件实际上是在浏览器中执行的),你会看到:
System.register(['angular2/platform/browser', 'angular2/http', './app.component'], function(exports_1) {
var browser_1, http_1, app_component_1;
return {
setters:[
function (browser_1_1) {
browser_1 = browser_1_1;
},
function (http_1_1) {
http_1 = http_1_1;
},
function (app_component_1_1) {
app_component_1 = app_component_1_1;
}],
execute: function() {
browser_1.bootstrap(app_component_1.AppComponent, [http_1.HTTP_PROVIDERS]).then(function (componentRef) {
console.log(componentRef.injector);
});
}
}
});
对于这样的 TypeScript 文件:
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app.component';
bootstrap(AppComponent, [ HTTP_PROVIDERS ]).then((componentRef) => {
console.log(componentRef.injector);
});
关于javascript - 我怎么能使用 system.import() 到组件 Angular 2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35898339/