Angular 5: NPM Link - model/index.ts is not part of the compilation.

[thaoula]

Bug Report or Feature Request (mark with an x)

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

Versions.

Angular CLI: 1.5.0
Node: 8.7.0
OS: darwin x64
Angular: 5.0.0

Repro steps.

We have a the following folder structure in a git mono-repo

/api (Express Node App)
/model (NPM package using NPM Link, contains mostly typescript interfaces)
/web (Angular)

When using Angular 4.46 and Angular CLI 1.5.rc2 and we were able to make reference to the interfaces defined in the model folder using npm link and using the following example
import { entity } @app/model

We use ng serve to start the app.

After upgrading Angular to V5 and Angular CLI to 1.5.0 we now get the following error -

The log given by the failure.

Module build failed: Error: /Users/thaoula/Projects/platform/model/index.ts is not part of the compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

The occurs for JIT and AOT builds.
Running TSC does not result in in errors.

Desired functionality.

Would like be able to build the app using Angular 5

Thanks,
Tarek

[rolaveric]

I can report a similar issue.
Key differences:

1. I'm not using npm link, I've just installed another git repo via npm with typescript source (ie. original .ts files).
2. The error I'm getting is: node_modules/other-repo/src/lib/index.ts is not part of the compilation output. Please check the other error messages for details.

Was previously working fine with Angular 4.4.6 and Angular CLI 1.4.7

I'll try to create a minimal repo to reproduce the issue once I get home.

[suresh2018]

yes i m also faced this issue .
angular 5 rc 9 and clic 1.5.0

[xiongyayun428]

me too

[ChristianSchroedel]

Same here - without npm link, but with dependencies on typescript libraries in other git repositories

[diagramatics]

I've been testing with several version combinations to flush this out and it seems like it's the CLI causing it. I'm running v1.5.0 with Angular on v5.0.0 final and a similar error shows. Rolling the CLI back to rc8 fixes it.

Then I reverted 9b43a9c manually and the error subsides.

[rolaveric]

I've found that I only get the problem with ng serve - not with ng build.
Specifically: ng build --aot --prod --sourcemaps --stats-json --delete-output-path=false --progress=false

[rolaveric]

I can confirm what @diagramatics said about rolling back to rc8 working, but I didn't get the same joy from reverting 9b43a9c
I also noticed that I get the same error when running ng test (ie. X is not part of the compilation output.) - even with rc8.

[filipesilva]

Hey all, this is a side effect of the stricter tsconfig as described in https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced#148d.

The tsconfig file is what determines what TS files are compiled. The error you are getting means that the files mentioned are NOT being compiled.

Before we used to compile all files, essentially ignoring what tsconfig listed. This was a bug, because if you don't include a file in the compilation then it should not be compiled.

By default ./src/tsconfig.app.json will only pick up files inside src/. If you have a file outside source, it won't be picked up. But you can add more files to the tsconfig via either files or include.

So for @thaoula's case, you probably want to add this the files in ../models to your tsconfig.app.json and also to your tsconfig.spec.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    // ...
  },
  "include": [
    "../models/**/*.ts"
  ],
  "exclude": [
    // ...
  ],
}

You can read more about tsconfig files in https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/tsconfig.json.md.

@rolaveric's case is slightly different. You have TS files in your node_modules. This really goes against how libraries should be packaged: libraries should never ship their source .ts files.

The reason for this rule is that the TypeScript version your app isn't necessarily the same as the TS version your library uses. Different versions of TS can produce different output, and give different errors for the same input. They don't even support the same language features. So packaging libraries with TS sources will always break someone's project.

So we don't really support using incorrectly packaged libraries with TS sources. It's something you do at your risk.

That being said, maybe you can try adding it to the include array. But I can't guarantee that will work in the future because it's still an incorrectly packaged library.

Regarding AOT: as far as I can tell, AOT is still incorrectly compiling TS that is not included in the tsconfig. I'll bring this up with the compiler team. (Edit: reported as angular/angular#20115)

[MakesNine]

We have the same problem described by @thaoula , but for a file that is located inside the normal tree structure created by the angular-cli. The error occurs with angular 5.0.0 final and angular-cli 1.5. We can "ng serve" the app with angular 5.0.0 and angular-cli 1.4.4.

The file that is not part of the compilation in our project is located at:
src/app/core/stateManagement/Models/genericCourse.ts

We never included or excluded files using tsconfig.json so it doesn't seem that the problem comes from the stricker tsconfig usage describeb above. To make sure, I created an empty project using angular-cli 1.5.0 and replaced the tsconfig.json and tsconfig.app.json files in our project with the ones created by the new cli and it didn't solve the problem.

Another thing we have in commun with @thaoula is that the file that is not included in the compilation only contains interface and class definitions. So there might be something with that.

[filipesilva]

@MakesNine that sounds like a different issue altogether, and one that we thought was fixed. Could you give me a repro of that please?

[KevinFernandes]

