Как правильно установить материал в приложение Angular Single SPA?
Я загрузил стартовый проект Angular Single SPA и хотел бы установить и использовать Angular Material во всех различных приложениях (app1, app2, navbar). Я подумал, что, поскольку приложения независимы, было бы достаточно для нормальной установки пакета в каждое из них, как описано здесь. Однако таким образом компоненты загружаются, и я могу их использовать, а активы - нет. Например, если я попытаюсь отобразить значок с
<mat-icon aria-hidden="false" aria-label="Example home icon">home</mat-icon>
Я только это вижу:
Что мне здесь не хватает? Стоит ли добавить что-нибудь внутриextra-webpack.config.js
файл?
РЕДАКТИРОВАТЬ.
Ниже приводится app.module.ts
проекта навигационной панели:
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 { }
Это мой package.json проекта navbar:
{
"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"
}
}