angular-cli: main.ts is missing from de TypeScript compilation

Hello,

I just installed node and tried to use cli. I went with the guide:

`npm install -g @angular/cli

ng new my-project cd my-project ng serve`

aaaaaand… nope:

ERROR in C:/Users/hpelitebook/Documents/github/angularjs/angular2/src/main.ts Module build failed: Error: C:\Users\hpelitebook\Documents\github\angularjs\angular2\src\main.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. at AngularCompilerPlugin.getCompiledFile (C:\Users\hpelitebook\Documents\github\angularjs\angular2\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:674:23) at plugin.done.then (C:\Users\hpelitebook\Documents\github\angularjs\angular2\node_modules\@ngtools\webpack\src\loader.js:467:39) at <anonymous> ERROR in C:/Users/hpelitebook/Documents/github/angularjs/angular2/src/polyfills.ts Module build failed: Error: C:\Users\hpelitebook\Documents\github\angularjs\angular2\src\polyfills.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. at AngularCompilerPlugin.getCompiledFile (C:\Users\hpelitebook\Documents\github\angularjs\angular2\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:674:23) at plugin.done.then (C:\Users\hpelitebook\Documents\github\angularjs\angular2\node_modules\@ngtools\webpack\src\loader.js:467:39) at <anonymous>

This is my first time with it and i’m not sure where to look

Thank you!

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 33 (2 by maintainers)

Most upvoted comments

Editing angular.json to add following attribute under the node “projects/{yourprojectname}/architect/build/options” should help: “preserveSymlinks”: true

Got this problem as well and got it working by moving to a shorter absolute path (rather than one relative to a symlink).

Here are run down with actual names changed to protect the guilty.

To me they demonstrate the problem isn’t git console; It’s DOS Symbolic Links created using mklink, (I guess that long paths would also be an issue though I didn’t test them.)

Using;

  • Windows Git bash console;
  • Angular CLI: 1.7.4
  • Node: 8.11.1
  • OS: win32 x64
  • Angular: 5.2.11

I did:

  1. cd ~/Repos/Bitbucket/myownname/myproject/
    • Repos is symlink for d:/Repo
  2. ng new my-angular-project
  3. cd my-angular-project
  4. ng serve --open
    • FAIL!!
  5. ng build
    • FAIL!!
  6. mv my-angular-project/ /d/
  7. ng serve --open
    • WORKS 😃 !!!
  8. Will rush through this a bit now; your probably getting board.
  • Created another project on /d/newproj and tested it worked; It did.

  • Moved it to my /d/Repos/newproj and went to it and it still worked.

  • Then vie symlink using ~/Repos/newproj and it Failed; so symlinks are bad

  • As home (~) has a bit of path length too it I tested this with the symlink on /c/ and it failed again

  • Git Bash MSYS symlinks are of course DOS mklink so tested it in DOS console through the link, and not through the link, and got the same result; symlinks are bad

  • Just to be even more pedantic I tested it using cygwin symlinks which are not created using DOS mklink and guess what; IT WORK!!

So once again DOS proves the prophetic nature of it’s own acronym. Bill Gates was truly a visionary oracle when he choose that name 😃

I also ran into this problem when using a DOS symbolic link. When I changed to the physical path of the directory, it built without error.

I’m having the same issue with a newly-generated project using angular-cli version 6.0.3. At first, the project worked fine. After I added some files, I ran “ng serve” and it worked ok. Then I ran “ng build” and it failed. Now “ng serve” is not working either.

Both git bash and windows cmd fail.

UPDATE (confusing): Moving the entire project folder to another path solved my issue. Not sure whether it’s a matter of permissions or long paths, but yeah now it works. I’ll dig deeper into the permission thing and update the comment

@igghera Thank you very much. Shortening the path solved my issue. Before my path was like: “C/user/my document/javascript/angular/project/proj-name” and got build errors. Then I changed to “C/Angular/proj-name” and it compiled and ran successfully.

It’s my first time trying out Angular. You can imagine the frustration. Now I can continue with my lessons.

Having the same issue:

