0

I downloaded the starting project of Angular Single SPA and I would like to install and use Angular Material in all the different applications (app1, app2, navbar). I thought that, since the applications are independent, would have been sufficient to normally install the package in each of them as explained here. However, in this way the components are loaded up and I can use them but the assets seem not. For example, if I try to display an icon with

<mat-icon aria-hidden="false" aria-label="Example home icon">home</mat-icon>

I only see this:

enter image description here

What am I missing here? Should I add something inside the extra-webpack.config.js file?

EDIT.

The following is the app.module.ts of the navbar project:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EmptyRouteComponent } from './empty-route/empty-route.component';
import { PrimaryNavComponent } from './primary-nav/primary-nav.component';

import {MatBadgeModule} from '@angular/material/badge';
import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';

@NgModule({
  declarations: [
    AppComponent,
    EmptyRouteComponent,
    PrimaryNavComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatBadgeModule,
    MatButtonModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

This is my package.json of the navbar project:

{
  "name": "navbar",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "npm run serve:single-spa",
    "build": "npm run build:single-spa",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:single-spa": "ng build --prod --deploy-url /dist/navbar --output-hashing none",
    "serve:single-spa": "ng serve --disable-host-check --port 4300 --host 0.0.0.0 --deploy-url http://localhost:4300/ --live-reload false"
  },
  "private": true,
  "dependencies": {
    "@angular-builders/custom-webpack": "^8",
    "@angular/animations": "~9.1.7",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~9.1.7",
    "@angular/compiler": "~9.1.7",
    "@angular/core": "~9.1.7",
    "@angular/forms": "~9.1.7",
    "@angular/material": "^9.2.4",
    "@angular/platform-browser": "~9.1.7",
    "@angular/platform-browser-dynamic": "~9.1.7",
    "@angular/router": "~9.1.7",
    "rxjs": "~6.5.5",
    "single-spa": "^5.5.0",
    "single-spa-angular": "^4.0.0",
    "tslib": "^1.10.0",
    "zone.js": "0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.6",
    "@angular/cli": "~9.1.6",
    "@angular/compiler-cli": "~9.1.7",
    "@angular/language-service": "~9.1.7",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.8.3"
  }
}
Rexam
  • 823
  • 4
  • 23
  • 42
  • Can you share your code. Maybe on stackblitz? – Muhammad Kamran Aug 21 '20 at 10:59
  • It's exactly the code of the starting project but I installed via `ng add` the Angular Material in all applications and replaced the html in `primary-nav.component.html` with the Material Icon you see above. That's it. – Rexam Aug 21 '20 at 11:05
  • You also need to import MatIconModule to your App Module and add it to the imports array of the app.module.ts file – Jordan Stubblefield Aug 21 '20 at 11:24
  • @JordanStubblefield yes, I have done it already and still doesn't work. – Rexam Aug 21 '20 at 11:33
  • Can you add your `app.module.ts` (or other module where you want to use the icon)? Also do you get any errors in console and/or terminal? Possible even add the `package.json` file? – Ruben Szekér Aug 21 '20 at 11:41
  • @RubenSzekér I have edited my question. No errors in the console nor in the terminal. – Rexam Aug 21 '20 at 11:49
  • 1
    @Rexam does [this stackoverflow's post answers](https://stackoverflow.com/questions/49796212/angular-material-icons-not-working) Basically adding the stylesheet `` – Ruben Szekér Aug 21 '20 at 11:58
  • @Rexam your `package.json`, HTML and `app.module.ts` are fine so that's not the issue, but then you would've gotten an issue aswell – Ruben Szekér Aug 21 '20 at 11:59
  • @RubenSzekér that worked!! Many thanks! I'll mark the question as duplicate. – Rexam Aug 21 '20 at 12:09

0 Answers0