Having trouble starting a new Angular 5 project with angular-cli?

Trying to start a fresh Angular 5 project, I have successfully installed @angular/cli version 1.6.3 and ran the following commands:

ng new project --routing

Post installation, I proceeded with the commands:

cd project
ng build

However, encountered the following errors:

Module build failed: Error: d:...\project\src\main.ts is missing from the TypeScript compilation. Please ensure it is included in your tsconfig file under 'files' or 'include' property.

Module build failed: Error: d:...\project\src\polyfills.ts is missing from the TypeScript compilation. Make sure it is added to your tsconfig via the 'files' or 'include' property.

There are discussions regarding this issue on the Angular Github page, but the resolution provided did not prove helpful besides mentioning that it has been resolved or pointing out instances of .ts files in node_modules.

The Windows 10 operating system is being used here.

EDIT: Here are the contents of the two tsconfig files:

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

The other (src/tsconfig.app.json):

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

Both these configurations were generated using ng new.

Answer №1

Oops! It seems I overlooked responding to this question. The answer can actually be found on the Angular github page dating back quite a while.

For Angular 5, don't forget to include --preserve-symlinks in both ng build and ng serve.

In the case of Angular 6, things have changed a bit. Now, you'll need to include

 "preserveSymlinks": true,

in your angular.json file, specifically under architect/build/options in your project setup.

Answer №2

To ensure that your system is up to date, check that you have at least node 6.9.x and npm 3.x.x installed by entering "node -v" and "npm -v" in your terminal or console. Outdated versions may cause errors, while newer versions should work smoothly.

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

The absence of a value is not allowed. Please provide a valid value for the parameter named connectionString before executing the

I'm encountering an issue while trying to set up my connection string in the appsettings.json file and importing it into my startup file. The error message I keep receiving is "Value cannot be null. Parameter name: connectionString." This problem aros ...

Tips for transferring several parameters from an Angular 8 application to a .NET Core API

Hello, I am facing an issue with passing multiple string parameters from an Angular 8 app to a .NET Core API. This is my first time posting a question so I will try to provide all the necessary details. Here is the Angular code snippet: import { Injectab ...

Values within the inner *ngFor loop have been selected from the outer *ngFor loop

In our Angular 4 application, we are facing a specific requirement that needs to be addressed. We have successfully implemented *ngFor up to three levels and below is the code snippet for the implementation: <div *ngFor="let country of Countries"> ...

What impact does the deprecation of TSLint have on Angular projects?

At the company I currently work for, we are on the cusp of embarking on a new Angular application project. Delving into the topic of linting, I came across news that TSLint is in the process of being deprecated. Given that TSLint is integrated into Angula ...

Experiencing a strange response while attempting to parse the result of an Angular 2 HTTP JSON request

After successfully implementing the http.get call and retrieving data from the request, I encountered an issue: this.http.get('https://data.cityofnewyork.us/resource/xx67-kt59.json').subscribe(data => { // Read the result field from the ...

Populate a chart in real-time with data pulled directly from the Component

I'm completely new to Angular and I feel like I might be overlooking something important. Within my component, I have 3 variables which are populated after invoking the .subscribe method on an observable object. For example: this.interRetard = this ...

Multiple triggers occur when custom component properties are bound

Upon using a custom component with an input property where a function is bound to it, I have observed that the function gets called multiple times. For example: <some-tag [random-input]="randomFunction()"></some-tag> And in the class: priva ...

Issue arises with CORS causing Karma test for Angular 4 component to fail

When executing ng test, I encounter an error (I am using the standard setup with Karma) while trying to test a component: XMLHttpRequest cannot load ng:///DynamicTestModule/FullModalHeaderComponent.ngfactory.js. Cross origin requests are only supported fo ...

Error message indicating that a component is not defined upon loading providers

Within our Angular 2 application, we have numerous services that are loaded as Providers in the NgModule. One particular service is responsible for checking the instance of a specific component. if (this.appRef.components[0].instance instanceof Main) { ...

Determine the location of a different element

Looking for the most effective way to align one element with another in Angular2? In my case, both elements share the same parent: <ion-fab right bottom #fab></ion-fab> <help-overlay content="Click here"></help-overlay> I want my ...

Angular 8 ngBootstrap - Resizable and Draggable Modal Feature

Currently, I am attempting to integrate Bootstrap version 4 with Angular 8. My main goal is to create a modal that is both re-sizable and draggable. Although there are some examples available for other versions such as 3.xx, none seem to be specifically de ...

Arranging JavaScript object by object properties (name)

Can anyone assist me with my training? I am currently learning JavaScript (Js) and TypeScript (Ts) by working with an external public API. After successfully fetching and displaying my data, I now want to implement sorting functionality. My goal is to sor ...

Guide on invoking a private function in Angular2 using RxJS Observables

Greetings, I am a beginner to RxJs and just started learning it today. As a newbie, I have a question regarding its usage. My current task involves extracting XML RSS feed and then converting it into a JSON format. To achieve this, I created a FeedService ...

Learn how to create a versatile TypeScript function that combines an array parameter and values to form an object

I've created a function that combines an array of keys with an array of values to form an object. Here's how the function looks: function mergeToObject(keys: string[], values: string[]) { const object:? = {} for (let i = 0; i < keys.length ...

Unable to combine mui theme with emotion css prop

I recently made the switch from overwriting styles in my styles.css file with !important to using emotion css prop for implementing a dark theme in my web app. Below is the code snippet from App.tsx where I define my theme and utilize ThemeProvider: const ...

What steps should I take to ensure that a cookie has been properly set before utilizing it?

I'm in the process of developing a JWT authorization code flow using Next.js and NestJS. Below is the POST request being sent from the frontend to the backend server: const response = await fetch( 'http://localhost:4000/auth/42/callback?code=& ...

When form.setValues() is called, asynchronous validation is triggered repeatedly

In my Angular 5 application, I am utilizing the reactive forms approach. Within an Angular Material dialog, I have a form that is used for both data entry and editing. The constructor in my code looks like this: constructor(public formBuilder: FormBuilde ...

Bug in Angular: CSS encapsulation issue causing sibling grid components to inherit :hover styling from one another

Can anyone help me find the bug in my code? I am struggling to identify it. I have a grid container component that contains child grid item components generated by *ngFor. Each child component has two inputs: An object named rfpDoc featured: Boolean (I&a ...

Angular Material's mat table provides a convenient way to incorporate dropdown

Using a select in mat-table, I encountered an issue where selecting an option in the dropdown affected all other rows. How can this issue be resolved? Below is the code snippet - <table mat-table [dataSource]="dataSource2" class="mat-ele ...

Is there a way to modify a suffix snippet and substitute the variable in VS Code?

While working on my Java project in VS Code, I stumbled upon some really helpful code snippets: suffix code snippets Once I type in a variable name and add .sysout, .cast, or similar, the snippet suggestion appears. Upon insertion, it translates to: res ...