Carousel.d.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or'include' property

1
votes

During the universal building an Angular application to run on server side I am facing the following error's.

ERROR in ./src/app/shared/components/carousel/interface/Carousel.d.ts Module build failed: Error: /home/training/Desktop/vishnu/TemplateAppv6/src/app/shared/components/carousel/interface/Carousel.d.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or'include' property. at AngularCompilerPlugin.getCompiledFile (/home/training/Desktop/vishnu/TemplateAppv6/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:749:23) at plugin.done.then (/home/training/Desktop/vishnu/TemplateAppv6/node_modules/@ngtools/webpack/src/loader.js:41:31) at process._tickCallback (internal/process/next_tick.js:68:7) ERROR in ./src/app/shared/components/grid/interface/Grid.d.ts Module build failed: Error: /home/training/Desktop/vishnu/TemplateAppv6/src/app/shared/components/grid/interface/Grid.d.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. at AngularCompilerPlugin.getCompiledFile (/home/training/Desktop/vishnu/TemplateAppv6/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:749:23) at plugin.done.then (/home/training/Desktop/vishnu/TemplateAppv6/node_modules/@ngtools/webpack/src/loader.js:41:31) at process._tickCallback (internal/process/next_tick.js:68:7) ERROR in ./src/app/shared/components/footer/footer.component.ts Module not found: Error: Can't resolve '../../../configuration/interfaces/GlobalConfig' in '/home/training/Desktop/vishnu/TemplateAppv6/src/app/shared/components/footer' ERROR in ./src/app/home/home.component.ts Module not found: Error: Can't resolve './interfaces/home' in '/home/training/Desktop/vishnu/TemplateAppv6/src/app/home' npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] build:client-and-server-bundles: ng build --prod --build-optimizer npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] build:client-and-server-bundles script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! /home/training/.npm/_logs/2018-10-04T05_22_21_129Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] build:ssr: npm run build:client-and-server-bundles && npm run webpack:server npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] build:ssr script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! /home/training/.npm/_logs/2018-10-04T05_22_21_183Z-debug.log

The issue is with the tsconfig file, i presume so here is mine.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "declaration": true,
    "declarationDir": "definitions"
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

I tried to insert the following lines after seeing it in few github places

"@abp/": [ "../node_modules/abp-ng2-module/dist/src/" ]

But issue still persists.

My package.json file

{
  "name": "template-appv6",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
    "serve:ssr": "node dist/server",
    "build:client-and-server-bundles": "ng build --prod --build-optimizer",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors"
  },
  "typings": "definitions/index",
  "typescript": {
    "definition": "definitions/index"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/cdk": "^6.4.7",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/flex-layout": "^6.0.0-beta.18",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^6.4.7",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/platform-server": "^6.1.9",
    "@angular/router": "^6.1.0",
    "@nguniversal/express-engine": "^6.1.0",
    "@nguniversal/module-map-ngfactory-loader": "^6.1.0",
    "bootstrap": "^4.1.3",
    "core-js": "^2.5.4",
    "entitlement": "^0.1.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.3.1",
    "ng-recaptcha": "^3.0.5",
    "ng2-dropdown": "0.0.21",
    "ngx": "^2.4.0",
    "ngx-facebook": "^2.4.0",
    "ngx-infinite-scroll": "^6.0.1",
    "ngx-owl-carousel": "^2.0.7",
    "ngx-popover": "0.0.16",
    "ngx-webstorage": "^2.0.1",
    "ngx-webstorage-service": "^3.1.1",
    "reinstall": "^2.0.0",
    "rxjs": "^6.0.0",
    "script-loader": "^0.7.2",
    "ts-loader": "^5.2.1",
    "video.js": "^7.2.3",
    "videojs": "^1.0.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular/cli": "~6.1.2",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.4.1",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.9.2"
  }
}

Any help would be greatly appreciated.

1
node.jsangulartypescriptnpm
Have you tried "declaration": true, ? Is your carousel component using a certain npm package and you forgot to install typings for it ? Can you show your package.json ? - darklightcode
I have added the package.json file to question, please check! @darklightcode - V5NEXT
Yes I have changed "declaration" : true, but issue still persists. - V5NEXT

1 Answers

0
votes

Remove the following property from tsconfig.json:

"typeRoots": [
   "node_modules/@types"
],

As being explained on typescriptlang

By default all visible “@types” packages are included in your compilation. Packages in node_modules/@types of any enclosing folder are considered visible; specifically, that means packages within ./node_modules/@types/, ../node_modules/@types/, ../../node_modules/@types/, and so on.

If typeRoots is specified, only packages under typeRoots will be included

UPDATE:

Another approach would be to emit your declaration files in a separate folder:

In your tsconfig.json add:

"declaration": true,
"declarationDir": "definitions"

And in your package.json add the following properties with path to definitions:

"typings": "definitions/index",
"typescript": {
    "definition": "definitions/index"
  },