Angular2,用于凉亭组件的SystemJS路径

发布时间：2020-12-17 07:01:09 所属栏目：安全来源：网络整理

导读：我创建了一个示例Angular2应用程序,其中一个模块使用外部库(其余),如下所示： /// reference path="../../typings/tsd.d.ts" /import rest = require('rest');import jsonpClient = require('rest/client/jsonp');import mime = require('rest/interceptor/m

我创建了一个示例Angular2应用程序,其中一个模块使用外部库(其余),如下所示：

/// <reference path="../../typings/tsd.d.ts" />
import rest = require('rest');
import jsonpClient = require('rest/client/jsonp');
import mime = require('rest/interceptor/mime');
...

我用过

tsd install rest

将rest.d.ts放在“typings”目录中,并使用过

bower install rest

获取运行时版本(这在任何地方都没有解释.我假设我必须做这样的事情？)

我已经设置了我的gulp脚本,将两个目录从bower_components(“rest”及其依赖“when”)复制到dist / lib中

应用程序本身编译良好,但在浏览器中,它无法解析其余/何时模块依赖.

我已经添加了

System.config({
      "baseURL": "/","transpiler": "traceur","paths": {
        "components/*": "components/*.js","provider/*": "provider/*.js","services/*": "services/*.js","model/*": "model/*.js","rest": "lib/rest/rest.js","rest/*": "lib/rest/*.js","when": "lib/when/when.js","when/*": "lib/when/*.js","*": "lib/*.js"
      }
    });

到我的index.html文件,我可能继续将文件添加到该列表,但不知何故,这感觉……错了.

当然,我必须在index.html中列出每个包的内部文件结构,这是不对的？我看到“when”模块假定在“./lib”中找到自己的依赖项,其中“rest”具有完全不同的结构.

所以,我的问题是：

>在如何将通过bower(或npm)管理的javascript包导入Angular2的客户端时,我有什么误解？
>我真的需要列出System.paths中每个模块的每个文件才能使它工作吗？

解决方法

TSD已弃用,请使用 typings安装声明文件(.d.ts).声明文件,如果安装正确,可以在typings目录中找到.声明文件描述了外部JavaScript库的形状.它们主要在设计时帮助您(代码完成,类型检查等).您不需要在打字稿中导入它们.可以使用tsconfig.json文件中的exclude选项将它们从typescript编译过程中排除.您不需要在System.config中包含外部JavaScript库,只需在index.html中创建脚本引用即可.您可以将您的System.config中的angularcript模块(如angular2)映射到其他URL,并将您自己的typescript应用程序声明为包.
所以：

外部JavaScript库的.d.ts文件主要是设计时文件.
> typescript模块可以映射到您自己的URL
>将您自己的打字稿应用程序定义为包.
>不,您不必继续向System.config添加文件.

示例tsconfig.json：

{
  "compilerOptions": {
    "target": "es5","module": "system","moduleResolution": "node","sourceMap": true,"emitDecoratorMetadata": true,"experimentalDecorators": true,"removeComments": false,"noImplicitAny": false,},"exclude": [
    "node_modules","wwwroot","typings/main","typings/main.d.ts"
  ]
}

使用wwwroot / cool / app中的应用程序示例System.config：

System.config({
    defaultJSExtensions: true,packages: {
        'cool/app': {
            format: 'register',defaultExtension: 'js'
        },map: {
        'rxjs': 'assets/scripts/rxjs','angular2': 'assets/scripts/angular2'
    }
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!