> yarn build
yarn run v1.6.0
$ ng build
Date: 2018-05-22T19:52:01.735Z
Hash: 7a9bf0b1a9416b4e7f92
Time: 5862ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 929 bytes [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 886 bytes [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 261 kB [initial] [rendered]

ERROR in ./src/main.ts
Module build failed: Error: /Users/keegomyneego/Documents/Projects/roshub_web_app/src/main.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at AngularCompilerPlugin.getCompiledFile (/Users/keegomyneego/Documents/Projects/roshub_web_app/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:662:23)
    at plugin.done.then (/Users/keegomyneego/Documents/Projects/roshub_web_app/node_modules/@ngtools/webpack/src/loader.js:467:39)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
 @ multi ./src/main.ts
ERROR in ./src/polyfills.ts
Module build failed: Error: /Users/keegomyneego/Documents/Projects/roshub_web_app/src/polyfills.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at AngularCompilerPlugin.getCompiledFile (/Users/keegomyneego/Documents/Projects/roshub_web_app/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:662:23)
    at plugin.done.then (/Users/keegomyneego/Documents/Projects/roshub_web_app/node_modules/@ngtools/webpack/src/loader.js:467:39)
    at <anonymous>
 @ multi ./src/polyfills.ts
error Command failed with exit code 1.
tsconfig.json
{
  "compileOnSave": false,
  "compilerOptions": {
    "allowJs": true,
    "noImplicitAny": false,
    "noUnusedLocals": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "strictNullChecks": true,
    "baseUrl": "src",
    "paths": {
      "$assets/*": ["assets/*"],
      "$environment": ["environments/environment"],
      "$library/*": ["library/*"],
      "~core/*": ["app/core/*"],
      "~shared/*": ["app/shared/*"],
      "~account/*": ["app/features/account/*"],
      "~device/*": ["app/features/device/*"],
      "~login/*": ["app/features/login/*"],
      "~settings/*": ["app/features/settings/*"],
      "~view/*": ["app/features/view/*"]
    },
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}
tsconfig.app.json
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015"
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  "files": [
    "./scripts/extend-rxjs.ts"
  ]
}
.angular-cli.json
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "roshub_web_app"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "rh",
      "styles": [
        "sass/styles-app-loading.scss",
        "sass/styles.scss"
      ],
      "stylePreprocessorOptions": {
        "includePaths": [
          "../node_modules"
        ]
      },
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.dev.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {
    }
  }
}

Update: Removing the "files" key from tsconfig.app.json fixed this issue for me. I believe "files" is auto-populated by ts if it’s not specified, otherwise it exclusively uses the specified files (as mentioned in the tsconfig docs), which makes sense why it couldn’t find a bunch of stuff.

I did just recently do an upgrade of certain Angular packages, but this may be unrelated. I’m also the only non-Windows user to have this issue so far.

npm start also did the job for me

I faced the same problem during ng serve but npm start solved my problem as it was showing some error in webpack module

I faced the same problem during ng serve but npm start solved my problem as it was showing some error in webpack module

Yep, adding (“preserveSymlinks”: true) to the angular.json file got rid of the compiling error regarding main.ts

hmm, maybe not the compiler was still active when I was trying to fix another error and now the error regarding main.ts has returned

Thank you! That does the trick and the serve command works. But as I try the ng commands while I am at a symlinked path, I get the some warnings. The output of “ng serve” looks like this:



** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2019-02-28T13:13:36.820Z
Hash: ebdef6caace71813630d
Time: 14555ms
chunk {main} main.js, main.js.map (main) 127 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 258 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 745 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 8 MB [initial] [rendered]

 WARNING in ./node_modules/@angular/core/fesm5/core.js 18349:15-36
Critical dependency: the request of a dependency is an expression

 WARNING in ./node_modules/@angular/core/fesm5/core.js 18361:15-102
Critical dependency: the request of a dependency is an expression
 i 「wdm」: Compiled with warnings.


The app seems to work correctly, but because of this warnings I am not sure if really everything works. I know, it’s “just” a warning and maybe this is not really relevant because it is only the fesm5 core. But if we could figure out how to prevent this warnings, I would be happy.

To let you have a little bit more informations: OS: win32 x64 Console: git-bash / msys2 Node: 10.13.0 Angular CLI: 7.3.1 Angular: 7.2.5

Do you have any idea why I get this errors?

@AlanCarlyle

Got this problem as well and got it working by moving to a shorter absolute path (rather than one relative to a symlink).

you deserve a big praise, thanks so much for this, was struggling for around 2 days where for all my colleagues our project works fine and for me it never built… turns out I was the reason because I always create symlinks to shorten the path… will be more careful with that in the future.

really thank you for finding this.

I had the same issue, here the problem was also me using a junction When starting from the actual path, it worked!