Angular 2 bundle ，如导入/导入多个模块

Question

我不知道怎么回答这个问题...所以，基本上我是在使用 Angular 2 和 Typescript 编写自己的应用程序。我希望能够像使用 Angular 那样导入我的模块，我们可以在一行中导入多个相关模块。例如，我们可以在 angular2 beta 中这样做:

import { Component, OnInit, Input } from 'angular2/core';

我想对我的应用做类似的事情。例如:

从 'my-project/services' 导入 { UserService, RoleService };

此外，我希望能够对模型、管道、组件等执行相同的操作...

还有一件事，文件夹结构应该是这样的:

src/app/services
src/app/components
src/app/models
src/app/pipes

我尝试做的事情:在路径 src/app 上，我为每个“ bundle ”创建了文件，例如 services.d.ts、models.d.ts、pipes.d.ts...然后我尝试映射到 SystemJS 配置，如下所示:

(function(global) {

  // map tells the System loader where to look for things
  var map = {
    'app':                        'src/app', // 'dist',
    'rxjs':                       'node_modules/rxjs',
      'my-project/components':                  'src/app/components',
      'my-project/services':                'src/app/services',
      'my-project/models':                        'src/app/models',
      'my-project/pipes':                           'src/app/pipes',
    '@angular':                   'node_modules/@angular'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { format: 'register', main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
  };

  var packageNames = [
    'my-project/components',
    'my-project/services',
    'my-project/models',
    'my-project/pipes',
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
  ];

  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

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

  System.config(config);

})(this);

问题是 Visual Studio Code 无法识别我的 .ts 文件中的导入。它说找不到模块。

Answer 1

你需要两件事来完成这个。首先，正如其他答案指出的那样，您需要在 index.ts 中创建“桶”( src/app/services ) , src/app/models和其他此类文件夹。所以你的文件夹结构看起来像这样:

哪里index.ts文件包含您要在应用程序中导入的内容的导出:

export * from './service1';
export * from './service2';

到目前为止，这将为您提供这样做的可能性:

import { Service1, Service2 } from '../../services';

但是，由于像 ../../ 这样的相对路径，这并不理想。 .为了解决这个问题，您需要再做一步:指定 baseUrl和 paths tsconfig.json 中的 TypeScript 选项(参见 https://www.typescriptlang.org/docs/handbook/module-resolution.html)。

如果你只想摆脱相对路径，你只需要指定baseUrl像这样的选项:

tsconfig.json:

{
  "compilerOptions": {
    ...
    "baseUrl": "./src"
  }
}

完成后，您应该能够像这样导入您的服务:

import { Service1, Service2 } from 'app/services';

但是如果你还需要像my-project/services这样的导入( my-project 而不是 app )，那么您还需要指定 paths配置如下:

{
  "compilerOptions": {
    ...
    "baseUrl": "./src",
    "paths": {
      "my-project/*": [
        "app/*"
      ]      
    }
  }
}

使用此配置，以下应该可以工作:

import { Service1, Service2 } from 'my-project/services';