We are having a similar issue, as well, after upgrading. It is complaining about all of our library packages under node_modules with this same exact error (all packages are installed with NPM so no links). Are we going to have to "include" each package separately in the tsconfig file? This would be a nightmare if its true, now and for maintenance in the future. Is there another solution or something else we can do first before using this new version which obviously breaks us completely?

[MakesNine]

@filipesilva I have been trying to reproduce the problem in a small project, but I haven't succeded so far. I will keep trying to isolate the problem to find the source of it.

Here's the exact error I'm getting:

ERROR in ./src/app/core/StateManagement/models/genericCourse.models.ts
Module build failed: Error: D:\Projects\LtiisWeb\src\app\core\StateManagement\models\genericCourse.models.ts is not part o
f the compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
at AngularCompilerPlugin.getCompiledFile (D:\Projects\LtiisWeb\node_modules@ngtools\webpack\src\angular_compiler_plug
in.js:624:23)
at plugin.done.then (D:\Projects\LtiisWeb\node_modules@ngtools\webpack\src\loader.js:467:39)
@ ./src/app/+generic-courses/generic-course.component.ts 23:0-84
@ ./src/app/+generic-courses/generic-courses.module.ts
@ ./src/$$_lazy_route_resource lazy
@ ./node_modules/@angular/core/esm5/core.js
@ ./src/main.ts
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

[filipesilva]

@MakesNine so if you try having a file with just interfaces it's still fine in a new project? Hm... I've heard of problems with casing. Are your imports perhaps using the wrong casing? Does it still happen if you add a non-interface export to that file? That seems to be a lazy route, perhaps it's related. Can you try making that route not lazy?

@KevinFernandes this definitely shouldn't happen to all library packages, unless somehow you're just using packages that weren't packaged well. Can you give me examples of a couple of these packages? I can have a look.

[MakesNine]

@filipesilva yest, I can build a new project and import a file with only interfaces from a lazy loaded module. I will double check the casing and try the original app with a non lazy route for the module where the error originates.

[MakesNine]

@filipesilva I have added an import and exported a function from the file refusing to be part of the compilation and it didn't help.
I have changed all the routes, in app-routing.module.ts, that have components importing type definitions from that file so that they wouldn't be lazy loaded and the app compiled, but didn't work. I had forgotten to import the modules, in app.module.ts', that contained the components now used in the non lazy loaded routes. Once I add the required imports in app.module.ts, I get the same problem that I get with lazy loaded routes. I have also checked casing and all seems ok on that front.

[rolaveric]

Thanks @filipesilva - that explains my issue.
I tried explicitly including my internal libraries using include, but that's giving me other grief (picking up on test suites, despite using exclude). So I'll do it properly and have them expose compiled code.
I knew it was something I should do, but with them only being used internally by the company, I let it slide.

Thanks again to you and all the contributors for your hard work on Angular CLI - it's an excellent tool and very much appreciated.

[stuartwk]

I was having the same issue after updating. Like some other people, the ts files were all part of the standard CLI structure tree. Turned out it was a case sensitivity issue for me. I had accidentally written something like...

import { Comment } from './Comment' while in other components import { Comment } from './comment'. Running a normal build would throw me a helpful warning before erroring out, but building for prod only showed me the "Please make sure it is in your tsconfig via the 'files' or 'include' property" error. Fixed the casing issue and prod builds for me fine.

[MakesNine]

I finally got my app to compile. It turned out that it was a casing issue indeed.
The error I was getting was:
ERROR in ./src/app/core/StateManagement/models/genericCourse.models.ts

And the solution is to change the related import to:
./src/app/core/stateManagement/models/genericCourse.models.ts

Curiously, I have other files in that folder that were also imported with StateMangement in the path and the compiler didn't complain.

Thansk for your input @filipesilva

[prasadkadiyala]

We got the same problem when importing the modules.

[ORESoftware]

I have this issue....this issue sucks :(

this is how I solved it for local development:

https://stackoverflow.com/questions/48797135/missing-ts-files-due-to-npm-link/48798373#48798373

[kaushikdighe]

@filipesilva. I am facing the same issue Just to summarize, we have a large project. So 1 project is used as library and sits in the node_modules folder. When on Angular 4 it works fine but when upgraded it is throwing me this error: Module build failed: XXX file is missing in Typescript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. I have read this whole ticket and specially implemented what you suggested of manually adding it in tsconfig.json. But when I do that it prompts me a different error: Unknown compiler option 'include' and 'exclude'. It would be great help if you could get me out of this issue. Thank you in advance. Just to reiterate I have read through the whole blog and tried different solutions it does not seem to work. Again Thank you in advance.

[kaushikdighe]

@andi-wr Thank you for the solution but it still does not work. It gives me whole lot of errors. Saying cannot find name 'describe'; cannot find name 'beforeEach' etc in all the files. This is a huge list of errors.

[princeprathap]

@filipesilva
I am getting the below error and the third party literary do not have .ts file. can you help

ERROR in ./node_modules/agm-direction/src/agm-direction.module.ts
Module build failed: Error: D:\TandT\TandTSrc\node_modules\agm-direction\src\agm-direction.module.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
at AngularCompilerPlugin.getCompiledFile (D:\TandT\TandTSrc\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:656:23)
at plugin.done.then (D:\TandT\TandTSrc\node_modules@ngtools\webpack\src\loader.js:467:39)
at
at process._tickCallback (internal/process/next_tick.js:169:7)
@ ./node_modules/agm-direction/index.js 6:9-46
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi ./src/main.ts

[tapaz1]

I don't know if people are still having this problem - here's how I fixed the issue.

I have 2 tsconfig.json files, one at the root of the app, and the other inside the src folder (one level down from the root) named tsconfig.app.json that extends the main tsconfig.json. I explicitly added the package that I needed that wasn't being transpiled by Typescript in the "include" array, and like a lot of people here I was getting the *.spec.ts files included despite having them in "exclude" option, so I removed it from the tsconfig.json. The fix was adding the "exclude" option to the second (extended) tsconfig.app.json file. Doing that fixes the Typescript errors and lets me run ng serve without issue.

Here is tsconfig.json:

{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./src",
"outDir": "./dist",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
],
},
"include": [
"./src",
"node_modules/your_package"
]
}

