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

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 https://github.com/angular/angular/issues/20115)

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.

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

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.

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.

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.

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

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

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.

have you tried with --preserve-symlinks flag? https://github.com/angular/angular/issues/20091

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.

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.

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:

1. To inline resources before you compile them (ie. templateUrl becomes template)
2. To compile the TS code using ngc, with appropriate tsconfig.json settings
3. 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.

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 https://github.com/angular/angular-cli/commit/9b43a9c30420a6fae10de32af90d27c1c0c4d87b manually and the error subsides.

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.

@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

me too

add in tsconfig.app
“baseUrl”: “” for
“baseUrl”: “”

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

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)

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.

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)

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.

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

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.

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.

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

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

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

@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

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

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.

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

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

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

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

@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

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

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

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

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

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

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

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.