Failed to import module from component node_modules #4134

Activity

1. catull commented on Jan 23, 2017

   

   catull

   on Jan 23, 2017

   Last edited by catull

   Contributor

   More actions

   @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.
2. elclanrs commented on Jan 23, 2017

   

   elclanrs

   on Jan 23, 2017

   Last edited by elclanrs

   Author

   More actions

   @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.
3. filipesilva commented on Jan 24, 2017

   

   filipesilva

   on Jan 24, 2017

   Contributor

   More actions

   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.
4. filipesilva

   closed this as completedon Jan 24, 2017
5. elclanrs commented on Jan 24, 2017

   

   elclanrs

   on Jan 24, 2017

   Last edited by elclanrs

   Author

   More actions

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

   Using angular-cli@1.0.0-beta.26, 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?
6. angular-automatic-lock-bot commented on Sep 6, 2019

   

   angular-automatic-lock-botbot

   on Sep 6, 2019

   More actions

   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.}
7. angular-automatic-lock-bot

   locked and limited conversation to collaborators on Sep 6, 2019