How can I fix where template references are in Angular 9?

Question

I recently upgraded Angular from 8 to 9 and as soon as I did that I started getting compile errors and I cannot get the app working again. It seems as though the modules that my templates use are pointing to the wrong place (doubled up end points).

Here is an example of what it is outputting.

ERROR in ./src/app/components/prod/settings-dashboard/font-page/font-page.component.ts
Module not found: Error: Can't resolve 
'../../../../../../node_modules/@angular/common/common' in 
'/Users/person/Projects/appilicious/src/app/components/prod/settings-dashboard/font-page'

As you can notice it has common reference twice, which seeing how I don't really know of the template module reference works, I am confused about it. I am not using these in the component so I assume it is template based.

It is mainly for common as well as for forms. I am guessing there is a setup file that I am not changing but I haven't had luck finding where this would live.

My package.json is using angular at ~9.0.6

I have a fresh project with angular 9 and that one works flawlessly...

Answer 1

The ng update command must have messed up some of your imports.

Check all import { ... } from '/path/to/module'; and make sure the path/to/module is correct.

From your error message, it seems that the @angular/common module reference has somehow been replaced with @angular/common/common which is incorrect and leads the compiler to not find the specified module.

So, this is a very superficial error that you should be able to fix quickly.

Answer 2

Check all your paths are correct to your components and modules.

For your common module, try to remove your node_modules and package-lock.json .

Then run npm cache clean -f and npm i (which is an alias for npm install ).

Answer 3

I made the mistake of creating an index.ts type file to hold all my modules. Not entirely certain whether this is bad practice - though this may be unnecessary. So basically:

modules.ts

export {CommonModule} from '@angular/common'

And had a SharedModule calling it

shared.module.ts

import {CommonModule} from '../modules'

@NgModule({
    imports: [CommonModule],
    exports: [CommonModule]
})
export class SharedModule {}

Once I used only the direct reference it worked. Not sure why it would do that but it causes a bit of confusion. Weird thing is this only did it for FormsModule and CommonModule .