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

Question

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

thaoula opened this issue 7 years ago · 86 comments

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

xiongyayun428 commented 7 years ago

me too

👍2
👎3

Answer 1 · 2017-11-02T05:02:11.000Z

I can report a similar issue.
Key differences:

I'm not using npm link, I've just installed another git repo via npm with typescript source (ie. original .ts files).
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.

Answer 2 · 2017-11-02T05:09:54.000Z

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

Answer 3 · 2017-11-02T09:10:18.000Z

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

Answer 4 · 2017-11-02T10:24:32.000Z

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.

Answer 5 · 2017-11-02T10:28:03.000Z

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

Answer 6 · 2017-11-02T11:34:50.000Z

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.

Answer 7 · 2017-11-02T13:16:16.000Z

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)

Answer 8 · 2017-11-02T15:45:09.000Z

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.

Answer 9 · 2017-11-02T17:02:51.000Z

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

Answer 10 · 2017-11-02T19:06:25.000Z

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?

Answer 11 · 2017-11-02T19:23:21.000Z

@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

Answer 12 · 2017-11-02T19:33:25.000Z

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

Answer 13 · 2017-11-02T19:52:49.000Z

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

Answer 14 · 2017-11-02T20:56:40.000Z

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

Answer 15 · 2017-11-02T23:42:58.000Z

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.

Answer 16 · 2017-11-03T01:44:55.000Z

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.

Answer 17 · 2017-11-03T02:46:38.000Z

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

Answer 18 · 2017-11-03T04:35:23.000Z

We got the same problem when importing the modules.

Answer 19 · 2017-11-03T10:46:21.000Z

@MakesNine that is weird indeed, and I'm not really sure why that happens... I expected all bad paths to throw an error somehow. Will keep an eye out for more such casing reports.

Answer 20 · 2017-11-03T11:00:16.000Z

@filipesilva I see hundreds of errors so its hard to sort through them. From what I can see at the moment it's all of "my" library packages, packages that we build and publish to a local repository. We package all of the .ts files as well as a webpacked bundle file.

When we were building with SystemJS it made sense that we had to explicitly specify all of the bundles to include from node_modules, but with the CLI it seemed to just work without any extra specifications. It made our lives a thousand times easier. But now it seems what we thought was a feature was actually a bug in CLI and possibly something that we are doing wrong (and have been for more than a year now).

So what exactly is the problem? Is it that the CLI was compiling the .ts files that we had in our library packages and so did not need the bundles? If that is the case then how do we now tell the CLI to use the bundle? Is it something to do differently when packaging the library bundles or is it some angular-cli.json configuration we have to change.

Sorry, up until now we had though we had finally figured out this JavaScript eco system, but now it seems we still have some things to learn.

Answer 21 · 2017-11-03T12:32:20.000Z

@KevinFernandes ok so that it happens on your local libs makes sense considering the other reports in this issue. Yes, before it seems like the CLI was compiling the TS in your local libraries, which was just a ticking time bomb really.

The way to address this in your codebase really depends on how you build your libs... Do you use an existing library to do it? I think a lot of users use https://github.com/dherges/ng-packagr and seem to be happy with it. I haven't myself though.

Answer 22 · 2017-11-06T14:49:34.000Z

I can report a similar issue:

I have a standard, cli generated, folder structure ( Windows platform )
I simply share some modules between different applications at the source level.

Under src there are the following folders:

app
packages ( simlink )

Under packages:

combo-components
....

Each folder is a module ( proper module.ts ) and has an index.ts for the exports.

tsconfig.json looks like this:

"compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@combo-components/core": [
        "packages/combo-components/src"
      ],
      "@catol/core": [
        "packages/catol-core/src"
      ]
    }

An import statement looks like this:
import { DataSourceResult, NotificationService } from '@combo-components/core';

It worked fine till angular 4.x and cli 1.4.x
After upgrading to 5.0 & cli 1.5.0, ng build fails with the following error:

ERROR in ../catol/combo-components/src/index.ts
Module build failed: Error: C:\Users...\workspace\catol\combo-components\src\index.ts is not part of the compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
at AngularCompilerPlugin.getCompiledFile (C:\Users...\workspace\playground\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:624:23)
at plugin.done.then (C:\Users...\workspace\playground\node_modules@ngtools\webpack\src\loader.js:467:39)
@ ./src/app/app.module.ts 13:0-63
@ ./src/main.ts
@ multi ./src/main.ts

