angularangular-cliangular-moduleangular-libraryngx-charts

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


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
------------------------------------------------------------------------------

Solution

  • 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)