Nativescript的代码共享项目中无法安装Angular材料

Question

我正在使用 Angular 和本机脚本构建 web 应用程序和移动应用程序。 我想将 Web 应用程序的 Angular 材料库与代码共享项目一起使用。

安装 Angular 后，我运行命令npm i -g @nativescript/schematics以创建一个新项目，如本机脚本指南中所述创建后，我尝试安装 ZC31C335EF37283C451B18BA0DD31 ng add @angular/material ，然后使用 whichangular 命令得到的日志为：

> ng add @angular/material
Skipping installation: Package already installed
? Choose a prebuilt theme name, or "custom" for a custom theme: Deep Purple/Amber  [ Preview: https://material.angular.io?theme=deeppurple-amber ]
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes
UPDATE package.json (1877 bytes)
√ Packages installed successfully.
Could not read Angular module file: /src/@src/app/app.module.ts

然后，我按照入门指南中的说明添加了组件，其中我将组件添加到app.module.ts文件中，然后按照指南在 html 模板中调用该组件。 之后，我尝试使用ng serve运行该项目。

但我无法查看代码共享项目中的任何组件，而在常规 Angular Web 应用程序项目中，一切正常。 任何帮助表示赞赏并提前感谢您。 还有什么需要做的吗？

Answer 1

这是因为@src的映射没有指向 web app.module.ts。 通过将 AppModule 的main.ts导入直接更改为源路径而不使用@src它可以工作。

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from '@src/environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

Answer 2

我通过手动添加 angular 材料让它工作。 这适用于 Angular 10 和 NativeScript 7。

将这些依赖项添加到 package.json：

"@angular/cdk": "^10.2.0",
"@angular/material": "^10.2.0",

在 angular.json 中，添加一个主题

"./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",

到 styles 阵列，在 styles.sass 之前。 请注意，它位于文件中的两个位置。

更新 index.html 通过在头部最后添加这两行：

  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

然后将class="mat-typography"放在 body 标签上。

在 app.module.ts 中，添加导入

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

然后在导入数组中添加 BrowserAnimationsModule。

运行 npm install 然后 ng serve。