'ENOENT: no such file or directory' when packaging project

Type of Issue

• Help Wanted
• Bug Report
• Feature Request

Description

I have an Angular-CLI project that I’m trying to package as an NPM module, and when I target/include my child module containing components the script results in error with status 111.

How To Reproduce

The packaging script works properly when the WebWrapper components are not imported. Everything’s been generated using the Angular CLI, but is it possible an export is missing?

Child Module of the App

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UiComponentsModule } from "./ui-components.module";
import { FlexLayoutModule } from '@angular/flex-layout';
import { CookieModule } from 'ngx-cookie';

import { WebWrapperHeaderComponent } from '../components/web-wrapper-header/web-wrapper-header.component'; // when commented out the script runs successfully
import { WebWrapperFooterComponent } from '../components/web-wrapper-footer/web-wrapper-footer.component'; // when commented out the script runs successfully

@NgModule({
  imports: [
    CommonModule,
    UiComponentsModule,
    FlexLayoutModule,
    CookieModule.forChild()
  ],
  exports: [
    WebWrapperHeaderComponent,    // when commented out the script runs successfully
    WebWrapperFooterComponent     // when commented out the script runs successfully
  ],
  declarations: [
    WebWrapperHeaderComponent,    // when commented out the script runs successfully
    WebWrapperFooterComponent      // when commented out the script runs successfully
  ]
})
export class WebWrapperModule { }

WebWrapperFooter component that fails the script

import { Component, OnInit } from '@angular/core';
import { FooterLink } from "../../classes/footer-link";					// class
import { WebWrapperLinksMap } from "../../web-wrapper.constants";		// const (Map)
import { WebWrapperLinks } from "../../enums/web-wrapper-links";		// const (enum)
import { FontAwesomeIcons } from "../../enums/font-awesome-aliases";	// const (enum)

@Component({
  selector: 'web-wrapper-footer',
  templateUrl: './web-wrapper-footer.component.html',
  styleUrls: ['./web-wrapper-footer.component.scss']
})
export class WebWrapperFooterComponent implements OnInit {

  contextLinks:Array<FooterLink> = [];
  socialLinks:Array<FooterLink> = [];

  constructor() {
    this.contextLinks.push(new FooterLink("Terms of Use", WebWrapperLinksMap.get(WebWrapperLinks.TERMS_OF_USE)));
    this.contextLinks.push(new FooterLink("Company Store", WebWrapperLinksMap.get(WebWrapperLinks.COMPANY_STORE)));
    this.contextLinks.push(new FooterLink("Privacy Policy", WebWrapperLinksMap.get(WebWrapperLinks.PRIVACY_POLICY)));
    this.contextLinks.push(new FooterLink("Safe Harbor", WebWrapperLinksMap.get(WebWrapperLinks.SAFE_HARBOR)));
    this.contextLinks.push(new FooterLink("Register", WebWrapperLinksMap.get(WebWrapperLinks.REGISTER)));
    this.contextLinks.push(new FooterLink("Employee Login", WebWrapperLinksMap.get(WebWrapperLinks.EMPLOYEE_LOGIN)));

    this.socialLinks.push(new FooterLink("Facebook", WebWrapperLinksMap.get(WebWrapperLinks.SOCIAL_FACEBOOK), FontAwesomeIcons.FACEBOOK));
    this.socialLinks.push(new FooterLink("Twitter", WebWrapperLinksMap.get(WebWrapperLinks.SOCIAL_TWITTER), FontAwesomeIcons.TWITTER));
    this.socialLinks.push(new FooterLink("Linked In", WebWrapperLinksMap.get(WebWrapperLinks.SOCIAL_LINKED_IN), FontAwesomeIcons.LINKED_IN));
  }

  ngOnInit() {
  }

}

Console output containing the error

> web-wrapper@0.0.0 build-npm C:\src\git\web-wrapper
> ng-packagr -p ng-package.json

Building Angular library from ng-package.json

BUILD ERROR
ENOENT: no such file or directory, open 'C:\src\git\web-wrapper\.ng_build\ts\web-wrapper.js'
Error: ENOENT: no such file or directory, open 'C:\src\git\web-wrapper\.ng_build\ts\web-wrapper.js'

npm ERR! code ELIFECYCLE
npm ERR! errno 111
npm ERR! web-wrapper@0.0.0 build-npm: `ng-packagr -p ng-package.json`
npm ERR! Exit status 111
npm ERR!
npm ERR! Failed at the web-wrapper@0.0.0 build-npm script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\bohling.denver\AppData\Roaming\npm-cache\_logs\2017-08-10T22_20_09_083Z-debug.log

C:\src\git\web-wrapper>

The behavior is the same for the WebWrapperHeaderComponent, but due to it’s length I’ve omitted it.

Version Information

ng-packagr: v1.0.0-pre.13
node: v7.2.1
@angular: v4.3.2
TypeScript: 2.4.2

Verbose log file: 2017-08-10T22_20_09_083Z-debug.txt

I’m not sure what could be causing the problem at this point, so any help is appreciated.

[denver-HJS]

Alright yeah that makes sense. Well I appreciate the feedback and this project in general. Thank you for the hard work! 👏 😃

Seeing as this has been sorted out, I’ll go ahead and close this issue.

[github-actions[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

_{This action has been performed automatically by a bot.}