And tsconfig.app.json:

{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../dist",
"baseUrl": "./",
"module": "es2015",
"types": []
},
"exclude": [
"../node_modules/your_package/**/*.spec.ts"
]
}

For some reason adding the exclude in the extended tsconfig (tsconfig.app.json) file is the only way I was able to get it to not complain about the spec files.

Based on the comments from @filipesilva this may still be a bug but it worked for me. Hopefully this helps anyone facing the same issue.

[fengerzh]

@tapaz1 By following your instruction, I got it work. I added a section of include in tsconfig.json to include the failed module as below:

"include": ["./src", "node_modules/@jaspero/ng2-select"]

then build success. Thank you!

[criollapp]

The error also happens when you have the url of a main file wrong in the package.json in your library

[jdthorpe]

we used to compile all files, essentially ignoring what tsconfig listed. This was a bug

IMHO, the new behavior of failing when the compiler wasn't asked to compile a file it wasn't supposed to compile in the first place is also a bug.

we don't really support using incorrectly packaged libraries

npm link is supported by, well, NPM, so it seems odd that angular doesn't. In particular, I've got this in in my .npmignore:

*.ts
!*.d.ts

So that TypeScript files are not included when I npm publish. Perhaps angular could also respect .npmignore files ,and only complain when a .ts file that would be included in a published package is encountered. This would resolve the problems that devs who co-develop an angular site and a related npm package have with this new behavior.

---

I realize that my situation may be more complicated than most. I've got an angular app and 3 independent NPM packages that I'm working on, where my app depends on all 3 packages, and one of the packages depends on the other two. Two days of googling, RTFMing, and trying every combination of exclude:["foo","bar","bat"] haven't worked for me. (thought oddly "including" them does work, though it brings up another host of other errors b/c I use different versions fo pacakges in my dependences, so there are collisions with the typings between my app's dependencies and my dependencies dependencies.)

In the end, I npm pack'ed my dependencies, installed them in my app from the built .tgz files, put build scripts in my package.json for all my dependencies like so:

npm pack && pushd /my/app/ && npm i /my/dependency/dependency.tgz && popd

all because of this paternalisticl error, that obstructs the use of npm link -- which is a mode of development tool explicitly supported by NPM!

In future, can this be warning instead of an error, or perhaps add a cli flag indicating that no error should be raised just because angular wasn't asked to compile every .ts file it can find?

---

Workaround:

This error is thrown when loading .js files and .map files, and not when deciding which .ts files to compile. Hence, if:

• you are using npm link or npm i file:/my/other/package to co-develop an angular app and a node package and
• you have "sourceMap": true, in the compiler options of your linked package, and
• you have called tsc in your linked repo,

then you can go to the line that threw the error, which is listed in the output from ng serve and comment out the line throw new Error(msg);, and you're off to the races.

The downside to this workaround is that while your ng-serveer will reload your app every time you make changes in your dependency projects -- but it won't compile them and you'll have to restart ng-serve after calling tsc in your dependency in order for updates in your dependencies to be picked up.

In short, the workaround sucks, but at least it doesn't prevent you from doing development on separate projects with separate dependencies and typings.

[mpilarcastillejo]

add in tsconfig.app
"baseUrl": ""
for
"baseUrl": ""

[alan-agius4]

Hi all,

This thread was opened a while ago.

The tsconfig file is what determines what TS files are compiled. The error you are getting means that the files mentioned are not being compiled as explained in the following comment #8284 (comment).

Having all the feedback in a single thread makes it hard to get meaningful reports, or to inform people of what versions the regressions that affect them were fixed.

Having so many hidden comments makes it hard for people to find the information in anything but the latest comments. But on the other hand I don't think most people would go through all of the comments anyway. New users that see this thread mostly read the first and latest comments and lose things said in between.

So for the reasons stated above (high volume of comments, hidden comments, hard to report and inform people) I'm also locking this issue to prevent this comment from being lost as new comments come in.

If you are still experiencing an issue please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.