那些遇到过的问题

标签: systemjs

在没有Traceur的情况下在生产中使用SystemJS

我想使用SystemJS根据需要动态导入AMD模块和System.import()模块.当然,我可以包括<script src="system.js"></script>,但我收到的错误是Traceur没有定义.我故意不希望包括Traceur,或任何其他的依赖,以保持请求到最低限度.是否有一个版本的SystemJS允许System.import在一个半轻量级脚本中导入AMD和调用？

javascript systemjs

Him*_*mel
lucky-day
9
推荐指数
1
解决办法
871
查看次数

导入非打字稿npm模块的最佳解决方案

使用traceur和SystemJS使用ES6这种形式是正确的:

import _ from 'lodash';
Run Code Online (Sandbox Code Playgroud)

对于Typescript它是不够的 - 我得到错误error TS2307: Cannot find module 'lodash'所以,我安装'lodash.d.ts':

/// <reference path="lodash/lodash.d.ts" />
import _ from 'lodash';
Run Code Online (Sandbox Code Playgroud)

现在,我得到:Module '"lodash"' has no default export.来自Typescript编译器

所以,我尝试'节点样式':

/// <reference path="lodash/lodash.d.ts" />
let _ = require('lodash');
Run Code Online (Sandbox Code Playgroud)

我得到:Uncaught (in promise) Error: require is not a function在浏览器中

最后:

import _ = require('lodash');
Run Code Online (Sandbox Code Playgroud)

并且它有效,但它的'旧形式'不适合ES6.

有没有一种正确的方法可以使用ES6样式的Typescript导入非打字稿模块？

(打字稿1.6.2)

systemjs typescript1.6 angular

Yoo*_*rek
2016 06-22
8
推荐指数
1
解决办法
3388
查看次数

如何让我的Angular 2应用程序与桶文件导入一起使用？

我正在尝试遵循Angular 2风格指南04-10创建和导入桶在这里找到:https://angular.io/docs/ts/latest/guide/style-guide.html

当我运行我的应用程序时,angular现在尝试加载一个不存在的文件:"my-component-name-here.js".

为了说明这个问题,我修改了Angular 2示例应用程序以使用一个桶文件,它现在也引发了404错误.

我将英雄组件文件放入他们自己的名为heroes的文件夹中.我创建了一个名为heroes/index.ts的新文件:

export * from './heroes/heroes.component';
Run Code Online (Sandbox Code Playgroud)

我将app.component.ts中的import语句更改为:

import { HeroesComponent } from './heroes';
Run Code Online (Sandbox Code Playgroud)

当应用程序尝试加载它时,在开发人员控制台中看到以下错误:

Error: Error: XHR error (404 Not Found) loading app/heroes.ts(…)
Run Code Online (Sandbox Code Playgroud)

plunkr在这里找到:http://plnkr.co/edit/YXY0PwuFot1g1s6qTqDt？p = preview

我怀疑这与SystemJS有关,但我不太了解它来修复它.有人可以帮忙吗？提前致谢!

typescript systemjs angular

Fox*_*oxy
2019 02-11
8
推荐指数
1
解决办法
2449
查看次数

Angular 2 quickstart为什么我们需要index.html中的System.import

我在Angular 2中测试了我的QuickStart教程版本,我在其中使用了一个bundle js文件.index.html是这样的:

<html>
  <head>
    <title>Angular 2 QuickStart Deploy</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="css/styles.css">
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="lib/shim.min.js"></script>
    <script src="lib/zone.js"></script>
    <script src="lib/Reflect.js"></script>
    <script src="lib/system.src.js"></script>
    <script>
      System.import('app').catch(function(err) { console.error(err); });
    </script>
  </head>
  <!-- 2. Display the application -->
  <body>
    <my-app>Loading...</my-app>
    <!-- application bundle -->
    <script src="app/bundle.app.js"></script>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

因此,当我执行此操作时,我的Hello world消息将显示在屏幕上,但控制台中出现错误 syntax error: unexpected token <

经过大量测试后,我意识到如果我从index.html文件中删除以下行,一切正常,并且不会显示任何错误消息. System.import('app').catch(function(err){ console.error(err); });

所以...我认为这一行是应用程序的入口点,带有引导程序的主文件,但显然它不需要.我错过了什么吗？

谢谢.

UPDATE

这是有和没有System.import的结果的2个屏幕截图在这两种情况下它似乎都在工作,当System.import不在index.html中时没有错误,否则会有错误.此外,当System.import在索引中时,似乎它正在尝试加载应用程序模块,并且它以某种方式给出错误.我真的不明白为什么会这样.

在此输入图像描述 在此输入图像描述

另外,我的systemjs.config.js关于app: …

systemjs angular

Dav*_*vid
2016 07-08
8
推荐指数
1
解决办法
1万
查看次数

"命名空间"是systemJS中的一个导入

我想使用带有SystemJS 的库ip-address(注意,这个问题可能看起来很相似,但这是我在尝试完成此任务时遇到的另一个问题).

库ip-address依赖于util-deprecate.它导入如下:

var util = require('util');
Run Code Online (Sandbox Code Playgroud)

然后使用如下:

Address4.prototype.toV6Group =
  util.deprecate(Address4.prototype.toGroup6,
    'deprecated: `toV6Group` has been renamed to `toGroup6`');
Run Code Online (Sandbox Code Playgroud)

当我在节点项目中导入ip-address时...

var ipAddress = require('ip-address');
Run Code Online (Sandbox Code Playgroud)

......然后我没有遇到任何问题.

当我在SystemJS项目中导入ip-address时......

System.import('ip-address');
Run Code Online (Sandbox Code Playgroud)

...然后我收到一个错误:

