Angular 2 cli - Broccoli cannot find module

Question

Dear angular 2 devs...

I get problems with trying to import a directive in my main module. I am using 'angular-cli' in order to generate modules but Broccoli plugin keeps on saying that it can't find my newly created module...

Here's some code. The newly created module is unchanged since its creation from angular-cli (version 1.0.0-beta.5). On the main module of my project the html template looks like this:

<div id="content">
  <div class="firstname">
    <div class="letter"><p class="animated rotate1">D</p></div>
    <div class="letter"><p class="animated rotate2">a</p></div>
    <div class="letter"><p class="animated rotate3">v</p></div>
    <div class="letter"><p class="animated rotate4">i</p></div>
    <div class="letter"><p class="animated rotate5">d</p></div>
    <div class="lastname animated">Rueda</div>
</div>

<div class="job animated">
  <h4>{{jobTitle}}</h4>
</div>

<!--<app-cv-menu></app-cv-menu>-->
</div>

The last bit will be uncommented once I get to import correctly my directive. Now, the main module ts file is barely unchanged... I have created the 'jobTitle' field and added my new module class to the directives as follows:

import { Component } from '@angular/core';
import {CvMenuComponent} from "src/app/cv-menu/cv-menu.component";

@Component({
  moduleId: module.id,
  selector: 'david-rueda-app',
  templateUrl: 'david-rueda.component.html',
  styleUrls: ['david-rueda.component.css'],
  directives: [CvMenuComponent]
})
export class DavidRuedaAppComponent {
  jobTitle = 'web dev';
}

Finally here is the error I get from Broccoli:

The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
mymain.component.ts (2, 31): Cannot find module 'src/app/cv-menu/cv-menu.component'.

I hope you can help me :) Thank you

Answer 1

Looks like this error is due to incorrect import path.

You are trying to import CvMenuComponent (from src/app/cv-menu/cv-menu.component) in DavidRuedaAppComponent (which is in src/app).

So, in this case import path should not start from src/app. Instead try with

import {CvMenuComponent} from "./cv-menu/cv-menu.component";