Typescript 通过index.ts文件导入组件时main.ts中出现异常

我知道这个例外：

组件“AppComponent”视图上意外的指令值“未定义”

这很常见，但没有其他问题对我有帮助，因为它们经常引用循环依赖项或缺少

export

语句。但是没有解决这个问题的方法

我有一个具有以下结构的项目

src/
    myproject/
        components/
        services/
        templates/
        ...
        main.ts
    index.html
    systemjs.config.js
public/
    libs/                   <- required libs, copied from node_modules
    myproject/              <- compiled .ts files and copied resources from /src/myproject
    index.html              <- copied from /src/myproject
    systemjs.config.js      <- copied from /src/myproject
gulpfile.ts
*.json                      <- tsconfig, package, typings, ...

所有my Angular2组件都在文件夹

/src/myproject/components

中，并且有一个

index.ts

文件，用于导出每个定义的类。此文件如下所示：

// /src/myproject/components/index.ts
export * from './app.component';
export * from './a.component';
export * from './b.component';
export * from './c.component';

// excerpt from /src/myproject/main.ts
import { AppComponent } from 'myproject/components';

// excerpt from /src/myproject/main.ts
import { AppComponent } from './components';

这种设置的原因是能够有好看的和容易的导入。例如，如果我需要

ComponentA

、

ComponentB

和

ComponentC

（它们在

/src/myproject/components/{a，b，c}.component.ts

中定义），那么我可以只做以下陈述：

// excerpt from /src/myproject/components/app.component.ts
import  { ComponentA, ComponentB, ComponentC } from 'myproject/components';

这确实很有效：我在编译时没有问题，在浏览器中访问它时也没有问题（

systemjs.config.js

负责正确的解析）

但有一个例外。如果我在

main.ts

文件（

/src/myproject/components/app.component.ts

）中导入主

AppComponent

，如下所示：

// /src/myproject/components/index.ts
export * from './app.component';
export * from './a.component';
export * from './b.component';
export * from './c.component';

// excerpt from /src/myproject/main.ts
import { AppComponent } from 'myproject/components';

// excerpt from /src/myproject/main.ts
import { AppComponent } from './components';

尝试在浏览器中查看myproject时出现以下异常：

异常：组件'AppComponent'视图上未定义的指令值''

但是，如果我将此导入更改为以下内容：

// excerpt from /src/myproject/main.ts
import { AppComponent } from 'myproject/components/app.component';

一切正常。请注意，

main.ts

是此导入不起作用的唯一文件。所有其他进口商品都很有魅力。例如，在

AppComponent

中，如上面所示

如果我把所有的东西都写下来，这个问题就太大了，所以请原谅，我决定只添加一个MWE作为GitHub存储库。您可以从以下位置获取整个代码：

我还按下了

/public

目录。使用浏览器访问此文件时，从技术上讲，您应该会遇到相同的错误。如果您想自己构建，可以使用

gulp clean

，

tsc

（注意：

gulp build

由于

gulp typescript

中的错误而无法工作），

gulp resources

，

gulp libs

所以问题是：除了

main.ts

中的第一个导入之外，为什么每个导入都可以工作？我非常喜欢这个设置，因为我可以非常方便地导入所有内容，而且看起来很不错此外，我希望它始终如一

我真的很感谢任何帮助，因为这是一个巨大的问题，老实说，这不是一个最小的工作示例

更新：到目前为止，我只收到了关于如何修复异常的答案，但我自己在OP中提供了一个解决方案。我知道如何避免它，但我不想使用相对导入，我希望它无处不在。那么我能做些什么来修复这个异常呢？这是什么原因？如果无法修复：为什么？在这个问题上，我必须向谁讲话？字体脚本，角度，…？

---

更新2：由于我仍然无法使其正常工作，我现在将启动赏金计划

我将导入以下内容：

// /src/myproject/components/index.ts
export * from './app.component';
export * from './a.component';
export * from './b.component';
export * from './c.component';

// excerpt from /src/myproject/main.ts
import { AppComponent } from 'myproject/components';

// excerpt from /src/myproject/main.ts
import { AppComponent } from './components';

使用以下SystemJS配置：

System.config({
  (...)
  packages: {
    (...)
    src: {
      main: 'index.js',
      defaultExtension: 'js'
    }
  }
});

更新

---

对于我来说，只有相对路径对我有效，当我导入一个绝对路径时，除了

node\u模块中的那些路径之外，它不能正常工作

我发现一个有用的链接可以帮助你

---

您需要将导入更改为

import { AppComponent } from './components';

---

它对我来说很好

Put

export*from./app.component'在
索引.ts的末尾

///src/myproject/components/index.ts
从“/a.component”导出*；
从“/b.component”导出*；
从“/c.component”导出*；
从“/app.component”导出*；

我想应该行得通，因为我也有同样的问题


如果没有，请执行以下操作：


可以将
index.ts
看作是将导出文件的所有代码都写入其中

然后根据“先定义后使用”规则对导出进行重新排序

不要使用
index.ts
作为其中导出的文件的代理，而使用也从同一
index.ts
文件导出的其他文件，反之亦然（也称为：循环依赖关系）。换句话说

无论您在哪里执行导入操作，都不要在那里使用
index.ts
，如果您在同一
index.ts（读取目录）
中有
其他组件
，这是必要的。
从
index.ts
相互导入，这将失败

上述内容同样适用于
服务

它现在应该可以工作了，如果不行，请查看AppComponent的构造函数，看看是否有其他
index.ts
导出在使用中，它们之间存在内部依赖关系，然后使用相同的规则对它们重新排序

这也是为什么我们不在一个文件中定义两个类的原因

问题是：为什么它不能与
myproject/components
一起工作？一定是某个地方出错了，因为在所有其他文件中它都起作用。我希望它始终如一这也不能回答我的问题。我想让它保持原样，使用
myproject/components
，并修复为什么这个单一导入对我不起作用的错误，只有相对路径对我起作用，当我导入一个绝对路径时，除了
node_modules
中的那些路径外，其他路径都无法正常工作，我发现一个有用的链接可以帮助您在OP中引用的回购协议使用绝对路径。好吧，除了在
main.ts
中的这个导入。好吧，谢谢你的努力：）的确<