util.deprecate is not a function
Run Code Online (Sandbox Code Playgroud)

如何配置SystemJS以执行此导入？目前我正在配置它......

const map: any = {
  'ip-address':'vendor/ip-address',
  'util':'vendor/util-deprecate'
}

const packages: any = {
  'ip-address': {main:'ip-address.js'},
  'util': {main: 'browser'}
};
Run Code Online (Sandbox Code Playgroud)

为了保存查找,util-deprecate的browser.js文件在这里,它直接导出deprecate函数.

注意,如果我修改ip-address模块​​以便所有调用都是以下形式,我可以使用它:

Address4.prototype.toV6Group =
  util(Address4.prototype.toGroup6,
    'deprecated: `toV6Group` has been renamed to `toGroup6`');
Run Code Online (Sandbox Code Playgroud)

如果我可以避免它,我宁愿不修改第三方库.

javascript systemjs jspm

Pac*_*ace
2017 05-23
8
推荐指数
1
解决办法
236
查看次数

我可以跨应用重用组件吗？

我是Angular2的新手,我有兴趣了解是否有可能在另一个应用程序中的一个应用程序中重用整套演示组件？

例如,我有一个名为MyApp的Angular 2应用程序,在这里我有一些我创建的常见组件,它们位于app/components/common文件夹中,每个组件都包含一个TypeScript,Sass和HTML文件.

我使用Gulp将TypeScript编译为JS,将Sass编译为CSS.

我现在发布这些常见组件可以在我的其他Angular 2应用程序中使用,因此我想在一个名为MyOtherApp的单独Angular 2应用程序中使用它们.

我希望能够从MyApp中提取所有常用组件,并能够在MyOtherApp中使用它们.

这可能吗？如果是这样,这种共同组件的最佳方法是什么？

正如我所说,我正在使用Gulp进行构建/运行,还有System.js用于Angular应用程序的配置设置.

如果需要,我可以分享一些我尝试过的代码,但我不确定分享的内容是什么,所以请求可能有用的内容,我会分享.

typescript gulp systemjs angular-components angular

Don*_*rty
2017 09-09
8
推荐指数
1
解决办法
2024
查看次数

SystemJS为rxjs加载许多文件

我有以下内容systemjs.config.js(基于我在互联网上找到的一些例子):

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'js:': 'js/',
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'js:angular2/core.umd.js',
            '@angular/common': 'js:angular2/common.umd.js',
            '@angular/compiler': 'js:angular2/compiler.umd.js',
            '@angular/platform-browser': 'js:angular2/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'js:angular2/platform-browser-dynamic.umd.js',
            '@angular/http': 'js:angular2/http.umd.js',
            '@angular/router': 'js:angular2/router.umd.js',
            '@angular/forms': 'js:angular2/forms.umd.js',
            '@angular/upgrade': 'js:angular2/upgrade.umd.js',
            // other libraries
            'rxjs': 'js:rxjs',
            'angular-in-memory-web-api': 'js:in-memory-web-api.umd.js'
        },
        // packages tells the System loader how to load when no …
Run Code Online (Sandbox Code Playgroud)

rxjs typescript systemjs rxjs5 angular

Rob*_*ner
2016 11-24
8
推荐指数
1
解决办法
2694
查看次数

在打字稿中解析 XML

使用 Typescript 2.0（tsc 版本 2.0.3）。

我尝试在 angular2/typescript 应用程序中使用 xml2js 节点库失败（请参阅https://www.npmjs.com/package/xml2js）。似乎很清楚我对 SystemJS 设置库以供使用的方式还不够熟悉。

要安装 xml2js 库，我执行了以下操作：

npm install --save xml2js
npm install --save @types/xml2js
Run Code Online (Sandbox Code Playgroud)

以下是相关文件：

tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir" : "build"
  }
}
Run Code Online (Sandbox Code Playgroud)

systemjs.config.js

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': …
Run Code Online (Sandbox Code Playgroud)

node.js typescript systemjs

Jua*_*ina
2017 05-23
8
推荐指数
1
解决办法
1万
查看次数

在angular 2中使用system.config.js文件有什么用？

var map,packages,var config是做什么的.并且还解释了map和package对象的所有配置属性.是否有可用配置的文档？

这是我的系统配置文件

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries
      'rxjs': …
Run Code Online (Sandbox Code Playgroud)

node.js systemjs angular

Man*_*ush
2017 03-21
8
推荐指数
2
解决办法
6826
查看次数

相对路径不起作用

当我在` http:// localhost/overview '时,模块沿着这条路径加载:

http://localhost/app/modules/overview/overview.module.js

但是当我转向页面http://localhost/overview/users然后按F5(刷新页面)时,我收到错误:

Error: Unexpected token <
  Evaluating http://localhost/overview/app/modules/overview/overview.module
Run Code Online (Sandbox Code Playgroud)

发生错误是因为URL不正确,他应该是这样http://localhost/app/modules/overview/overview.module.

如何让它正常工作？

这是项目结构:

在此输入图像描述

这是systemjs tsconfig:

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true
  }
}
Run Code Online (Sandbox Code Playgroud)

这是systemjs配置:

(function (global) {
    System.config({
        baseURL: "/",
        paths: {
            'npm:': '/node_modules/'
        },
        map: {
            app: 'app',

            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': …
Run Code Online (Sandbox Code Playgroud)

typescript angular-routing systemjs angular angular-router

san*_*074
2017 09-12
8
推荐指数
1
解决办法
644
查看次数

标签 统计

systemjs ×10

angular ×7

typescript ×5

javascript ×2

node.js ×2

angular-components ×1

angular-router ×1

angular-routing ×1

gulp ×1

jspm ×1

rxjs ×1

rxjs5 ×1

typescript1.6 ×1