Missing from the TypeScript compilation are Angular5's polyfills.ts and main.ts files

Here is the structure of my Angular5 project.

https://i.stack.imgur.com/tmbE7.png

Within both tsconfig.app.json and package.json, there is a common section:

 "include": [
      "/src/main.ts",
      "/src/polyfills.ts"
    ]

Despite trying various solutions, I continue to encounter this error:

    \polyfills.ts & \main.ts is missing from the TypeScript compilation. 
Please make sure it is in your tsconfig via the 'files' or 'include' property.

https://i.stack.imgur.com/jEZPp.png Any suggestions on what might be missing here?

  tsconfig.json
        {
          "compileOnSave": false,
          "compilerOptions": {
            "outDir": "./dist/out-tsc",
            "sourceMap": true,
            "declaration": false,
            "moduleResolution": "node",
            "emitDecoratorMetadata": true,
            "experimentalDecorators": true,
            "target": "es5",
            "typeRoots": [
              "node_modules/@types"
            ],
            "lib": [
              "es2017",
              "dom"
            ]
          }
        }
src/tsconfig.app.json
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "include": [
    "main.ts",
    "polyfills.ts"
  ],
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

Answer №1

After some investigation, I discovered the solution to the issue. It turns out that the problem was occurring because I was working in a symbolic link directory ($HOME/dev -> d:\dev\). By moving to the original directory (d:\dev) and running the commands from there, everything worked as expected.

Reference: https://github.com/angular/angular-cli/issues/9909

Answer №2

Modifying the angular.json file by adding the specified attribute within the

projects/project/architect/build/options
node will enable the functionality of
"preserveSymlinks": true
.

{
  ...  
  "projects": {
    "<your_project_name>": {
      ...  
      "architect": {
        "build": {
          ...  
          "options": {
            ...
            "preserveSymlinks": true
          }
          ...
         }
       }
      }
    }
}

Answer №3

The problem I encountered was specifically with the src/polyfills.ts file. It was omitted from the "files" array in the tsconfig.app.json.

Answer №4

Encountered an issue today while attempting to utilize Git Bash on Windows 10 for developing an Angular 9 application.

It appeared that the file paths were excessively long or deeply nested, causing Git Bash to struggle with them. It's possible that Git Bash resorted to using symbolic links in certain instances.

Ultimately, running the ng build command from either Cmd or PowerShell resolved the issue smoothly.

Answer №5

After facing the same issue for some time, I managed to resolve it by simply relocating my project files. Moving them to a different disk other than the system drive (such as d:, e: ...) did the trick for me.

Answer №6

Recently encountered this situation in a project using Angular 16, while working on Windows with Git Bash.

The root cause of the problem was actually due to a path casing discrepancy: The correct path was /c/src/Web/TheProject, but navigating to the same location with different letter cases, like /c/src/web/TheProject (with a lowercase 'w' in the web folder), is feasible in Git Bash. However, running npm run build from this type of mismatched path can lead to issues.

To resolve this issue, it's important to ensure that the casing of the Git Bash path matches the casing of the corresponding Windows path. In our scenario, simply executing cd /c/src/Web/TheProject solved the problem.

I'm sharing this experience because it's an easy mistake to overlook, especially when other suggested solutions don't provide clear guidance, particularly in cases where the path is short and doesn't involve symbolic links.

Answer №7

Encountered a problem on my Windows 10 system, and it turned out that the incorrect casing in the file path was causing the issue. In short, I mistakenly navigated to D:\source\ instead of the correct directory D:\Source\ (with a capital S). By changing the working directory to D:\Source, the problem was resolved.

Answer №8

Perhaps the issue lies in the usage of an absolute path.

Consider switching from:

"/src/main.ts",

to

"src/main.ts",

(Alternatively, you could try "main.ts")

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

We are in need of a provider for the Ionic Network native plugin

I have encountered an issue while trying to use Ionics native plugin "Network" as it fails due to a missing provider. To prevent any errors, I performed a fresh installation of Ionic along with the necessary dependencies: ionic cordova plugin add cordova- ...

Stop allowing the entry of zero after a minus sign

One of the features on our platform allows users to input a number that will be automatically converted to have a negative sign. However, we want to ensure that users are unable to manually add a negative sign themselves. We need to find a solution to pre ...

Adding classes dynamically in Angular 2 app functionality

With this particular layout in mind: <li role="menu" class="drop-down"> <a class="drop-down--toggle"> <span class="flag-icon" [class]="_current.flag"//<-- don't work></span> </a> <ul class="drop-down--men ...

