标签: systemjs
typescript:导入jspm库
因此,我在将jspm包导入typescript时发现的大多数示例都假设我想使用Systemjs在浏览器中加载和解释它们.但是,我宁愿使用tsc构建commonjs模块并只导入js代码,因为在我看来,对我来说,这是更通用和反差的方法.
所以我的目录结构如下所示:
src/index.ts
jspm_packages/...
config.js
tsconfig.json
使用tsconfig具有以下内容:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"noEmitOnError": true,
"noImplicitAny": false,
"rootDir": "src",
"outDir": "target/app",
"sourceMap": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"declaration": true
},
"exclude": [
"jspm_packages",
"node_modules",
"typings",
"target"
]
}
出于测试目的,我安装了角度2 jspm install npm:angular2并试图在我的index.ts通道中导入它import { bootstrap } from 'angular2/platform/browser';
运行时tsc,我收到错误
src/index.ts(1,27): error TS2307: Cannot find module 'angular2/platform/browser'.
现在我想知道,我可以使用打字稿知道jspm包吗？我觉得我尝试了一切,从tsconfig排除列表中删除了jspm_packages,切换到节点模块解析或systemjs模块生成.也许我还没找到合适的组合.关于下一步尝试的任何提示？
推荐指数
解决办法
查看次数
Angular2 Material Design alpha.9-3对@ angular/material有'404 not found'
我按照角材料2的使用说明安装了@ angular/material.通过Atom,我更新了package.json,app.module,除了Getting Started说明之外,我更新了systemjs.config,如下所示:'@ angular/material':'node_modules/@ angular/material',
我收到这些错误:zone.js:1274 GET http:// localhost:3000/node_modules/@ angular/material / 404(Not Found)
(SystemJS)XHR错误(404 Not Found)loading http:// localhost:3000/node_modules/@ angular/material(...)
我相信我已经跟踪了这个问题,即许多@angular文件夹都有一个包含umd文件的bundle子文件夹,但@ angular/material文件夹没有bundle子文件夹.因此,'解包'功能找不到@ angular/material/material.umd.js
systemjs在我的舒适区之外,所以我不确定上述内容,但我无法用alpha.9-3的新文件结构解决404问题.这是相关代码(其他组件未显示).
的package.json
"@angular/material": "2.0.0-alpha.9-3",
app.module
import { MaterialModule } from '@angular/material';
@NgModule({
imports: MaterialModule.forRoot(),
systemjs.config
(function(global) {
var map = {
'app': 'app',
// angular bundles
'@angular': 'node_modules/@angular',
// other libraries
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs',
'@angular/material': 'node_modules/@angular/material',
};
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs':{ defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', …推荐指数
解决办法
查看次数
如何从'Rx`导入`Observable`(非角度)
我正在使用SystemJS将我的es2015项目加载到浏览器中.
这就是我做的
import {Observable} from 'rxjs/Rx';
const button = document.querySelector('button');
const start$ = Observable.fromEvent(button, 'click');
在这种情况下Observable是undefined.所以我试过了
import Observable from 'rxjs/Observable';
在这种情况下Observable是一个对象,但Observable.fromEvent是undefined(它似乎是一个空对象)
最后我做到了
import Rx from 'rxjs/Rx' // Rx.Observable
哪个做了.任何想法为什么其他两个不起作用？我见过他们使用过的代码.什么是首选导入方式Observable？
更新:如下所述,它在README中描述.但是,如果我这样做
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
const start$ = Observable.fromEvent(startButton, 'click');
我得到的Observable是undefined.如果我这样做
import Observable from 'rxjs/Observable';
这又Observable是一个空对象.在fromEvent不添加.
我正在使用RxJs 5.1.1,这是我的index.html/systemjs部分:
<script src="./node_modules/systemjs/dist/system.js"></script>
<script>
SystemJS.config({
baseURL: …推荐指数
解决办法
查看次数
使用 SystemJS 和 TypeScript 从捆绑文件中执行模块
我有一个包含 2 个类的简单 TypeScript 项目：Main.ts 和 Ball.ts，首先是导入第二个。我正在尝试创建一个类似于 AS3 项目的设置，其中有一个入口点类可以触发所有其他事情的发生。我想将所有 js 编译成一个文件，以便我可以更有效地加载它。我有的文件：
主文件
import Ball from "./Ball";
class Main {
a: number = 10;
constructor() {
console.log("Hello from Main!");
let ball:Ball = new Ball();
}
}
let main = new Main();
Ball.ts
export default class Ball{
shape:string = "round";
constructor(){
console.log("Ball has been created");
}
}
我正在使用的 TS 配置：
{
"compilerOptions": {
"target": "es5",
"module": "amd",
"outFile": "./public/js/bundle.js",
"strict": true
}
}
要在 js 中使用 amd 模块，我使用 SystemJS：
<!DOCTYPE html>
<html …推荐指数
解决办法
查看次数
Angular 5 - 在运行时动态加载模块(在编译时未知)
Angular 5是否可以加载在编译时未知但在运行时动态的模块/组件？
我想这可能无法使用webpack但可能使用system.js？
编辑:
整个想法是构建一个基于插件的应用程序,其中单个插件被放入插件文件夹中,angular将自动选择它,而无需重新编译和部署整个角度应用程序.插件是独立的功能.当然有路线导航等.意味着一旦角度理解有一个新的插件,它应该添加一些动态导航,以便用户将能够导航到插件等.
推荐指数
解决办法
查看次数
单 SPA 本地主机 CROS 起源问题 - React 应用程序
我是反应新手..我有反应应用程序，我已将其迁移到 Single-SPA。为了将我的应用程序与主应用程序（具有许多 Vue single-spa 应用程序的平台）集成，我将其重新构造为
MainApp - 它包括与进程相关的所有页面 - 在 localhost:3000 下运行
root-html-file - 它包括一个index.html和package.json文件index.html（在localhost:5000下运行-由SPA生成）
代码： root-html-file -> index.html
<script type="systemjs-importmap">
{
"imports": {
"myapp": "http://localhost:3000/",
"single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js",
"react": "https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.development.js"
}}</script>
Promise.all([System.import('single-spa'),System.import('react')]).then(function (modules) {
var singleSpa = modules[0];
singleSpa.registerApplication(
'myapp',
() => System.import('myapp'),
location => true
);
singleSpa.start();
myapp 应用程序作为独立的工作正常。仅当运行 root-html-file 应用程序（npm runserve）时，该应用程序会将 myapp 应用程序加载到其中，从而导致 CROS origin 问题。请查看屏幕截图
如果我方向错误，请指导我。
推荐指数
解决办法
查看次数
jspm:导入jQuery插件时出错
我正在尝试使用jspm/SystemJS 导入jQuery插件(即https://github.com/Mottie/Keyboard).
首先,我只需输入以下命令即可安装模块:
jspm install github:mottie/keyboard
我在导入jQuery之后添加了在我的代码中导入库的行:
import keyboard from 'mottie/keyboard';
但是,在运行代码时,我遇到以下错误:
Uncaught TypeError: Multiple defines for anonymous module
谷歌搜索错误没有给我一个解决方案,至少没有一个我能理解的...我不知道这里是否有一些jspm大师可以帮助我？:)
提前谢谢了...
推荐指数
解决办法
查看次数
Angular2 Rxjs 404错误
尝试启动Angular2应用程序时出现以下错误:
Failed to load resource: the server responded with a status of 404 (Not Found)
angular2-polyfills.js:332 Error: Error: XHR error (404 Not Found) loading http://localhost:55707/rxjs(…)
这是我的index.html:
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Streak Maker</title>
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<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.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> …推荐指数
解决办法
查看次数
d3 V4.2.1导入d3-selection-multi的TypeScript 2.0错误
我正在尝试使用jspm和systemjs将d3 v4导入到打字稿项目中.我可以使用这个正确导入d3
import * as d3 from 'd3';
这有效,它允许我进行选择等.我尝试使用attr函数并传递一个不起作用的对象.我发现d3 v4包含了它作为一个单独的模块.
用jspm下载该模块d3-selection-multi后.我尝试将它导入我的项目中.
import * as d3 from 'd3';
import 'jspm_packages/npm/d3-selection-multi@1.0.0';
然后我尝试使用attrs功能,但控制台记录以下错误
(索引):40错误:(SystemJS)d3.selectAll(...).data(...).style(...).attrs不是函数(...)
我也得到一些编译错误,我一直得到,但他们仍然编译和代码运行
error TS2307: Cannot find module 'd3'
error TS1110: Type expected
谁能解释我做错了什么并提供解决方案？
推荐指数
解决办法
查看次数
如何在带有SystemJs模块系统的Angular 4应用程序中使用ngx-bootstrap
我尝试了许多指定路径的变体,以允许SystemJS加载ngx-bootstrap包
System.config({
"defaultJSExtensions": true,
"paths": {
"@angular/core": "node_modules/@angular/core/bundles/core.umd.js",
"@angular/forms": "node_modules/@angular/forms/bundles/forms.umd.js",
"@angular/http": "node_modules/@angular/http/bundles/http.umd.js",
...
"*": "node_modules/*",
"ngx-bootstrap": "node_modules/ngx-bootstrap",
"highcharts": "node_modules/highcharts/highcharts.js",
"angular2-highcharts": "node_modules/angular2-highcharts/index.js"
},
"packages": {}
});
但它仍然无法正常加载..
我在控制台中看到以下错误
"(SystemJS) XHR error (404 Not Found) loading http://localhost:5555/node_modules/ngx-bootstrap.js
wrapFn@http://localhost:5555/node_modules/zone.js/dist/zone.js?1493823577322:1230:30 [<root>]
Error loading http://localhost:5555/node_modules/ngx-bootstrap.js as "ngx-bootstrap" from http://localhost:5555/hc/app.module.js"
"Not expecting this error? Report it at https://github.com/mgechev/angular-seed/issues"
推荐指数
解决办法
查看次数
标签 统计
systemjs ×10
angular ×4
jspm ×3
typescript ×3
javascript ×2
rxjs ×2
amd ×1
angular5 ×1
angularjs ×1
d3.js ×1
ecmascript-6 ×1
jquery ×1
reactjs ×1
rxjs5 ×1
single-spa ×1
webpack ×1