ng build library doesn't include json files like normal app

Bug Report or Feature Request (mark with an x)

- [ x ] bug report -> please search issues before submitting

Command (mark with an x)

- [ x ] build

Versions

node --version v8.11.1 npm --version 5.6.0

Angular CLI: 6.1.4 Node: 8.11.1 OS: win32 x64 Angular: 6.1.3 … animations, common, compiler, compiler-cli, core, forms … http, language-service, platform-browser … platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.7.4 @angular-devkit/build-angular 0.7.4 @angular-devkit/build-ng-packagr 0.7.4 @angular-devkit/build-optimizer 0.7.4 @angular-devkit/build-webpack 0.7.4 @angular-devkit/core 0.7.4 @angular-devkit/schematics 0.7.4 @angular/cli 6.1.4 @ngtools/json-schema 1.1.0 @ngtools/webpack 6.1.4 @schematics/angular 0.7.4 @schematics/update 0.7.4 ng-packagr 3.0.6 rxjs 6.2.2 typescript 2.7.2 webpack 4.9.2

Windows 7

Repro steps

(Important: This issue is related to import a .json file in a via cli generated library and not in the default app in src, first steps are to show the complete way for reproducing.)

1. Create a new project with “ng new my-app” (you can also add common options)
2. Generate a new component with “ng g c feature/settings”
3. Create a json file in the src/app/feature/settings folder and name it settings.json with following content

{
  "title": "Settings configuration",
  "content": "This is the settings page."
}

1. Import the settings file in settings.component.ts with

import { Component, OnInit } from '@angular/core';
import * as config from './settings.json';

@Component({
  selector: 'app-display-settings',
  templateUrl: './display-settings.component.html',
  styleUrls: ['./display-settings.component.scss']
})
export class SettingsComponent implements OnInit {
  config: any;
  constructor() { }
  ngOnInit() {
    this.config = config;
  }
}

1. In settings.component.html add the output of the config via

<h1>{{config.title}}</h1>
<p>{{config.content}}</p>

1. When you try to build the app now we ng build --prod you will get the following error:

ERROR in src/app/feature/settings/settings.component.ts(2,25): error TS2307: Cannot find module './settings.json'.

1. This would be normally solved by adding a typings.d.ts file in src folder. So we do it, with the following content:

declare module "*.json" {
  const value: any;
  export default value;
}

1. Now run ng build --prod again, and it will work like expected and generate “my-app” under the dist folder. All is good and fine, but now comes the issue.
2. Generate a new library with ng g library my-lib.
3. To check if all works fine execute the build command for the lib via ng build my-lib --prod. It will generate the lib in the dist folder under dist/my-lib.
4. In the projects/my-lib/src/lib folder add the same settings.json form above
5. Extend the my-lib.component.ts with the import and use of the config like we did before. Your file should look like this:

import { Component, OnInit } from '@angular/core';
import * as config from 'config.json';
@Component({
  selector: 'lib-my-lib',
  template: `
  <h1>{{config.title}}</h1>
  <p>{{config.content}}</p>
  `,
  styles: []
})
export class MyLibComponent implements OnInit {
  config: any;
  constructor() { }
  ngOnInit() {
    this.config = config;
  }
}

1. Now execute ng build my-lib --prod again. You will run in the following error:

projects/my-lib/src/lib/my-lib.component.ts(2,25): error TS2307: Cannot find module 'config.json'.

The log given by the failure

BUILD ERROR
projects/my-lib/src/lib/my-lib.component.ts(2,25): error TS2307: Cannot find module 'config.json'.

Error: projects/my-lib/src/lib/my-lib.component.ts(2,25): error TS2307: Cannot find module 'config.json'.

    at Object.<anonymous> (C:\Users\...\development\pocs\my-app\node_modules\ng-packagr\lib\ngc\compile-source-files.js:53:68)
    at Generator.next (<anonymous>)
    at C:\Users\...\development\pocs\my-app\node_modules\ng-packagr\lib\ngc\compile-source-files.js:7:71
    at new Promise (<anonymous>)
    at __awaiter (C:\Users\...\development\pocs\my-app\node_modules\ng-packagr\lib\ngc\compile-source-files.js:3:12)
    at Object.compileSourceFiles (C:\Users\...\development\pocs\my-app\node_modules\ng-packagr\lib\ngc\compile-source-files.js:19:12)
    at Object.<anonymous> (C:\Users\...\development\pocs\my-app\node_modules\ng-packagr\lib\ng-v5\entry-point\ts\compile-ngc.transform.js:26:32)
    at Generator.next (<anonymous>)
    at C:\Users\...\development\pocs\my-app\node_modules\ng-packagr\lib\ng-v5\entry-point\ts\compile-ngc.transform.js:7:71
    at new Promise (<anonymous>)

Desired functionality

It should build the library like the app by including the json file.

Mention any other details that might be useful

I tried out to import the component directly in the app via public_api.ts and it will work. It also build the app including the component from the projects folder and as well with the json file. But it won’t build the library standalone in the dist folder. I also tried out to include the typings.d.ts in the tsconfig.lib.json and as well to put a separate file in the projects/my-lib/src folder, but it changes nothing.

[thierrybellevue]

// Replace
import * as config from 'config.json';

// With
const config = require('config.json');

This works for me. And “declaration” is false in my tsconfig.lib.json files.

"compilerOptions": {
    ...
    "declaration": false
}

I was finally able to include the JSON file in my library.

[alan-agius4]

Libraries are built using a 3rd party packages ng-packagr. I’d suggest you re-post your issue there.

That said, please check https://github.com/dherges/ng-packagr/issues/1050 and https://github.com/dherges/ng-packagr/issues/966