重命名 Angular2 导入模块

Question

我想将 @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);

app-Typescript-files 中的导入如下所示：

import { Component } from '@angular/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 模块：

import { Component } from 'angular2/core';

当我尝试运行 npm start 时，我现在得到以下错误：

file-where-i-import.component.ts(1,32): error TS2307: Cannot find module 'angular2/core'.

为什么这样不行？我错过了什么？

Answer 1

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

TypeScript 编译依赖于 d.ts 模块、类型等文件以及此配置。编译器将查看 node_modules 下的 @angular 文件夹来解析模块，因此 Angular2 的模块名称必须以 @angular/ 前缀开头。

Answer 2

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

创建一个名为 angular2 的新文件，

export * from "@angular/core";

当您推荐时，您可以使用

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

现在它可能不是您想要的，因为您必须使用参考路径而不是模块名称。此外，您还必须包含您可能想要使用的 angular 中的所有模块。您还可以通过使用导出名称（如 Component 等）过滤和仅公开您可能想要的内容，您也有机会添加您的模块以及 angular 一个模块。

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

更新： 您的文件夹结构可能如下所示（摘自 Typescript Module Resolution），

   /root/src/angular2/package.json (if it specifies a "typings" property)
   /root/src/angular2/index.ts
   /root/src/angular2/index.d.ts

那么你可以使用

   import { Component } from 'angular2';

Answer 3

您可以在 tsconfig.json 中为此指定 path mapping:

"compilerOptions": {
    // ...omitted other options...
    "baseUrl": "",
    "paths": {
        "angular2/*": [
            "node_modules/@angular/*"
        ]
    }
}

此功能将出现在 TypeScript 2.0 中，但您今天就可以使用它：npm install typescript@next

重命名 Angular2 导入模块

Rename Angular2 import module

typescript

systemjs

angular