Casing checked, also added the include property suggested by @filipesilva

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

The error changes slightly:

ERROR in ./src/main.ts
Module build failed: Error: C:\Users...\workspace\playground\src\main.ts is not part of the compilation output. Please check the other error messages for details.
at AngularCompilerPlugin.getCompiledFile (C:\Users...\workspace\playground\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:629:23)
at plugin.done.then (C:\Users...\workspace\playground\node_modules@ngtools\webpack\src\loader.js:467:39)
at process._tickCallback (internal/process/next_tick.js:109:7)
@ multi ./src/main.ts
ERROR in ./src/polyfills.ts
...

Adding main&polyfill to the include path doesn't help either.

Answer 23 · 2017-11-06T16:54:29.000Z

The same issue with fresh-created app using ng new
Angular CLI: 1.5.0
Node: 6.10.3
OS: win32 x64
Angular: 5.0.0

Answer 24 · 2017-11-06T22:54:24.000Z

I was having this issue and it was a case issue.

I was trying to do this:

import { IJobModel, JobModel } from "./jobModels/job.model";

which should be

import { IJobModel, JobModel } from "./JobModels/job.model";

(./jobModels was camel cased instead of upper case)

Answer 25 · 2017-11-07T00:03:33.000Z

have you tried with --preserve-symlinks flag? angular/angular#20091

Answer 26 · 2017-11-07T09:33:30.000Z

@sandangel Thank you that worked for me, no need to add the 'include' property in tsconfig.json

After upgrade, either run

ng serve --preserve-symlinks

or update .angular-cli.json

