1

我正在使用 Angular 和 Native Script 构建一个 Web 应用程序和移动应用程序。我想将 Angular Material Library 用于 Web 应用程序以及代码共享项目

安装 Angular 后,我运行命令npm i -g @nativescript/schematics创建一个新项目,如本机脚本指南中所述创建后,我尝试使用命令安装 Angular Material ng add @angular/material,随后我得到的日志如下:

> 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 App 项目中,一切正常。任何帮助表示赞赏并提前感谢您。还有什么需要做的吗?

4

2 回答 2

0

这是因为@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));
于 2020-08-15T16:14:41.033 回答
0

我通过手动添加角度材料让它工作。这适用于 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.sass 之前。请注意,它位于文件中的两个位置。

通过在 head 部分的最后添加这两行来更新 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。

于 2020-09-08T18:18:05.890 回答