Typescript 重命名Angular2导入模块

我想将@angular模块重命名为angular2，因为我发现它可读性更好，并且想了解导入是如何工作的

因此，在我尝试更改之前，

systemjs.config.js

如下所示：

(function(global)
{
    var map =
    {
        'app': 'app', // 'dist',
        '@angular': 'node_modules/@angular',
        /*...*/
    };

    var packages =
    {
        'app': { main: 'main.js', defaultExtension: 'js' },
        '@angular/common': { main: 'index.js', defaultExtension: 'js' };
        /*...*/
    };

    var config =
    {
        map: map,
        packages: packages
    };

    if (global.filterSystemConfig)
    {
        global.filterSystemConfig(config);
    }

    System.config(config);
})(this);

import { Component } from '@angular/core';

import { Component } from 'angular2/core';

应用程序中导入的Typescript文件如下所示：

(function(global)
{
    var map =
    {
        'app': 'app', // 'dist',
        '@angular': 'node_modules/@angular',
        /*...*/
    };

    var packages =
    {
        'app': { main: 'main.js', defaultExtension: 'js' },
        '@angular/common': { main: 'index.js', defaultExtension: 'js' };
        /*...*/
    };

    var config =
    {
        map: map,
        packages: packages
    };

    if (global.filterSystemConfig)
    {
        global.filterSystemConfig(config);
    }

    System.config(config);
})(this);

import { Component } from '@angular/core';

import { Component } from 'angular2/core';

这正如预期的那样有效。现在我将

systemjs.config.js

更改为：

(function(global)
{
    var map =
    {
        'app': 'app', // 'dist',
        'angular2': 'node_modules/@angular',
        /*...*/
    };

    var packages =
    {
        'app': { main: 'main.js', defaultExtension: 'js' },
        'angular2/common', { main: 'index.js', defaultExtension: 'js' };
        /*...*/
    };

    var config =
    {
        map: map,
        packages: packages
    };

    if (global.filterSystemConfig)
    {
        global.filterSystemConfig(config);
    }

    System.config(config);
})(this);

这样我就可以像这样导入Angular2模块：

(function(global)
{
    var map =
    {
        'app': 'app', // 'dist',
        '@angular': 'node_modules/@angular',
        /*...*/
    };

    var packages =
    {
        'app': { main: 'main.js', defaultExtension: 'js' },
        '@angular/common': { main: 'index.js', defaultExtension: 'js' };
        /*...*/
    };

    var config =
    {
        map: map,
        packages: packages
    };

    if (global.filterSystemConfig)
    {
        global.filterSystemConfig(config);
    }

    System.config(config);
})(this);

import { Component } from '@angular/core';

import { Component } from 'angular2/core';

当我尝试运行

npm start

时，现在出现以下错误：

file-where-i-import.component.ts（1,32）：错误TS2307:找不到模块“angular2/core”

---

为什么它不这样工作？我缺少什么？

问题是SystemJS配置仅用于运行时

---

TypeScript编译依赖于模块、类型等的

d.ts

文件。。。在这个配置上。编译器将查看

节点_modules

下的

@angular

文件夹，以便解析模块，因此Angular2的模块名称必须以

@angular/

前缀开头。

问题在于SystemJS配置仅用于运行时

---

TypeScript编译依赖于模块、类型等的

d.ts

文件。。。在这个配置上。编译器将查看

节点_modules

下的

@angular

文件夹以解析模块，因此Angular2的模块名称必须以

@angular/

前缀开头。

如果@angular有很多问题，请不要使用它。。开玩笑。。 你可以在下面试试

创建一个名为angular2的新文件，如下所示

export * from "@angular/core";

当你提到你可以使用

import { Component } from 'path to angular2 module';

   import { Component } from 'angular2';

现在它并不是您想要的，因为您必须使用引用路径而不是模块名。此外，您还必须包括您可能希望使用的angular中的所有模块。您还可以通过使用导出名称（如组件等）仅过滤和公开您可能想要的内容，并且您有机会添加模块以及其他模块

如果您想更多地了解模块解析在Typescript中的工作原理，可以查看

更新： 您可能有如下文件夹结构（摘自）

那么你可以用

import { Component } from 'path to angular2 module';

   import { Component } from 'angular2';

---

如果你对@angular有这么多问题，就不要使用它。。开玩笑。。 你可以在下面试试

创建一个名为angular2的新文件，如下所示

export * from "@angular/core";

当你提到你可以使用

import { Component } from 'path to angular2 module';

   import { Component } from 'angular2';

现在它并不是您想要的，因为您必须使用引用路径而不是模块名。此外，您还必须包括您可能希望使用的angular中的所有模块。您还可以通过使用导出名称（如组件等）仅过滤和公开您可能想要的内容，并且您有机会添加模块以及其他模块

如果您想更多地了解模块解析在Typescript中的工作原理，可以查看

更新： 您可能有如下文件夹结构（摘自）

那么你可以用

import { Component } from 'path to angular2 module';

   import { Component } from 'angular2';

您可以在tsconfig.json中为此指定：

TypeScript 2.0中提供了此功能，但您现在可以使用它：

npm安装typescript@next

您可以在tsconfig.json中为此指定一个：

---

---

TypeScript 2.0中提供了此功能，但您现在可以使用它：

npm安装typescript@next

所以我无论如何都不可能让它工作？我认为它可以在运行时工作，但你会有编译错误。。。这就是说，这不仅仅是一个模块重命名，因为一些新的公共模块现在出现在rc版本中，而您在测试版中只有

angular2/core

，

angular2/common

。好的，谢谢您的帮助。我想我会让它保持原样。所以我无论如何都不可能让它工作？我认为它可以在运行时工作，但你会有编译错误。。。这就是说，这不仅仅是一个模块重命名，因为一些新的公共模块现在出现在rc版本中，而您在测试版中只有

angular2/core

，

angular2/common

。好的，谢谢您的帮助。我想我会保持原样。我只是想知道是否有一个构建的方式，如果我只是错过了一些东西。不过还是要谢谢你的帮助：）@ChristianDreher。这是一种内置方式。对不起，我指的是我正在使用的当前版本的内置方式。我给了您的解决方案另一个机会，但它不适用于node 6.1.0和npm 3.8.6，因为typescript@next仅将typescript升级到1.9。因此，

路径

仍然缺失。我希望它将很快可用，因为您的解决方案是迄今为止最好的，除了它目前不适用之外（在您的解决方案工作后将立即更改接受的答案），我只是想知道是否有一个内置的方式，如果我只是错过了一些东西。不过还是要谢谢你的帮助：）@ChristianDreher。这是一种内置方式。对不起，我指的是我正在使用的当前版本的内置方式。我给了您的解决方案另一个机会，但它不适用于node 6.1.0和npm 3.8.6，因为typescript@next仅将typescript升级到1.9。因此，

路径

仍然缺失。我希望它将很快可用，因为您的解决方案是目前为止最好的，除了目前不可应用（在您的解决方案工作后将立即更改已接受的答案）这一事实之外，这是一个有趣的尝试，但我认为导入所有内容可能会降低应用程序的速度，不会带来太多好处。谢谢你的帮助，知道其他选择总是很好的。事实上，我对它没有任何问题，我只是在systemjs.config中修改了一些东西，并认为也许可以重命名一些东西。出于兴趣，我尝试了，但失败了，我想知道为什么：我不确定它是否会慢下来，但请在Angular Docs上阅读。。桶是一种将多个模块的输出汇总到单个方便模块的方法。桶本身就是一个容器