angular-material - 升级 @angular/material 获取 SyntaxError: Unexpected token '<'

Question

目前我正在处理一个遗留的角混合 asp.net core 2.2 web 项目。不是纯 Angular 模板结构，之前的程序员修改项目结构，让 Angular 组件网页与 asp.net cshtml 页面，MVC C# 控制器协同工作。所以他可以从另一个旧项目中重用他以前的 asp.net C# 代码（从后端 jbase 数据库获取数据）。这不是推荐的方式来做角。但他就是这样做的。

我们目前需要将此项目的 Angular 版本从 7.2.1 升级到最新版本。因为我们需要在这个项目中添加新功能。但是我们遇到了一些问题。

随着项目结构的变化，不是纯粹的角度我们不能只遵循谷歌角度升级指南https://update.angular.io/?v=7.2-8.0 升级

例如从版本 7.21。如果我执行此命令，则到版本 8ng update @angular/cli@8 @angular/core@8

下面的高亮部分仍然停留在 7.2.1 版本中，不会在 package.json 中自动更新

请看图1

https://drive.google.com/file/d/1E7LDdwv724mP9WVBrfJVKLO7LAW1C4EW/view?usp=sharing

我必须手动执行以下命令来一一更新每个单独的角度库

npm install --save @angular/animations@8

npm install --save @angular/cdk@8

npm install --save @angular/common@8

npm install --save @angular/compiler@8

npm install --save @angular/core@8

npm install --save @angular/forms@8

npm install --save @angular/material@8

npm install --save @angular/platform-browser@8

npm install --save @angular/platform-browser-dynamic@8

npm install --save @angular/router@8

在我执行上述命令后，请看下图，突出显示的部分更新到版本 8

请看图2

https://drive.google.com/file/d/1tN0NVqky0rvuXR45blNmjpBwSeVHnyzJ/view?usp=sharing

我还注意到将 @angular/marterial 从版本 7.2 更新到版本 8.0

@angular/marterial 导入部分的写法需要改变。您应该从特定组件深度导入，而不是从 @angular/material 导入。例如@angular/material/button。ng update 会自动为您执行此操作。

例如。在@angular/material 7.2.1 中，在 module.ts 中我们像下面这样导入

import { MatDialogModule,MatIconModule,MatNativeDateModule,MatProgressSpinnerModule,MatTooltipModule,
MatStepperModule}               from '@angular/material';

请看图 3 https://drive.google.com/file/d/1Nb1S7QzH0B0qcnx-OaOnj9U4jQUB8lRw/view?usp=sharing

在@angular/material 版本 8 之后，我们需要编写如下

import {MatDialogModule} from '@angular/material/dialog';

import {MatIconModule} from '@angular/material/icon';

import { MatNativeDateModule } from '@angular/material/core';

import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';

import {MatTooltipModule} from '@angular/material/tooltip';

import {MatStepperModule} from '@angular/material/stepper';

请看图4

https://drive.google.com/file/d/13lEL-rkKVvC_CPK_SDYeUOJ6fysEkDkn/view?usp=sharing

我还创建了另一个 angular8 小示例项目，上面写着 angular 材质导入，在示例项目中工作正常。

但是在我们的项目中，在我们运行项目之后 dotnet run

我们得到以下错误，这表明

在 Object.eval (SharedModule.ts:6) //第 6 行

在 eval (SharedModule.ts:90) //第 90 行

这两条线有问题。请看图5

https://drive.google.com/file/d/1m8ibzHs6whBnzKAuH000lQKVHHY-q0AD/view?usp=sharing

第 6 行是 import {MatDialogModule} from '@angular/material/dialog';

请看图 6 https://drive.google.com/file/d/1i-_By1bDu4mmySiVRS13h2PhwSzUNrPD/view?usp=sharing

第 90 行是导出类 SharedModule {}

请看图7

https://drive.google.com/file/d/1htQTNXZd_bcFCk4QxKn0nSRGi1jCLL6s/view?usp=sharing

目前我不知道为什么 import @angular/material 有那个错误信息。

我已经测试了以下场景

1. 如果我从@angular/material 中删除了所有导入，则项目可以正常运行。

2. 但如果我只导入一个 Angular 按钮 import {MatButtonModule} from '@angular/material/button'; 然后项目失败了。我创建了简单的示例项目总是可以正常工作。

3. 我删除了 node_modules 文件夹，重新安装 npm install，项目仍然有同样的错误。

4. 当我安装@angular/material npm install --save @angular/material@8 时，终端中没有出现任何错误。

就在项目中，从 v7.21 升级到 v8 后出现上述错误。

标签： angular-material

Answer 1

你在NgModulein做出口吗app.module.ts