Question

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

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

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

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

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

还有一件事，文件夹结构将是这样的：

的src /应用/服务
  SRC /应用/组件
  SRC /应用/型号
  src / app / pipes

我试图做的事情：在路径src / app上，我为每个＆＃39;创建了文件，例如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';

Answer 2

您需要在<div id='parent'> <div class='box'></div> <div class='box'></div> <div class='box'></div> </div>文件夹中创建一个桶（例如），它将手动导出所有嵌套导出，这样您就可以从桶中导入2个（或更多）模块，在此之前d必须使用2种不同的进口。

最后我听说，由于某种原因，这会打破树木震动，但我可能会对此感到不对。

无论如何，请多读一些here。

Answer 3

编辑：更接近您想要的内容

您可以生成应用的声明文件并将其添加到@types文件夹（或创建自己的文件并将其添加到tsconfig的typeRoots数组中）。

新tsconfig

您可以使用控制台，但我建议您创建一个新的tsconfig_decl.json文件。遗憾的是，我没有找到创建声明的方法，因此您需要在之后清除dist文件夹。

示例tsconfig_decl.json

重要的属性是declaration，declarationDir，我想outDir知道要删除哪个文件夹。

{
  "compilerOptions": {
    "baseUrl": "",
    "declaration": true,
    "declarationDir": "../node_modules/@types/myproject",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/dec-del",
    "sourceMap": true,
    "target": "es5",

    "typeRoots": [
      "../node_modules/@types"
    ]
  }
}

生成声明

tsc -p "src/tsconfig_decl.json"

如果文件夹结构/桶正确，您应该可以使用

import { AuthService, UserService } from 'myproject/services';

---------------旧答案---------------

如果你有这个结构

的src /应用/服务
  SRC /应用/组件
  SRC /应用/型号
  SRC /应用程序/管

您可以在这些文件夹中创建index.ts个文件（桶），导出所有可用的服务/组件/ ....然后，您可以使用app/services访问它们。它并不完全是你想要的，但你可以重命名app文件夹以获取你的项目名称，或者我想改变构建过程可能会有所帮助。

<强>的src /应用/服务/ index.ts

export * from './auth.service';
export * from './user.service';
...

使用服务

import { AuthService, UserService } from 'app/services';
...

如果你有一个更深的结构，你需要在链上创建桶或使用顶层的相对路径来获得你想要的路径。

Angular 2 bundle像导入/导入多个模块

3 个答案: