Failed to import module from component node_modules

[elclanrs]

macOS El Capitan
angular-cli: 1.0.0-beta.24
node: 6.9.1
os: darwin x64
@angular/common: 2.4.2
@angular/compiler: 2.4.2
@angular/core: 2.4.2
@angular/forms: 2.4.2
@angular/http: 2.4.2
@angular/platform-browser: 2.4.2
@angular/platform-browser-dynamic: 2.4.2
@angular/router: 3.4.2
@angular/compiler-cli: 2.4.1

Repro steps.

Create a component, add a package.json to the component, and install a dependency.

ng generate component my-component
cd src/app/my-component
echo {} > package.json
npm install --save lodash.chunk

Then require the dependency:

// my-component.component.ts

let chunk = require('lodash.chunk');

The log given by the failure.

ERROR in ./src/app/my-component/my-component.component.ts
Module not found: Error: Can't resolve 'lodash.chunk' in '/Users/myuser/Documents/my-project/src/app/my-component'

Mention any other details that might be useful.

I can fix the module resolve in the webpack config, by changing line 39 of webpack-build-common.ts to just use node_modules and let it resolve:

// const nodeModules = path.resolve(projectRoot, 'node_modules');
const nodeModules = 'node_modules'; // this works

The reason I need nested node_modules is because we are developing components in a single repo, but we want to separate them out in our deployment build so each component can have its own dependencies.

Is there something I'm missing to make this work out of the box?

[catull]

@elclanrs

There is a simpler way, that works.
Follow these steps:

1. ng generate component my-component
2. stay in the root folder and run npm install --save lodash.chunk
3. edit src/app/my-component/my-component.component.ts to be:

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
  init() {
    const chunk = require('lodash.chunk');
    console.log(chunk);
  }
};

This is not an issue, it can be closed.

[elclanrs]

@catull, but that is adding the dependency at the app level. I want the component to have its own package.json and dependencies. Like I said, in the build process I need to separate each component so we can publish them independently to our own private npm repository.

[filipesilva]

We don't really support multiple projects/apps at the moment.

I understand that your usecase could be fixed by adding a local set of node_modules, but that would also remove the fix for npm linked node modules (#2291).

If there's a way to have both working, let me know.

[elclanrs]

@filipesilva, linked packages seem to work. Just did the following to reproduce:

Using [email protected], create new app, a component, and install sub-dependency:

cd $HOME
ng new my-app
cd my-app
ng generate component my-component
cd src/app/my-component
npm init
npm install --save lodash.chunk

Create test package and link it to app:

cd $HOME
mkdir test-package
cd test-package
echo 'module.exports = "test-package";' > index.js
npm init
npm link
cd $HOME/my-app
npm link test-package

Require both packages in my-component:

// src/app/my-component/my-component.component.ts

import { Component, OnInit } from '@angular/core';

+ let test = require('test-package');
+ let chunk = require('lodash.chunk');

+ console.log(test);
+ console.log(chunk);

Add component to app template:

<!-- src/app/app.component.html -->

+ <app-my-component></app-my-component>

Edit webpack's config:

// node_modules/angular-cli/models/webpack-build-common.js @ 27

+ // var nodeModules = path.resolve(projectRoot, 'node_modules');
+ var nodeModules = 'node_modules'; // this works

Now both ng serve and ng build work fine, no errors, and I can see both logs in the console during dev, and in the build. Without the fix above it fails.

Am I missing something or do linked packages work just fine without #2291? Maybe webpack fixed it since September?

[angular-automatic-lock-bot]

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

Read more about our automatic conversation locking policy.

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