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

[milosmijakovac]

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

[HollisTech]

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

corrects this malfunction. 100% reproducible with generated app.

[nueko]

@HollisTech, or just

ng serve --preserve-symlinks

[milosmijakovac]

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

[RyannGalea]

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" ]

[mattytommo]

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.

[rkrisztian]

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

[mattytommo]

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

[estebanluengo]

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

[rgantla]

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.

[milosmijakovac]

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

[estebanluengo]

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

[sbley]

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.

[zhekaus]

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.

[bnohad]

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.

[ranbuch]

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.

[txinfo]

I left a comment https://github.com/angular/angular-cli/issues/6195#issuecomment-355992061 that might help some people resolve issues around this.

[sternetj]

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

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

[tobat50]

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

[BBaysinger]

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

[AndreiLucaci]

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"
  ]
}

[b-johnse]

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 .

[stofte]

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.

[plamf]

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

[benelliott]

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

[BBaysinger]

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.

[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 https://github.com/angular/angular-cli/issues/8284#issuecomment-341417325.

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.