如何修复 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 。