...
 "defaults": {
    "styleExt": "css",
    "component": {},
    "build": {
      "preserveSymlinks": true
    }

if you have symlinks in the source tree.

Answer 27 · 2017-11-07T11:08:40.000Z

I'm using a 3rd party library from Google called api-ai-javascript which is installed in the node_modules folder, using ng serve --preserve-symlinks does not work and neither does updating my angular-cli.json file, I have to explicitly update my tsconfig file with include in order to overcome the following error

Module build failed: Error: C:\Users\Development\Documents\Projects\proj\node_modules\api-ai-javascript\index.ts is not part of the compilation output. Please check the other error messages for details. 
at AngularCompilerPlugin.getCompiledFile (C:\Users\Development\Documents\Projects\proj\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:629:23)
   at plugin.done.then (C:\Users\Development\Documents\Projects\proj\node_modules\@ngtools\webpack\src\loader.js:467:39)
   at <anonymous>
   at process._tickCallback (internal/process/next_tick.js:188:7)
@ ./src/app/services/bot/bot.service.ts 12:0-48
@ ./src/app/components/common/app-common.module.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi ./src/main.ts

Only after updating to Angular 5.0.0 and Angular-cli 1.5.0 did the issue start occurring.

Answer 28 · 2017-11-07T21:48:42.000Z

I'm also seeing the issue after upgrading to Angular 5 and cli 1.5.0 with a third-party logger module that had no issues previously.

Tried suggested methods posted here still the same error.

ERROR in ./node_modules/angular2-logger/app/core/level.ts Module build failed: Error: node_modules/angular2-logger/app/core/level.ts is not part of the compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

Answer 29 · 2017-11-08T02:50:55.000Z

I am have the same error, although mine came about after I imported the 'Input' class from '@angular/core'.

import {Component, OnInit, ViewEncapsulation, Input} from '@angular/core';

After I used the @Input() on the variable hero: Hero it breaks. If I don't type hero like @Input() hero it is fine, but as soon as I add : Hero; it breaks.

Answer 30 · 2017-11-08T20:12:03.000Z

@scottieslg pointed me in the right direction. (Typo in path casing). Additionally I had several backticks (`) in my compoments that were compiling before. single quotes (') resolved the issue.

Answer 31 · 2017-11-09T15:13:54.000Z

I encountered the problem with a project having a Symfony like architecture.

Meaning there is :
./tsconfig.json
./src/tsconfig.app.json
./src/SomeFolder/app/*.ts...

There are dependencies between each bundles.

One of the dependencies was thrown in "...is not part of the compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property"

I solved the problem by including every ts files as suggested by @filipesilva but in a different order.

=> Bundle B needed by Bundle A & C
so tsconfig.app.json like :
{ "include": [ "pathToBundleB/**/*.ts", "pathToBundleA/**/*.ts", "pathToBundleC/**/*.ts", ] }
instead of :
{ "include": [ "pathToBundleA/**/*.ts", "pathToBundleB/**/*.ts", "pathToBundleC/**/*.ts", ] }

That's kinda weird. Looks like @ngtools/webpack/src/angular_compiler_plugin.js:624:23), the function this._compilerHost.fileExists is looking for bundles loaded before, and not after..

Answer 32 · 2017-11-10T01:59:04.000Z

I'm getting this error for files that are referenced in our app.module.ts. Its almost like this file is treated differently in some way because its the module referenced in the AngularCompilerPlugin options??? I've tried manually adding the module to the tsconfig files section but that hasn't resolved it.

Answer 33 · 2017-11-10T22:09:51.000Z

We are having the same issue. We have a private repo where we have published a library that we use. We have this lib as a dependency in our client, when compiling in Angular 5 we get the following error but ONLY in JIT mode, if we use a ng serve --aot or ng build --aot or --prod it works fine. Not sure what is the issue here. We are using Angular 5.0.1 with CLI 1.5.0

We tried using includes in tsconfig, while that solves this issue it generates another different error that my json module declarations are not found which is specified in typings.d.ts (with a declare module "*.json").

ERROR in ./node_modules/@myscope/services-lib/index.ts
Module build failed: Error: 
[path]\node_modules\@myscope\services-lib\index.ts is not part of the compilation output. 
Please check the other error messages for details.
    at AngularCompilerPlugin.getCompiledFile ([path]\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:629:23)

Answer 34 · 2017-11-10T23:24:09.000Z

I've managed to resolve the issue I was having by, as per @filipesilva's advice, compiling the TS code from my library and configuring it so my downstream projects could consume it.
I did have a lot of trouble with this though, so I want to share some details in the hope they'll help others with the same frustrations.

Most of the documentation and discussion available frames these repos we're installing via npm as "libraries" in the open source sense of the term: The code is on github, the artifacts are published to npm, and they must be built for general consumption (ie. accounting for different projects with different ES targets).
My situation (which is not unique, from the sound of things) is different in that my "library" is for internal company use only.
To help separate this use case from the "open source library" scenario, I'm going to call what I've got a "shared codebase".

Your starting point should be @filipesilva's angular-quickstart-lib repo.
If, like me, you've got a "shared codebase" then you don't need everything from here. The key things you need are:

To inline resources before you compile them (ie. templateUrl becomes template)
To compile the TS code using ngc, with appropriate tsconfig.json settings
To add module and typings properties to your package.json, pointing at the index.js and index.d.ts of your compiled code.

What you don't need is bundling (Just use the raw *.js files), and you probably only need a single compile target (ES5 or ES2015).
So you can strip down a lot of the build.js file (removing the need for a fair few extra npm dependencies) and ignore references to flatModule in the tsconfig.lib.json.

I hope that helps.

Answer 35 · 2017-11-11T11:01:53.000Z

This really stressful!

Myself and my team, we have put all energy believing and trusting Angular,
that's this time things will be different not like from angularJs to angular 2.

And we could jump a long time from angularJs to ReactJs or Aurelia or maybe VueJs,
but the love and trust we had it keeps as loving Angular and believing that we won't have same stress like we had from angularJs to angular 2.

Now we already with big projects out there, using third-party open source libraries, which till angular 4.3, everything was fine.

But now in angular 5 with the CLI 1.5, we were expecting the upgrade to be smooth and not having this kind of issue.
So now we're stuck and hoping that the creators of the libraries they update the package.

And the questions come again, should we keep believing that angular will have the success like angularJs had on the past, or now is time to move on trying something different because this is a nightmare, and each version got different stories, and we must signup new courses to learn over.

I'm sorry for my comments, but this how it feels like.

Answer 36 · 2017-11-11T15:38:22.000Z

@jjoao07 Sorry you are having trouble. The issue isn't an angular issue it is a typescript issue. To solve it for linked libraries that have typescript shipped in them you can add that to your tsconfig "includes" property. So if you have a folder in your node modules called "my-lib" you can add. The typescript compiler by default does not see the typescript code in node_modules by default (and it shouldn't). I hope this helps.

this is the same as mentioned by @filipesilva and @little-boy

{
    "includes": ["node_modules/my-lib"]
}

Answer 37 · 2017-11-11T18:10:20.000Z

@deebloo if the Typescript compiler shouldn't be looking at ts code in the node modules then perhaps adding an includes is not the best solution for this? Should we be packaging our libraries differently?

Answer 38 · 2017-11-12T04:56:52.000Z

@sbkpilot1 overall yes. if you are publishing a module you should only be distributing javascript and the generated type definitions. The solution I mentioned is only a workaround

Answer 39 · 2017-11-13T10:46:30.000Z

Adding the following to .npmignore (in addition to 'includ'ing in tsconfig.json, of course) fixes it for me.

# Ignored files
*.ts
!*.d.ts

Answer 40 · 2017-11-14T00:09:06.000Z

hello guys,
I had the same issue in my project (Angular 5.0.0).
I solved it by deleting the file which causes the problem.
After i created it again and pasting the same code step by step in order to make sure what part of the code cause the problem.
Now everything work.
Hope my solution will help you.

@malaba

Answer 41 · 2017-11-14T11:36:01.000Z

@filipesilva I understand your arguments, but why release a breaking change in a minor version ?!

It's better to add a warning in this version and correct this behaviour in 2.0.0

Answer 42 · 2017-11-15T00:43:24.000Z

If you are working with multiple libraries with npm link under a scope and you have something like the following in your tsconfig:

"paths": { "@my-libs/*": ["../node_modules/@my-libs/*"] }

The error will be present. Remove it

Answer 43 · 2017-11-15T12:30:21.000Z

Hi ,
I am also facing the same problem.

while compiling the solution via ng serve -o after angular 5 update this issue occurs.

i have used npm link to link all my modules.

ERROR in ./platform/userModule/app/app.module.ts
Module build failed: Error: E:\temp\trunk\platform\userModule\app\app.module.ts is not part of the compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
at AngularCompilerPlugin.getCompiledFile (E:\temp\trunk\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:624:23)
at plugin.done.then (E:\temp\trunk\node_modules@ngtools\webpack\src\loader.js:467:39)
at
@ ./src/$$_lazy_route_resource lazy
@ ./node_modules/@angular/core/esm5/core.js
@ ./src/main.ts
@ multi ./src/main.ts

Answer 44 · 2017-11-16T06:45:12.000Z

i also met the question ,

ERROR in ./src/app/hero.ts
Module build failed: Error: F:\lenleeWorkProject\angular\angular-tour-of-heroes\src\app\hero.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 (F:\lenleeWorkProject\angular\angular-tour-of-heroes\node_module
s@ngtools\webpack\src\angular_compiler_plugin.js:624:23)
at plugin.done.then (F:\lenleeWorkProject\angular\angular-tour-of-heroes\node_modules@ngtools\webpack\sr
c\loader.js:467:39)
at
@ ./src/app/hero-detail/hero-detail.component.ts 11:0-31
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

============================
i am check all the hero.ts reference， The discovery problem appears on the file path
is Uppercase the Hero Instead of hero 。

so why path error not prompting？

Instead, it returns to normal after manually triggering the save

Angular CLI: 1.5.0
Node: 8.4.0
OS: win32 x64
Angular: 5.0.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular / cli: 1.5.0
@angular-devkit / build-optimizer: 0.0.33
@angular-devkit / core: 0.0.20
@angular-devkit / schematics: 0.0.35
@ngtools / json-schema: 1.1.0
@ngtools / webpack: 1.8.0
@schematics / angular: 0.1.3
typescript : 2.4.2
webpack : 3.8.1

Answer 45 · 2017-11-20T14:54:54.000Z

Hello, I came across the same issue using angular 5.0.1 and CLI 1.5 :

Module build failed: Error: xxx\ng4-blog-frontend\src\app\models\post.ts is not part of the compilation. Please make sure it is in your tsconfig via the
'files' or 'include' property.

At first I had a case issue that I solved and it worked fine for a while but the error came back somehow later.
I tried what @sandangel suggested by using the flag --preserve-symlinks but it did not worked.

Finally, I found another issue (#20091) where @stephanecot suggested the use of --aot and it works fine, although I have no idea why...
As the flag suggests, it use the Ahead of time compilation which can be unwanted.

I hope it will help someone.

Answer 46 · 2017-11-23T00:03:39.000Z

Tried workarounds mentioned in this thread, dosen't seem to help. Still getting the same error.

ERROR in ./node_modules/angular2-isotope/index.ts

How can I compile the library locally to continue development for the time being?

Answer 47 · 2017-11-23T11:01:40.000Z

What I did with my library is I moved it to the src folder and included it from there. Not a clean solution, but it'll work until the Angular guys figure this one out.

Answer 48 · 2017-11-24T12:53:25.000Z

FOR ME,
The issue comes up when the project stands on a junction directory or symlink.

Answer 49 · 2017-11-25T10:01:32.000Z

I have same symptoms like @nueko has. When one of my dependencies is linked via symlink and I invoke ng build --prod --build-optimizer - then it fails.
--preserve-symlinks helps to fix this particular case:
ng build --prod --build-optimizer --preserve-symlinks

Answer 50 · 2017-11-29T23:29:23.000Z

Current set :

Angular-cli : 1.5.4
npm 5.5
node 8.9

This is my problem:

Module build failed: Error: C:\...\src\app\hero.ts is not part of the compilation. 
Please make sure it is in your tsconfig via the 'files' or 'include' property.
  
  at AngularCompilerPlugin.getCompiledFile (C:\...\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:620:23)
    at plugin.done.then (C:\...\node_modules\@ngtools\webpack\src\loader.js:467:39)
    at <anonymous>
 @ ./src/app/hero-details/hero-details.component.ts 11:0-31
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

Answer 51 · 2017-12-03T01:44:58.000Z

adding: to the defaults section of .angual-cli.json
,
"build": {
"preserveSymlinks": true
}

corrects this malfunction. 100% reproducible with generated app.

Answer 52 · 2017-12-03T06:09:23.000Z

@HollisTech, or just

ng serve --preserve-symlinks

Answer 53 · 2017-12-03T18:40:43.000Z

@HollisTech
it shows same warning! : (
ERROR in ./src/app/hero.ts ....

Answer 54 · 2017-12-07T11:40:43.000Z

Yep, same issue here with upgrading to 5.1, never had this issue before now.

My include ended up looking like this to bring everything in I needed for compilation.

"include": [ "**.ts", "app/**.ts", "app/**/**.ts", "../node_modules/angular2-semantic-ui/components/**/**.ts" ]

Answer 55 · 2017-12-08T22:35:00.000Z

We're using the "shared codebase" approach @rolaveric is using and I managed to get it to compile and run fine by adding the following include to the tsconfig.json:

"include": [
    "src/**/*",
    "node_modules/{sharedcodebasename}/**/*"
]

That all works great, however if I try and run ng test I end up with the same build errors that I got before adding our shared codebase to the includes (Module build failed: "{sharedcodebasename}/file.ts" is not part of the compilation output.

Now @filipesilva I appreciate you saying this isn't the "proper way to do an NPM package", but for my case (and what looks like a few others in this thread), we have internal company "packages" that we don't want pushing to NPM (we push them to our private Nexus repo) and publishing typescript files as a package is exactly what we need. Is there any way that this can be resolved? I understand the rationale behind the change in compilation behaviour, but it seems to be causing many unintended headaches.

Answer 56 · 2017-12-11T13:13:50.000Z

@mattytommo, instead of editing tsconfig.json like that, you can add the include(s) into tsconfig.app.json + tsconfig.spec.json (prefixed with ../ of course). I know that's slightly uglier. :)

Answer 57 · 2017-12-13T09:44:13.000Z

@rkrisztian I must have tried it in those files 100 times, but I don't think I actually prefixed with ../ because adding that to the spec.json file works!!

So, essentially, as long as you put the include within the spec.json (for the tests) and the tsconfig.json (or .app.json), the build and tests work. Thanks again rkrisztian.

Answer 58 · 2017-12-13T12:27:02.000Z

I don't think is a problem of angular-cli. I compile my projects directly with webpack and my own config files and I have the same problem if a use AOT option with Angular 5.x.x but it's perfect in Angular 4.x.x. But if I don't use AOT option the compilation is fine even in Angular 5.x.x.
It's very strange but the problem is that some DTOs classes are not included in the compilation process. I have 15 DTO classes in src\app\common\dto directory and 16 POJO classes in src\app\common\data directory and some of them are not included in the compilation process. I reviewed the Javascript files generated by the AOT compiler and they don't appear in any place. But if I don't use AOT or I use Angular 4.x.x all the classes are included in the compilation process.
Maybe the bug is in the Ahead-of-Time compiler in Angular 5.x.x or in the Webpack Plugin: @ngtools\webpack

ERROR in ./src/app/common/dto/SolicitanteDTO.ts
Module build failed: Error: G:\Proyectos\BITCITA\bitcita-front\src\main\frontend\src\app\common\dto\SolicitanteDTO.ts is not part of the compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
at AngularCompilerPlugin.getCompiledFile (G:\Proyectos\BITCITA\bitcita-front\src\main\frontend\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:643:23)
at plugin.done.then (G:\Proyectos\BITCITA\bitcita-front\src\main\frontend\node_modules@ngtools\webpack\src\loader.js:467:39)
@ ./src/app/citas/component/cita-form-new.component.ts 19:23-65
@ ./src/app/citas/cita.module.ngfactory.js
@ ./$$_lazy_route_resource async
@ ./~/@angular/core/esm5/core.js
@ ./src/main-aot.ts

ERROR in ./src/app/common/dto/SolicitanteCampoDTO.ts
Module build failed: Error: G:\Proyectos\BITCITA\bitcita-front\src\main\frontend\src\app\common\dto\SolicitanteCampoDTO.ts is not part of the compilation. Please make sure it is
in your tsconfig via the 'files' or 'include' property.
at AngularCompilerPlugin.getCompiledFile (G:\Proyectos\BITCITA\bitcita-front\src\main\frontend\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:643:23)
at plugin.done.then (G:\Proyectos\BITCITA\bitcita-front\src\main\frontend\node_modules@ngtools\webpack\src\loader.js:467:39)
@ ./src/app/citas/component/cita-form-new.component.ts 18:28-75
@ ./src/app/citas/cita.module.ngfactory.js
@ ./$$_lazy_route_resource async
@ ./~/@angular/core/esm5/core.js
@ ./src/main-aot.ts

ERROR in ./src/app/common/data/reserva.ts
Module build failed: Error: G:\Proyectos\BITCITA\bitcita-front\src\main\frontend\src\app\common\data\reserva.ts is not part of the compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
at AngularCompilerPlugin.getCompiledFile (G:\Proyectos\BITCITA\bitcita-front\src\main\frontend\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:643:23)
at plugin.done.then (G:\Proyectos\BITCITA\bitcita-front\src\main\frontend\node_modules@ngtools\webpack\src\loader.js:467:39)
@ ./src/app/recursos/component/agenda-form-reserva-list.component.ts 8:16-52
@ ./src/app/recursos/component/agenda-form.component.ngfactory.js
@ ./src/app/campanyas/campanya.module.ngfactory.js
@ ./$$_lazy_route_resource async
@ ./~/@angular/core/esm5/core.js
@ ./src/main-aot.ts

Answer 59 · 2017-12-13T20:14:40.000Z

I have faced the same issue and turns out, in my case it was a Casing Issue.

I had an import like so: import { Employee } from '../../../models/employeeType.model'; in more than one component.

One of the components that had this import had a different casing in the file path like import { Employee } from '../../../models/EmployeeType.model';

Changing the file path for the import to be consistent across the application fixed the issue for me.

Answer 60 · 2017-12-13T21:24:21.000Z

@rgantla wooww..I wondered how long it would take (centuries) to figure out where I was wrong .
It was exactly Casing issue!
Very thanks!

Answer 61 · 2017-12-14T08:40:35.000Z

@rgantla OMG!!. That was exactly the problem. It was a Casing Issue. Thanks!!

Answer 62 · 2017-12-14T09:24:51.000Z

In my case it was not exactly a casing issue but also an import that had to be fixed.

Using ngx-clipboard I had to change the import from
import { ClipboardModule } from 'ngx-clipboard/index';
to
import { ClipboardModule } from 'ngx-clipboard/dist';.

Hope that helps someone in the same situation.

Answer 63 · 2017-12-18T19:45:47.000Z

I have exactly the same problem if I run ng serve from symbolically linked folder (~/src/... in my case).
However, if I run ng serve from the real folder (/c/src/... in my case), everything is fine.

Answer 64 · 2017-12-20T16:27:50.000Z

This issue caused most of the teams in my Enterprise company to drop all their Angular X projects & switch to React based application (because we have a huge shared code-base & there is no easy way to export Angular projects as NPM libraries).

I actually liked Angular that's too bad :\ hope this will be solved soon enough before the point of no return.

Answer 65 · 2018-01-05T20:54:20.000Z

I had the same problem in one of my npm modules.
I've solved it by adding a declaration files *.d.ts.
I think you should open an issue to the npm module that your using.

Answer 66 · 2018-01-08T15:30:59.000Z

I left a comment #6195 (comment) that might help some people resolve issues around this.

Answer 67 · 2018-01-08T18:33:28.000Z

@SaltyDH I had a similar issue but found that it was a result of the version of TypeScript that I had installed. I had ^2.5.1 in my package.json and thought I was using 2.5.3. Turns out I had 2.5.1 installed and it was causing the issue.

I changed my dependency to 2.5.x, the same as the Angular repo
Did an npm install
Verified with npm list typescript that I had 2.5.3 installed
Ran ng serve and my app built without issue

Answer 68 · 2018-01-11T10:59:21.000Z

@rkrisztian I had the issue just with ng test.
Add ../ in the include paths in the tsconfig.spec.json resolve my problem.
It seems the inheritance of the tsconfig.json doesn't work for the paths, because the base directory isn't the same.

Answer 69 · 2018-01-25T19:23:54.000Z

I have an issue with the workaround. My SO question: https://stackoverflow.com/questions/48449948/how-to-import-repo-with-uncompiled-typescript-in-angular-5-x

Answer 70 · 2018-01-29T10:29:40.000Z

Also, if working with ASP.Core 2.0 template, the src folder is renamed to ClientApp so in that case you should add it to your tsconfig.json file:

{
  "compilerOptions": {
    // stuff
  },
  "include": [
    "./ClientApp/**/*.ts"
  ]
}

Answer 71 · 2018-01-30T21:30:22.000Z

I have a large enterprise app with the "code sharing" setup mentioned above. Essentially there are lazy routes defined that load feature modules, these modules are shells that in turn import from node_modules where the actual feature modules (in module.ts files via index.ts barrels) are pulled in from our internal npme/nexus. Worked like a champ with Ng4 and enabled our distributed development across multiple teams/repos.

With Ng5, after updating the tsconfig files, it will work in JiT (ng serve and ng build).

AoT will build, but when the app is started a "Uncaught TypeError: ctor is not a constructor" is thrown immediately .

Answer 72 · 2018-01-31T13:34:35.000Z

Seems silly that we have to include files that are normally part of the build. Currently my whatever is complaining that " \src\main.ts is missing from the TypeScript compilation." but that's the very very first file angular looks at, so that seems strange.

Oh well.

Answer 73 · 2018-02-02T09:49:38.000Z

@filipesilva

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.

What exactly do you mean? We use ng-packagr, which ships *.d.ts files and we thought that is the right way to deliver a package.

Answer 74 · 2018-02-02T10:07:06.000Z

@plamf Shipping *.d.ts is fine, it is shipping the original source *.ts files that is not.

Answer 75 · 2018-02-04T01:25:06.000Z

Well we’re not ‘shipping’ anything. This is an internal library for which we have control over which compliler we use. So packaging for distribution is a unnecessary step. We did figure out how to import it with straight .ts files, as the SO question was answered satisfactorily.

Answer 76 · 2018-02-15T00:26:43.000Z

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

Answer 77 · 2018-02-16T23:31:50.000Z

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

Answer 78 · 2018-02-20T15:51:21.000Z

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

Answer 79 · 2018-03-01T04:35:31.000Z

@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

Answer 80 · 2018-03-05T19:10:51.000Z

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.

Answer 81 · 2018-03-09T05:49:31.000Z

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

Answer 82 · 2018-03-22T22:06:12.000Z

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

Answer 83 · 2018-04-12T04:47:59.000Z

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.

Answer 84 · 2018-09-21T01:34:59.000Z

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

Answer 85 · 2019-01-07T14:29:42.000Z

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.

Bug Report or Feature Request (mark with an x)