Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Missing *.ts files (due to `npm link` ?)

I have this import statement in an Angular5 project:

import {plugins, SCECodeGenType} from 'sce-plugins/code-generation';

this resolves to this path on my filesystem:

/Users/.../suman-chrome-extension/node_modules/sce-plugins/code-generation/index.d.ts

When building the app with ng build -w, I get this error:

ERROR in ../sce-plugins/code-generation/index.ts Module build failed: Error: /Users/alexamil/WebstormProjects/oresoftware/sumanjs/sce-plugins/code-generation/index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at AngularCompilerPlugin.getCompiledFile (/Users/alexamil/WebstormProjects/oresoftware/sumanjs/suman-chrome-extension/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:662:23)
    at plugin.done.then (/Users/alexamil/WebstormProjects/oresoftware/sumanjs/suman-chrome-extension/node_modules/@ngtools/webpack/src/loader.js:467:39)
    at <anonymous>  @ ./src/app/shared/services/lang.service.ts 14:24-62  @ ./src/app/app.module.ts  @ ./src/main.ts  @ multi ./src/main.ts

I believe it's because I am using npm link to link the 'sce-plugins' project for local development.

I see some issues with using npm link with Angular5 projects here:

https://github.com/angular/angular-cli/issues/3875

https://github.com/angular/angular-cli/issues/8677

https://github.com/angular/angular-cli/issues/9376

anyone know how to fix?

Update:

It does not seem to have do with npm link perse, or symlinks. If I simply copy the local directory over to node_modules/sce-plugins, I get the same damn error. Yet, if I npm install sce-plugins into node_modules then I do not get the error. Very strange, seems like it has to do with angular-cli, not NPM.

like image 413
Alexander Mills Avatar asked Feb 14 '18 22:02

Alexander Mills


2 Answers

So after reading this Github issue again: https://github.com/angular/angular-cli/issues/8284

I made this change in .angular-cli.json:

  "defaults": {
    "build": {
      "preserveSymlinks": true //   <<<< add this
    },
    "styleExt": "scss",
    "component": {
    }
  }

and now, given that preserveSymlinks flag and the include field in my tsconfig.app.json file:

 "include":[
    "./**/*.ts",
    "../node_modules/sce-plugins/**/*.ts"
  ],

I can now symlink 'sce-plugins' into my main project, instead of manually copying the files. It's possible that you won't need the "include" field at all, although I found that if I removed the "include" field, that it wouldn't work.

like image 125
Alexander Mills Avatar answered Sep 29 '22 10:09

Alexander Mills


In Angular 6 "angular.json" file it's required to put "preserveSymlinks" under "options" Example:

"defaults": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "preserveSymlinks": true,
            "outputPath": "dist/ConsoleClient",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/web.config"
            ],
like image 32
Janko Petras Avatar answered Sep 29 '22 09:09

Janko Petras