Angular无法找到我的其他组件

Question

这是我的文件夹结构：

正如您所看到的，我有一些组件，但当我尝试将一个组件包含到另一个组件的文件中时，gulp说它无论我放的是什么网都找不到它。

我一直在四处寻找疯狂的原因，为什么会发生这种情况，但我发现你需要在项目的根目录中有一个tsconfig.json文件，然后我将其包括在内，但它似乎并没有做很多事情。该文件本身仅包含{}，这是您应该需要的最低限度，因为gulp使用gulp-typescript（gulp-typescript）来处理编译。

我使用systemjs将不同的类/模块导入到不同的文件中，并且在我的index.html中，我已将其配置为：

System.config({
  packages: {
    app: {
      format: 'register',
      defaultExtension: 'js'
    }
  }
});

然后我像这样启动我的Angular 2应用程序（也在index.html中）：

System.import('./app/assets/scripts/modules/boot/boot').then(null, console.error.bind(console));

示例组件文件core.component.ts：

import {Component} from 'angular2/core'; // Works
import {NavComponent} from './app/assets/scripts/modules/nav/nav.component'; // Unable to find this file says gulp while compiling the typescript into js

@Component({
  selector: 'core-app',
  templateUrl: './app/assets/scripts/modules/core/core.component.html', // Also works
  styleUrls: ['./app/assets/scripts/modules/core/core.component.css'] // Also works
})

export class CoreComponent {

}

有关为何发生这种情况的任何想法？

Answer 1

您的导入应该是

import {NavComponent} from '../nav/nav.component';

因为ES6导入使用相对于文件的文件路径。

您的组件元数据中的URL工作方式不同：它们是为Angular 2而不是编译器定义的。