Encountering a compilation error while compiling using Angular Ivy

Encountering a compile time error in my Angular 8 project when enabling angular Ivy. Upgrading to version 8.1.0 did not solve the issue, and I continue to receive the following error:

D:\Users\Backup>ng build shared
Building Angular Package
Building entry point 'shared'
Compiling TypeScript sources through ngc

BUILD ERROR
node_modules/@angular/common/common.d.ts(115,22): error TS-996002: Appears in the NgModule.imports of SharedModule, but could not be resolved to an NgModule class
node_modules/@angular/forms/forms.d.ts(2669,22): error TS-996002: Appears in the NgModule.imports of SharedModule, but could not be resolved to an NgModule class
node_modules/@angular/forms/forms.d.ts(3703,22): error TS-996002: Appears in the NgModule.imports of SharedModule, but could not be resolved to an NgModule class
node_modules/@angular/common/http/http.d.ts(2799,22): error TS-996002: Appears in the NgModule.imports of SharedModule, but could not be resolved to an NgModule class

I have enabled Angular Ivy in tsconfig.app.json.

"angularCompilerOptions": {
    "enableIvy": true
}

The dependencies in my package.json are as follows:

"dependencies": {
    "@angular/animations": "~8.0.3",
    "@angular/common": "~8.0.3",
    "@angular/compiler": "~8.0.3",
    ...
},
"devDependencies": {
    "@angular-devkit/build-angular": "~0.800.6",
    "@angular-devkit/build-ng-packagr": "~0.800.6",
    ...
}

Seeking assistance on resolving the above compilation issues.

angulartypescriptangular-ivy

Answer №1

  • upgrade angular to version 8.2.0-next.1
  • add "rootDir": "." inside the compilerOptions section of the main tsconfig.json

Answer №2

If you have specified a path declaration in your tsconfig.json file as shown below:

"paths": { "@sharedmodule": [ "your-shared-module/index"] }

When using @sharemodule in an import statement within any component, make sure to remove the @shared and replace it with the full path of the shared module.

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 Battle of Extends and Intersection in Typescript

Typescript's concept of extension is akin to C++'s inheritance. Intersection in Typescript involves creating a new object with all the properties from the intersected classes. Why utilize intersection when extends keyword can already merge ...

javascripttypescript

"Implementing an Angular route component that adjusts based on specific

I am currently working on routing within my application for the 'feed' module. Within this feed, there are two types of posts that I need to display with a direct link to show full information. How can I ensure that the right component is opened ...

angularroutes

Leveraging property values in Angular 2 to dynamically generate HTML elements as tag names

Is it feasible to use a property as an HTML tag name? For instance, something along the lines of: <{{property.name}}>Hello world</{{property.name}}> ...

htmlangular

Get the latest B2B department for the client within Spartacus

How can I display the current B2B Unit name in the header for the customer? I have been exploring ways to retrieve the B2B Unit for the current customer and found that there is a payload available for the /current? endpoint that loads on the initial page ...

angularsap-commerce-cloudspartacus-storefront

Is it possible to access NgbdModalContent properties from a different component?

