upgrade #angular/material get SyntaxError: Unexpected token '<' - angular-material

Question

Currently I am working with a legacy angular mixed asp.net core 2.2 web project. It is not a pure angular template structure, the previous programmer modify the project structure so let angular component web page work together with asp.net cshtml page,MVC C# controller. So he can reused his previously asp.net C# code(get data from backend jbase database) from another old project. which is not recommend way to do angular. But that is the way he did that.
We currently need to upgrade this project's angular version from 7.2.1 to latest version. as we need to add new feature in this project.
But we got some issue.
As the project structure changed ,not pure angular
we can not just follow google angular upgrade guide https://update.angular.io/?v=7.2-8.0 to upgrade
For example from version 7.21. to version 8
if I do this command ng update #angular/cli#8 #angular/core#8
Below highlight part still stuck in version 7.2.1 , will not updated automatically in package.json
please see picture 1
https://drive.google.com/file/d/1E7LDdwv724mP9WVBrfJVKLO7LAW1C4EW/view?usp=sharing
I have to manually to do below commands to update each individual angular library one by one
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
After I did above commands, please see below image, the highlighted part updated to version 8
Please see picture 2
https://drive.google.com/file/d/1tN0NVqky0rvuXR45blNmjpBwSeVHnyzJ/view?usp=sharing
I also noticed when update #angular/marterial fromversion 7.2 to version 8.0
Writing way of #angular/marterial import part need to change.
Instead of importing from #angular/material, you should import deeply from the specific component. E.g. #angular/material/button. ng update will do this automatically for you.
for example.
when in #angular/material 7.2.1, in the module.ts we import like below
import { MatDialogModule,MatIconModule,MatNativeDateModule,MatProgressSpinnerModule,MatTooltipModule,
MatStepperModule} from '#angular/material';
please see picture 3
https://drive.google.com/file/d/1Nb1S7QzH0B0qcnx-OaOnj9U4jQUB8lRw/view?usp=sharing
after #angular/material version 8, we need to write as below
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';
please see picture 4
https://drive.google.com/file/d/13lEL-rkKVvC_CPK_SDYeUOJ6fysEkDkn/view?usp=sharing
I also created another angular8 small sample project with above angular material import writing, work fine in the sample project.
but in our project, after we run the project dotnet run
we got below error, which indicate
at Object.eval (SharedModule.ts:6) //line 6
at eval (SharedModule.ts:90) //line 90
these two lines has issue.
Please see picture 5
https://drive.google.com/file/d/1m8ibzHs6whBnzKAuH000lQKVHHY-q0AD/view?usp=sharing
line 6 is import {MatDialogModule} from '#angular/material/dialog';
please see picture 6
https://drive.google.com/file/d/1i-_By1bDu4mmySiVRS13h2PhwSzUNrPD/view?usp=sharing
line 90 is export class SharedModule {}
please see picture 7
https://drive.google.com/file/d/1htQTNXZd_bcFCk4QxKn0nSRGi1jCLL6s/view?usp=sharing
currently I have not any clue why import #angular/material has that error message.
I have tested below scenario
If I completed deleted every import from #angular/material ,then project can run fine.
but if I just import a single Angular button
import {MatButtonModule} from '#angular/material/button';
then the project failed.
I created simple sample project always work fine.
I deleted node_modules folder, to reinstall npm install, project still has same error.
when I install #angular/ material npm install --save #angular/material#8, no any error show up in terminal .
just in the project,after upgrade from v7.21 to v8 then got above error.

Answer 1

Did you do export at NgModule in app.module.ts