Angular 2 bundle就像导入/导入多个模块一样

Question

我不知道如何陈述问题......所以,基本上我正在使用带有Typescript的Angular 2编写我自己的应用程序.我希望能够像我们使用Angular一样导入模块,我们可以在一行中导入多个相关模块.例如,我们可以在angular2 beta中执行此操作:

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

我想用我的应用程序做类似的事情.例如:

import { UserService, RoleService } from 'my-project/services';

此外,我希望能够为模型,管道,组件等做同样的事情......

还有一件事,文件夹结构将是这样的:

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';

然而，这并不理想，因为像../../. 为了解决这个问题，您需要再执行一个步骤：在（参见https://www.typescriptlang.org/docs/handbook/module-resolution.html）中指定baseUrl和pathsTypeScript 选项。tsconfig.json

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

tsconfig.json：

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

完成此操作后，您应该能够像这样导入您的服务：

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

但是，如果您还需要 import like my-project/services(my-project而不是app)，那么您还需要指定paths如下配置：

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

使用此配置，以下内容应该可以工作：

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

Answer 2

您需要在services文件夹内创建一个桶（例如），它将手动导出所有嵌套导出，这样您就可以从桶中导入 2 个（或更多）模块，而在此之前您必须使用 2 个不同的导入。

上次我听说，由于某种原因，这会破坏树摇动，但我对此可能是错的。

不管怎样，请在这里阅读更多内容。