If I have a component with a template containing an Edit button. When the user clicks on it, I want to load another component as a dynamic modal template. The component is named ProfilePictureModalComponent and it includes the Edit button: (Angular code h ...

angulartypescriptcomponents

Tips on including query parameters in an HTTP GET request

When working with Angular, I encountered a need to append query parameters to the URL. The specific query parameter in question is: filter={"page_name":{"_eq":"login"},"environment":{"_eq":"staging&quo ...

angulargethttp-parameters

Encountering issue where the Angular application within the UWP project fails to load the second

I am facing a challenge with integrating my Angular project into a Universal Windows Platform (UWP) application. The Angular code functions flawlessly in the browser, but once incorporated into the UWP bundle, I encounter navigation issues. Technical Stac ...

c#angularuwp

Unable to generate a store using reducer in TypeScript and Redux

I am having trouble creating a store using Redux and TypeScript. Here is my actions.js file: import { Action } from 'redux'; export interface ITodoAction extends Action { todo:string; } export const ADD_TODO:string = 'ADD_TODO'; ...

typescriptredux

Executing a function to erase the stored value in local storage during an Angular unit test

Looking to verify whether the localStorage gets cleared when I execute my function. Component ngOnInit() { // Logging out when reaching login screen for login purposes this.authService.logout(); } authService logout() { // Removing logged i ...

javascriptangulartypescriptunit-testingangular-unit-test

Tips for preventing unnecessary dependencies from being installed in an Angular 10 application

I've been working on a project using Angular 10. Surprisingly, my package.json doesn't mention anything about @babel. However, every time I run npm install, an error occurs: npm ERR! 404 Not Found - GET http://private_repo/repository/npm-all/@bab ...

angularbabeljsnpm-installdependency-management

`"Type is invalid" error occurring with component after importing it into a different project``

I am currently working on developing a custom Storybook 7 Typescript component library with React. I have successfully imported this library into another project using a private NPM package. However, one of the components in the library, specifically the ...

javascripttypescriptimportcomponentsexport

Issue encountered with executing `ng build` in Angular Bitbucket Pipeline

I have set up a pipeline in Bitbucket to deploy my Angular app to an FTP server. The pipeline.yml file for this setup looks like this: image: node:6.9.4 # we need node image to run our angular application in clone: # help to clone our source here de ...

angularbitbucket-pipelines

Troubleshooting Angular 2: Issues with http.delete() Function

deleteTask function in this code is currently experiencing issues. All other methods are functioning properly and the URL is also working correctly. Your assistance would be greatly appreciated. constructor(private http:Http) { console.log('task ...

node.jsangularmongodbexpress

Navigating between pages has become challenging due to issues with the navbar, sidebar,

I successfully developed 4 Angular components: 1st component: menu 2nd component: header 3rd component: home 4th component: login The menu component features a sidebar/navbar created using Material UI. The login component consists of the login page. Howe ...

angulartypescriptangular-materialangular-ui-router

Is it still relevant to use the href attribute in Angular development?

Is there any specific benefit to either including or excluding the href attribute on internal links within an Angular 7 single-page application? Regardless, the functionality remains intact as Angular primarily relies on the routerLink attribute. ...

angularangular7

Rendering basic JSON data from the console to an HTML page using Angular

I have been utilizing openhab for sensor monitoring. To extract/inject the items(things), sensor properties, and room configuration through a web interface, I am making use of openhab's REST queries which can be found here - REST Docs. Wanting to cre ...

javascriptangular

The type argument '(id: any, title: any, body: any, image: any) => Element' does not match the parameter type

Hello there, I am a beginner in React-Native and I'm facing an issue while trying to map data into View. Despite going through the documentation and other resources, I haven't been able to figure out what mistake I might be making. Can anyone hel ...

reactjstypescriptreact-nativeviewreact-hooks

Setting key-value pairs in TypeScript objects explained

I encountered an issue with setting key/value pairs on a plain object. type getAObjectFn = <K extends string, V>(k: K, v: V) => Record<K, V> const getAObject: getAObjectFn = (k, v) => { return { [k]: v } } console.log(getAObject ...

typescript

What causes the website to malfunction when I refresh the page?

I utilized a Fuse template to construct my angular project. However, upon reloading the page, I encountered broken website elements. The error message displayed is as follows: Server Error 404 - File or directory not found. The resource you are looking fo ...

javascripthtmlangulartypescriptfuse

The object literal can only define properties that are already known, and 'data' is not found in the type 'PromiseLike<T>'

When making a request to a server with my method, the data returned can vary in shape based on the URL. Previously, I would cast the expected interface into the returned object like this: const data = Promise.resolve(makeSignedRequest(requestParamete ...

node.jstypescript