如何修復 Angular 9 中模板引用的位置？

Question

我最近將 Angular 從 8 升級到 9，一旦我這樣做，我就開始收到編譯錯誤，我無法讓應用程序再次運行。 我的模板使用的模塊似乎指向錯誤的位置（端點加倍）。

這是它輸出的示例。

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'

正如您所注意到的，它有兩次公共引用，看到我並不真正了解模板模塊引用的工作原理，我對此感到困惑。 我沒有在組件中使用這些，所以我認為它是基於模板的。

它主要用於普通和表單。 我猜有一個我沒有更改的設置文件，但我沒有找到它的位置。

我的 package.json 在 ~9.0.6 使用 angular

我有一個帶有 angular 9 的新項目，並且該項目完美無缺......

Answer 1

ng update命令一定搞砸了你的一些導入。

檢查所有import { ... } from '/path/to/module'; 並確保path/to/module是正確的。

從您的錯誤消息來看， @angular/common模塊引用似乎已被@angular/common/common替換，這是不正確的，並導致編譯器找不到指定的模塊。

因此，這是一個非常膚淺的錯誤，您應該能夠快速修復。

Answer 2

檢查您的組件和模塊的所有路徑是否正確。

對於您的公共模塊，請嘗試刪除您的node_modules和package-lock.json 。

然后運行npm cache clean -f和npm i （這是npm install的別名）。

Answer 3

我錯誤地創建了一個index.ts類型的文件來保存我的所有模塊。 不完全確定這是否是不好的做法 - 盡管這可能是不必要的。 所以基本上：

modules.ts

export {CommonModule} from '@angular/common'

並有一個 SharedModule 調用它

shared.module.ts

import {CommonModule} from '../modules'

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

一旦我只使用了它的直接引用，它就起作用了。 不知道為什么會這樣做，但這會引起一些混亂。 奇怪的是，這只適用於FormsModule和CommonModule 。