Unable to locate namespace 'MyApp' following the update of Angular and Typescript versions

In my app, I have created a type definition file that exposes all dto objects to the global scope.

DtoGenerator.d.ts

declare module MyApp.Rest.Dto {
   interface IAJsonDto {
   }
 }
 declare module MyApp.Rest.Dto.Post {
   interface ITest1PostDto extends MyApp.Rest.Dto.IAJsonDto {
    code: string;
 }
interface ITest2PostDto extends MyApp.Rest.Dto.IAJsonDto {
    id: number;
 }
interface ITest3PostDto extends MyApp.Rest.Dto.IAJsonDto {
    id: number;
}
  ....
}

This setup is used in the following way:

file1.service.ts

import { ITest3PostDto } from MyApp.Rest.Dto.Post;

Recently, I migrated my app from Angular 8 and Typescript 3.5.3 to Angular 9 and Typescript 3.6.4. Before the migration, everything was working fine without any errors related to the consumption of Dto objects. However, after the migration, while building the app in watch mode using 

ng build --extractCss=true --watch
, I started getting an error message 'Cannot find namespace 'MyApp'. Adding 

/// <reference path="../../../../DtosGenerator.d.ts" />

at the top of the file resolved the issue. Is there a way to avoid adding this reference path and keep the code as it was before the migration?

Can anyone help me understand what might be causing this issue?

angulartypescriptangular-cli

Answer №1

If you are encountering or will encounter the same issue, I have found a solution. After extensive research, I discovered that the Angular automatic update (https://update.angular.io/) altered the configuration of the tsconfig.app.json file.

Here is the original content of tsconfig.app.json before migration:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
  "outDir": "../out-tsc/app",
  "types": [ "node" ],
  "typeRoots": [
     "node_modules/@types"
  ]
},
"exclude": [
  "test.ts",
  "**/*.spec.ts"
]
}

And here is the updated version of tsconfig.app.json after migration:

{
 "extends": "../tsconfig.json",
 "compilerOptions": {
   "outDir": "../out-tsc/app",
   "types": [ "node" ],
   "typeRoots": [
     "node_modules/@types"         
   ]
},
"files": [
   "main.ts",
   "polyfills.ts"
 ],
"include": [
  "src/**/*.d.ts"
]
}

The issue arose because previously all files were included in the compilation process, while post-migration only the specified 2 files in the "files" array and all type definition files within the src directory were included. Since 'DtosGenerator.d.ts' was in the root of the src folder, some modifications were necessary to generate the correct final tsconfig.app.json file.

Here is the modified version of tsconfig.app.json:

