我有以下代码：
索引.html
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<script src="test.js"></script
<script>
System.import('test.js')
.then(null, console.error.bind(console));
</script>
配置文件
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outFile": "test.js"
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
在我的项目的根目录中，我将 tsc 创建的“outFile”命名为“test.js”——似乎所有组件、模块等都在 test.js 中正确连接，但应用程序没有加载任何内容除了最初的“正在加载...”之外，在浏览器中访问 index.html 时没有控制台错误。
还要注意初始 index.html：
<body>
<rz-app>Loading...</rz-app>
</body>
所以我实际上只是在 html 页面上得到“正在加载...”。
我一直在用头撞墙，我知道这很简单......
问那么，我做错了什么 - 如何在我的 html 中包含连接的 ts outFile？
我正在使用 typescript 编译器将我的模块捆绑到一个 main.js 文件中，使用 tsconfig.json 中的这些设置：
"module": "system",
"out": "docs/js/main.js"
这是有效的，所以根据SystemJS 文档，我只需要在我的 HTML 中包含 SystemJS 生产文件并使用这些标签启动应用程序：
<script src="js/system.js"></script>
<script>
SystemJS.import('js/main.js');
</script>
我的应用程序：
import { Message } from "./message";
export class App {
constructor() {
let demomessage = new Message("hello");
}
}
export class Message {
constructor(str:string) {
console.log(str);
}
}
这会在 main.js 中生成以下 javascript 代码：
System.register("message", ...) {
// message code here
});
System.register("app", ...) {
// app code here
});
我缺少的部分（微软总是缺乏的 Typescript-documentation也没有解释）是如何实际启动应用程序...... SystemJS 如何知道哪个类是起点？即使我只是将 …
我尝试ngx-datatable在我的 angular 4 项目中使用 system.js 来加载模块，但它会引发如下错误：
无法绑定到“行”，因为它不是 ngx-datatable 的已知属性。
无法绑定到“列”，因为它不是 ngx-datatable 的已知属性。
ngx-datatable 不是已知元素：
我猜 system.js 没有正确加载模块，但我找不到有关如何执行此操作的有效演示。该文档也没有帮助。
system.config.js：
map: {
...
'@swimlane/ngx-datatable': 'npm:@swimlane/ngx-datatable/release/index.js',
...
}
app.module.ts:
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
...
imports: [
...
NgxDatatableModule,
...
],
组件.html：
<ngx-datatable
[rows]="rows"
[columns]="columns">
</ngx-datatable>
组件.ts：
rows = [
{ name: 'Austin', gender: 'Male', company: 'Swimlane' },
{ name: 'Dany', gender: 'Male', company: 'KFC' },
{ name: 'Molly', gender: 'Female', company: 'Burger King' },
];
columns = …我想静态地为一个项目提供服务，该项目使用 webcomponents（使用 lit-html），没有任何打包工具，如 webpack 等。
示例项目由以下结构组成：
index.html
app.js
package.json
package.json：
{
"name": "lit",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@webcomponents/webcomponentsjs": "^2.2.7",
"lit-element": "^2.0.1"
}
}
app.js：
import { LitElement, html } from 'lit-element';
class FooElement extends LitElement {
render() {
return html`<div>hello world!</div>`;
}
}
window.customElements.define('x-foo', FooElement);
最后，index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title> …我找到了npm模块google-maps-api并安装了它(npm install google-maps-api)但是我无法弄清楚如何用systemjs/jspm导入它(jspm找不到这个模块).这是我的config.js的配置:
"paths": {
"*": "app/dist/*.js",
"github:*": "app/jspm_packages/github/*.js",
"npm:*": "app/jspm_packages/npm/*.js" }
所以,当我尝试做这样的事情时:
import {mapsapi} from 'google-maps-api';
我在浏览器控制台中收到以下错误:
GET https:// localhost:44308/app/dist/google-maps-api.js 404(未找到)
看看文件系统,我看到npm在app/node_modules/google-maps-api下安装了模块,那么如何在Aurelia模块的import子句中引用它呢？
这适用于systemjs库,而不是systemjs-builder
我可能在这里有一些优势.但我正在尝试设置我的前端Web应用程序,以在命令行中运行它的单元测试.我的设置当前构建了systemjs寄存器格式的typescript,并根据其规范将负载导入到站点中.我目前面临的问题是我的一个依赖项reflect-metadata有一个节点自动检测系统进行require('crypto')调用,这是一个本机节点模块(在npm中不可用).我收到的错误是:
错误:ENOENT:没有这样的文件或目录,打开"/Users/path/to/project/node_modules/crypto.js"
我理解这里有很多东西在玩,但我所遵循的行为是让systemjs完全忽略require('crypto')调用并允许它完全不变,因为节点会在运行时正确加载它.
由于我们正在创建的多模块企业应用程序,由于接收Systemjs版本的子依赖项而不是临时commonjs构建,我实际上无法自由地将打字稿导出到commonjs.(唯一的方法是在我们的私有npm dist构建中包含commonjs版本,这远非理想)
这是我用于系统的当前配置,因为我一直试图让系统忽略加密库所需.我已经把它保持在上面生成错误的确切状态,评论等所有你可以看到我尝试过的东西.
System.config({
defaultJSExtensions: true,
map: {
'angular2': 'node_modules/angular2',
'reflect-metadata': 'node_modules/reflect-metadata/Reflect',
'crypto': 'node_modules/crypto'
}
// packages: {
// 'reflect-metadata': {
// format: 'global',
// exports: 'Reflect',
// defaultExtension: false,
// meta: {
// '*': {
// defaultExtension: false
// }
// }
// }
// }
// meta:{
// 'reflect-metadata/Reflect':{
// format: 'global',
// exports: 'Reflect',
// defaultExtension: false
// }
// }
});
我正在尝试编译angular2应用程序,但我收到以下错误:
错误:XHR错误(404 Not Found)加载http:// localhost:3000/node_modules/rxjs(...)
systemjs.config.js
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': {
main: 'main.js',
defaultExtension: 'js'
},
'rxjs': {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: 'index.js',
defaultExtension: 'js'
},
};
var ngPackageNames = [
'common', …我SystemJS用来构建一个Angular 2应用程序,我想开始MathJax在组件中使用.我安装了:
npm install --save-dev mathjax
npm install --save @types/mathjax
MathJax现已安装在/node_modules/mathjax.当我的组件执行时import "mathjax",文件/node_modules/mathjax/MathJax.js已加载.到现在为止还挺好.
问题是该文件然后尝试使用相对于项目根目录而不是MathJax安装目录的路径加载其他文件.
例如,MathJax.js尝试加载
/extensions/MathMenu.js 404 Not found
/extensions/MathZoom.js 404 Not found
正确的路径是
/node_modules/mathjax/extensions/MathMenu.js
/node_modules/mathjax/extensions/MathZoom.js
快速查看源文件内部显示URL是这样引用的:
[MathJax]/extensions/MathMenu.js
知道我应该在哪里解决这个问题吗？我知道我不应该更改MathJax.js文件本身,因为更新后将覆盖任何更改.使用htaccess或其他服务器端重定向也没有意义.
我知道我可以使用CDN加载一个有效的MathJax包:
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_SVG"></script>
但是我正在尝试学习如何将库集成到我的构建设置中.
为什么以下TypeScript代码编译,但systemjs无法在运行时正确加载依赖项？
import { Observable } from 'rxjs';
let temp123 = new Observable<String>();
但是,这有效:
import { Observable } from 'rxjs/Observable';
let temp123 = new Observable<String>();
具体来说,第一个代码会生成一个包含以下代码的.js文件:
var Observable_1 = require('rxjs');
var temp123 = new Observable_1.Observable();
但第二个代码生成这个:
var Observable_1 = require('rxjs/Observable');
var temp123 = new Observable_1.Observable();
行require('rxjs')失败并出现404错误,因为那里没有文件.为什么typescript编译器能够解决这个问题,但是systemjs无法在运行时加载它？
另外值得注意的是:只有在使用Observable执行某些操作时才会出现此问题.例如,以下代码有效:
import { Observable } from 'rxjs';
let temp123: Observable<String> = null;
let xyz = temp123.first();
我可以使用 Observable,并在其上调用方法,而不会在TypeScript编译器中生成require('rxjs').但我无法构建一个,我也无法扩展它.
版本:TypeScript 2.0.3,Systemjs 0.19.27,rxjs 5.0.0-beta.12
我在Plunker中有一个Angular应用程序,因为我已经升级了我的应用程序以使用Angular 6和rxjs 6 ,所以它不再有效.
这是我的config.js档案:
var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
angularVersion = ''; //picks up latest
}
else {
angularVersion = '@' + window.AngularVersionForThisPlunker;
}
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'ngx-duration-picker': 'https://unpkg.com/ngx-duration-picker@latest/bundles/ngx-duration-picker.umd.js',
'app': './src',
'@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
'@angular/common/http': …systemjs ×10
angular ×5
javascript ×3
typescript ×3
node.js ×2
rxjs ×2
aurelia ×1
build ×1
datatable ×1
es6-modules ×1
html ×1
jspm ×1
lit-element ×1
mathjax ×1
plunker ×1