1

I am building a web app and mobile app with Angular and Native Script. I wanted to use the Angular Material Library for the Web App along with the code sharing project.

After installing Angular, I ran the command npm i -g @nativescript/schematics to create a new project as mentioned in the native script guide After creating, i tried to install Angular Material with the command ng add @angular/material, following which i got the logs as:

> 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

I then added the component as described in the Get Started Guide where i added the component to the app.module.ts file and then calling the component in the html template as per the guidelines. Following which then I tried to run the project with ng serve.

But I am not able to view any component in the Code Sharing Project where as in the regular Angular Web App Project everything works just fine. Any help is appreciated and thanking you in advance. Is there any thing else that needs to be done?

Kamil Kafoor
  • 256
  • 3
  • 8

2 Answers2

1

This is cause because the mapping of the @src is not pointing to the web app.module.ts. By changing the main.ts import of AppModule directly to the source path without the use of @src it works.

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));
Darwin
  • 23
  • 5
0

I got it to work by adding angular material manually. This worked with Angular 10 and NativeScript 7.

Add these dependencies to package.json:

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

In angular.json, add a theme like

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

to the styles array, before styles.sass. Note it is in two places in the file.

Update index.html by adding these two lines last in the head section:

  <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">

and then put class="mat-typography" on the body tag.

In app.module.ts, add import

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

and then add BrowserAnimationsModule in the imports array.

Run npm install and then ng serve.

Mattias
  • 211
  • 4
  • 4