Display an HTML image within a span tag and ensure it is aligned to the bottom

I am facing a layout issue with 2 images that are placed side by side within their tag . The sizes of the images are different, but they are both anchored at the top of their parent element. <span style="position: relative; left: 0; top: 0; vertical- ...

Best Practice for Using *ngIf in Angular (HTML / TypeScript)

In the past, I frequently used Angular's *ngIf directive in my HTML pages: <p *ngIf="var === true">Test</p> (for instance) However, there have been instances where I needed to perform multiple checks within the *ngIf directive ...

Errors during TypeScript compilation in Twilio Functions

When I run npx tsc, I encounter the following errors: node_modules/@twilio-labs/serverless-runtime-types/types.d.ts:5:10 - error TS2305: Module '"twilio/lib/rest/Twilio"' does not export 'TwilioClientOptions'. 5 import { Twil ...

Sharing variables between parent and child components in Angular 2 Dart using router

How can I effectively share variables between a parent component with a router and a child component while keeping them updated through bindings? Here is a snippet of the code: app_component.dart: import 'package:angular2/core.dart'; ...

What are the steps to fix errors when deploying a MEAN stack application on Heroku?

Upon building my Angular app with a Node.js API and deploying it on Heroku, I encountered an error. Despite this, the app runs smoothly with no errors when tested on my local server. Below are the logs from Heroku: C:\Users\PC>heroku logs -a= ...

Restricting the data type of a parameter in a TypeScript function based on another parameter's value

interface INavigation { children: string[]; initial: string; } function navigation({ children, initial }: INavigation) { return null } I'm currently working on a function similar to the one above. My goal is to find a way to restrict the initi ...

Issue: mongoose.model is not a valid function

I've been diving into several MEAN tutorials, and I've hit a snag that none of them seem to address. I keep encountering this error message: Uncaught TypeError: mongoose.model is not a function Even after removing node_modules and reinstalling ...

The Angular directive needed to support the GoogleSigninButtonDirective in the @abacritt/[email protected] package is currently incompatible with Angular 13

Despite the documentation declaring that @abacritt/angularx-social-login:1 is compatible with Angular 13 and 14, it fails to work in my Angular 13 project. The error arises after running npm start, pointing fingers at GoogleSigninButtonDirective for the is ...

Tips for resolving the unmounted component issue in React hooks

Any suggestions on resolving this issue: Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect ...

Position the center of an Angular Material icon in the center

Seeking help to perfectly center an Angular Material icon inside a rectangular shape. Take a look at the image provided for reference. The current positioning appears centered, but upon closer inspection, it seems slightly off-center. It appears that the ...

Running nestjs-console commands within an Angular/nx workspace environment can be easily achieved by following these steps

I have integrated a NestJS application within an Angular / Nx workspace environment. For running commands in the Nest application, I am utilizing nestjs-console (e.g., to load fixture data). As per the instructions in the nestjs-console documentation, th ...

Angular encountered an ERROR of type TypeError where it cannot access properties that are undefined when trying to read the 'title'

I designed a form and I am trying to save the information entered. However, when I attempt to use the save method, an error keeps popping up. How can I troubleshoot this issue and successfully save the data from the form? ...

Utilize the npm module directly in your codebase

I am seeking guidance on how to import the source code from vue-form-generator in order to make some modifications. As a newcomer to Node and Javascript, I am feeling quite lost. Can someone assist me with the necessary steps? Since my Vue project utilize ...

Angular 5 - Reverting back to the previous state

In my Angular web application, I encounter a scenario where I need to navigate back to the previous state. Let's say I am currently on a page at http://localhost/someURL. On this particular page, users have the ability to search for items and see the ...

Displaying svg files conditionally in a react native application

I have developed an app specifically for trading dogs. Each dog breed in my app is associated with its own unique svg file, which are all stored in the assets folder (approximately 150 svg files in total). When retrieving post data from the backend, I re ...

I am currently leveraging Angular 17, but I have yet to enable Vite. Can anyone guide me on

Despite having the most recent version of NX and Angular, my app has not yet integrated Vite. I've come across online suggestions on how to enable it, but none of them make sense to me because my project doesn't have an angular.json file. Instead ...

Exploring ways to list interface keys in order to create a new interface where the value is determined by the corresponding key

How can we iterate through interface keys to create a new interface where the value is dependent on the key? type IParse<T> = { [K in keyof T as K extends string ? K : never]: string // How can we specify that if K === 'a', the type sho ...