Cannot Install Angular Material in the code sharing project of Nativescript

Question

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?

Darwin · Accepted Answer · 2020-08-15 16:14:41Z

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));

answered Aug 15, 2020 at 16:14

Darwin

235 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mattias · Accepted Answer · 2020-09-08 18:18:05Z

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.

Collectives™ on Stack Overflow

Cannot Install Angular Material in the code sharing project of Nativescript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related