Can't use a locally modified Angular module inside another project

Question

I'm getting the following error when I ng serve (and I've already tried to clear cache, reinstall all modules and reboot the server)

Error: ../../../../angular/ngx-charts-master/ngx-charts-master/dist/swimlane/ngx-charts/lib/ngx-charts.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the dependency which declares NgxChartsModule has not been processed correctly by ngcc.

The full contextual background is that I've modified the source and posted a pull request but I don't know if/when the maintainers will accept it and I want to use the modified module in the meantime at least.

Of course I've tested the changes by using them through the internal demo app (with a couple of trivial, ad hoc changes) and it's all working fine. Then I build the dist with the

ng build @swimlane/ngx-charts

and it produced its output inside the dist folder /dist/swimlane/ngx-charts/ from which I'm trying to import as shown above, at the beginning

Further trying...

I've rewritten the import as

import { NgxChartsModule } from '../../../../../../angular/ngx-charts-master/ngx-charts-master/dist/swimlane/ngx-charts';

I deleted the standard entry in package.json and installed the module from my local folder

"@swimlane/ngx-charts": "file:../../../../angular/ngx-charts-master/ngx-charts-master/dist/swimlane/ngx-charts",

Then I followed the instruction to install also the dev dependencies

"d3-array": "^2.9.1",
"d3-brush": "^2.1.0",
"d3-color": "^2.0.0",
"d3-format": "^2.0.0",
"d3-hierarchy": "^2.0.0",
"d3-interpolate": "^2.0.1",
"d3-scale": "^3.2.3",
"d3-selection": "^2.0.0",
"d3-shape": "^2.0.0",
"d3-time-format": "^3.0.0",
"d3-transition": "^2.0.0"

(copied from the project json in the internal lib of the module repository) but ng serve still fails with

Error: ../../../../angular/ngx-charts-master/ngx-charts-master/dist/swimlane/ngx-charts/lib/area-chart/area-chart.component.d.ts:2:29 - error TS7016: Could not find a declaration file for module 'd3-shape'. 'F:/Appl/angular/ngx-charts-master/ngx-charts-master/dist/swimlane/ngx-charts/node_modules/d3-shape/dist/d3-shape.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/d3-shape` if it exists or add a new declaration (.d.ts) file containing `declare module 'd3-shape';`

2 import { CurveLinear } from 'd3-shape';
                              ~~~~~~~~~~


Error: ./src/main.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):

Note

I didn't mention, but now I suspect these warnings from the npm run build:lib --prod were relevant to the question

√ Compiling TypeScript sources through NGC
√ Bundling to FESM2015
/ Bundling to UMDWARNING: No name was provided for external module 'd3-selection' in output.globals – guessing 'd3Selection'
WARNING: No name was provided for external module 'd3-brush' in output.globals – guessing 'd3Brush'
WARNING: No name was provided for external module 'd3-scale' in output.globals – guessing 'd3Scale'
WARNING: No name was provided for external module 'd3-shape' in output.globals – guessing 'd3Shape'
WARNING: No name was provided for external module 'd3-array' in output.globals – guessing 'd3Array'
WARNING: No name was provided for external module 'd3-interpolate' in output.globals – guessing 'd3Interpolate'
WARNING: No name was provided for external module 'd3-format' in output.globals – guessing 'd3Format'
WARNING: No name was provided for external module 'd3-color' in output.globals – guessing 'd3_color'
WARNING: No name was provided for external module 'd3-hierarchy' in output.globals – guessing 'd3Hierarchy'
WARNING: No name was provided for external module 'd3-time-format' in output.globals – guessing 'd3TimeFormat'
√ Bundling to UMD
√ Minifying UMD bundle
√ Writing package metadata
i Built @swimlane/ngx-charts

------------------------------------------------------------------------------
Built Angular Package
 - from: F:\Appl\angular\ngx-charts-master\ngx-charts-master\projects\swimlane\ngx-charts
 - to:   F:\Appl\angular\ngx-charts-master\ngx-charts-master\dist\swimlane\ngx-charts
------------------------------------------------------------------------------

score 0 · Accepted Answer · 2021-04-28T13:47:10.853

0

Tried almost everything... finally I'm importing the source and it looks like it wants the project folder inside the root directory and not from a path outside it, so I copied the project folder from the module repository under the root of my app and pointed to it

import { NgxChartsModule } from '../projects/swimlane/ngx-charts/src/lib/ngx-charts.module';

At least, now my ng serve is running fine (so I'm happy enough with this solution/workaround)

compiler options

I forgot to share the settings I had to update in tsconfig.json

"strict": false,
"noImplicitReturns": false,

and below

  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": false,
    "strictInputAccessModifiers": false,
    "strictTemplates": false
  }

Anyway, as noted in my comment below, I haven't (yet) released my modified module to the users but the standard one with percentageFormatting to zero decimal places (that seems fair enough)

edited Apr 28 '21 at 13:47

answered Apr 28 '21 at 12:24

try to build the project as well, I have tried to use this package as well few days ago, but noticed it is already deprecated and isn't compatible with IVY – Ashot Aleqsanyan Apr 28 '21 at 12:35
@AshotAleqsanyan what is deprecated (any link to this notice)? It looks quite cool and very appreciated by my users, to be honest... I've delivered the standard version, not my locally modified one. I'm keeping the percentage format to zero decimal places, that is ok for my users (and I guess for everyone) – Apr 28 '21 at 12:57
it means it isn't supported anymore. Maybe I was wrong? will let you know if I will find anything connected with this – Ashot Aleqsanyan Apr 28 '21 at 13:03
Sorry I was wrong, but maybe this can be helpfull https://github.com/swimlane/ngx-charts/issues/1540 – Ashot Aleqsanyan Apr 28 '21 at 13:12
@AshotAleqsanyan maybe you mean that this `@angular-devkit/build-ng-packagr` has been deprecated and it is in the angular.json in the section to build the library – Apr 28 '21 at 18:06
I couldn't find anything connected with deprecation, but I have used another library because of deprecation and some build issues. – Ashot Aleqsanyan Apr 28 '21 at 18:21

Can't use a locally modified Angular module inside another project

Further trying...

Note

1 Answers1

compiler options