{
   "extends": "../tsconfig.json",
   "compilerOptions": {
   "outDir": "../out-tsc/app",    
   "typeRoots": [
      "node_modules/@types"      
   ]
},
  "files": [
    "main.ts",
    "polyfills.ts"
  ],
  "include": [
     "*.d.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

Guide on creating Jasmine Test case for a subscription block within the ngOninit method and providing fictitious data

Exploring Jasmine test cases for the first time in my Angular 7 project. I have an observable that emits data using next() in the service file. Components subscribe to the observable and use the data. Below is the snippet of code from ngOnInit: ngOnInit() ...

angularjasmine

When using Angular 2, an error may occur where you receive a message stating that you cannot read the property 'length' of undefined while attempting to call

When creating a component (let's call it A) with the @input decorator to retrieve values from the selector, keep in mind that this component will generate text fields based on the input values specified in the selector. Component A is then utilized in ...

angulartypescript

Encountered error when attempting to clone Angular project using npm: ELIFECY

Hi there, I'm facing an issue with cloning my Angular project. Whenever I try to run the frontend using IntelliJ or VSCode, I'm encountering this error message: C:\Users\developer.me\Downloads\TestClone\node_modules&bsol ...

node.jsangularnpmcompiler-errors

Creating a general function to accommodate two alike types

Is there a way to modify the addSuffix function to handle two different types and return them simultaneously? Here's an example: type First = { name: string, address: string, } type Second = { name: string ...

javascripttypescript

What are some ways to streamline inline styling without having to create numerous variables?

Currently, I am in the process of constructing a tab component and establishing inline variables for CSS styling. This particular project involves a streamlit app that allows me to modify settings on the Python side. At the moment, there are four elements ...

cssreactjstypescriptstreamlit

Enhancing SQLite syntax in Ionic 2: A fresh approach!

Having trouble with updating my SQLite table using this script, I've edited the query but it still doesn't work. try{ this.sqlite.create({ name: 'data.db', location: 'default' }) .then((db: SQLiteObject) => ...

angularsqliteionic2

The `staticAlert` property in the constructor.ts file does not have an initializer and is not explicitly assigned

import { Component, OnInit, ViewChild } from '@angular/core'; import {Subject} from 'rxjs'; import {debounceTime} from 'rxjs/operators'; import {NgbAlert} from '@ng-bootstrap/ng-bootstrap'; @Component({ selecto ...

angularangular-bootstrapstrictviewchild

"Integrating Laravel 5.4 Backend with Angular 5 Frontend: A Step-by-Step

Currently, I am immersed in a project that involves creating a frontend using Angular 5 and backend business logic using Laravel 5.4 with MySQL Database. As someone new to this technology stack, I find myself grappling with establishing the data flow conne ...

javascriptangularlaravelangular5

Learn how to incorporate SAX parser into an Angular 2 project by utilizing TypeScript

Encountering challenges while trying to integrate the sax parser [parser.ts] into my project. import sax = require("sax"); export class MyParser { //my parser code } When attempting to utilize it [app.component.ts]: import {MyParser} from './pa ...

jsontypescriptangularsax

Use angular, javascript, or FormIo to set the cookie value to a dropdown list within a form as it loads

Currently, I am utilizing the Formio form within my Angular application. The registration form in my app consists of various fields, including State and city dropdowns that load values from State and city Formio resources. Whenever a user clicks on the Reg ...

javascriptangularformio

Need a page refresh on Angular 4 to display data accurately

I am facing a similar issue where I am trying to show the user's gender in my navbar component. After calling my service to retrieve the user object, I attempt to set the 'gender' variable for use in HTML. However, the gender is only display ...

htmlangularfrontend

Incorporating a complex React (Typescript) component into an HTML page: A Step-by

I used to have an old website that was originally built with Vanilia Javascript. Now, I am in the process of converting it to React and encountering some issues. I am trying to render a compound React(Typescript) component on an HTML page, but unfortunatel ...

javascripthtmlreactjstypescript

Directive for displaying multiple rows in an Angular table using material design

I am attempting to create a dynamic datatable with expandable rows using mat-table from the material angular 2 framework. Each row has the capability of containing subrows. The data for my rows is structured as an object that may also include other sub-ob ...

javascriptangulartypescriptangular-materialangular5

material-icons appear differently when letter-spacing is applied in iOS browsers

To display levels using star icons from angular material, I wanted the stars to be shown next to each other. I attempted to achieve this by applying letter-spacing: -0.25rem;, but unfortunately it did not render correctly on iOS platforms (resulting in s ...

cssiosangularicons

Using observables rather than promises with async/await

I have a function that returns a promise and utilizes the async/await feature within a loop. async getFilteredGuaranteesByPermissions(): Promise<GuaranteesMetaData[]> { const result = []; for (const guarantees of this.guaranteesMetaData) { ...

javascriptangularrxjs

Navigate to a new page by utilizing the nav.push function while incorporating a side menu in your

Trying to develop a small application using ionic2 to enhance my understanding of it, however, facing some challenges with navigation. I've grasped the distinction between a rootpage (adjusted with nav.setRoot) and a regular page (added through nav.p ...

angulartypescriptionic-frameworkionic2ionic3

Leveraging mobile interactivity in Angular2

Seeking assistance with implementing swipe events on mobile devices for Angular 2. I came across a mention of using Hammer.js for mobile event handling in this Github issue. Encountering an error when trying to bind the swipe event: EXCEPTION: Hammer.j ...

angulartypescriptdom-eventshammer.js

What is the best way to change the row background color in an ng-prime datatable with dynamically changing columns?

Is there a way to dynamically change row colors in a table when a row is updated successfully? <p-dataTable emptyMessage="{{tbldatamsg}}" [value]="dataset" scrollable="true" [style]="{'overflow':'hidden!important'}" ...

htmlcssangularprimeng-datatable

What is the process for returning to the function level?

I'm working on a function called loadMessages that I want to return an Observable. loadMessages(chatId: string): Observable<Message[]> { console.log('1'); this.autorun(() => { const handle = this.subscribe('me ...

meteortypescriptangularrxjs5angular2-meteor

How can I customize the font style for headers in Angular Material 2?

I am working on an Angular Material 2 application using angular 7. After consulting the typography documentation, I have set up the base typography as follows: $sc-typography-config: mat-typography-config( $font-family: '"Helvetica Neue", Helveti ...

angularangular-materialmaterial-designangular-material2