Angular 无法找到我的其他组件

Question

这是我的文件夹结构：

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

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

进行编译

我正在使用 systemjs 将不同的 classes/modules 导入不同的文件，在我的 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 而不是编译器定义的。

Angular 无法找到我的其他组件

Angular unable to find my other components

typescript

systemjs

angular