Так что я сегодня играю с модулями ..
Моя идея состояла в том, чтобы иметь LayoutModule, который бы выставлял 2-3 разных макета
Это работает, но я не могу понять одно дело ... Пока у меня есть import { LayoutsModule } from 'src/app/layouts/layouts.module'; в модуле (ЛЮБОЙ модуль), он работает ... Мне не нужно на самом деле использовать его в NgModule?
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RegisterRoutingModule } from './register-routing.module';
import { RegisterComponent } from './register.component';
import { LayoutsModule } from 'src/app/layouts/layouts.module';
@NgModule({
declarations: [RegisterComponent],
imports: [
CommonModule,
RegisterRoutingModule,
]
})
export class RegisterModule { }
, и он работает для всех lazyloaded модулей, даже если он импортирован только здесь .. ?
Также, если я переместу его в LoginModule, который отлично работает в ... ?
const routes: Routes = [
{ path: '', redirectTo: './', pathMatch: 'full' },
{ path: './', loadChildren: () => import('./modules/start-page/start-page.module').then(m => m.StartPageModule) },
{ path: 'login', loadChildren: () => import('./modules/login/login.module').then(m => m.LoginModule) },
{ path: 'register', loadChildren: () => import('./modules/register/register.module').then(m => m.RegisterModule) }
];
Если я удаляю этот единственный импортировать ошибки с разбивкой и выбрасыванием:
ERROR in src/app/layouts/main-layout/main-layout.component.html:2:3 - error NG8001: 'mat-toolbar' is not a known element:
1. If 'mat-toolbar' is an Angular component, then verify that it is part of this module.
2. If 'mat-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
2 <mat-toolbar color="primary" class="toolbar">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/layouts/main-layout/main-layout.component.ts:6:16
6 templateUrl: './main-layout.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component MainLayoutComponent.
src/app/layouts/main-layout/main-layout.component.html:4:7 - error NG8001: 'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
4 <mat-icon>menu</mat-icon>
~~~~~~~~~~
src/app/layouts/main-layout/main-layout.component.ts:6:16
6 templateUrl: './main-layout.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component MainLayoutComponent.
src/app/layouts/main-layout/main-layout.component.html:9:3 - error NG8001: 'mat-sidenav-container' is not a known element:
1. If 'mat-sidenav-container' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
9 <mat-sidenav-container class="sidenav-container" ngClass.xs="is-mobile">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/layouts/main-layout/main-layout.component.ts:6:16
6 templateUrl: './main-layout.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component MainLayoutComponent.
src/app/layouts/main-layout/main-layout.component.html:10:5 - error NG8001: 'mat-sidenav' is not a known element:
1. If 'mat-sidenav' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
10 <mat-sidenav #snav [mode]="mediaObserver.isActive('xs') ? 'over' : 'side'" [opened]="mediaObserver.isActive('gt-xs')" [fixedInViewport]="mediaObserver.isActive('xs')" fixedTopGap="56">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/layouts/main-layout/main-layout.component.ts:6:16
6 templateUrl: './main-layout.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component MainLayoutComponent.
src/app/layouts/main-layout/main-layout.component.html:10:24 - error NG8002: Can't bind to 'mode' since it isn't a known property of 'mat-sidenav'.
1. If 'mat-sidenav' is an Angular component and it has 'mode' input, then verify that it is part of this module.
2. If 'mat-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
10 <mat-sidenav #snav [mode]="mediaObserver.isActive('xs') ? 'over' : 'side'" [opened]="mediaObserver.isActive('gt-xs')" [fixedInViewport]="mediaObserver.isActive('xs')" fixedTopGap="56">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/layouts/main-layout/main-layout.component.ts:6:16
6 templateUrl: './main-layout.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component MainLayoutComponent.
src/app/layouts/main-layout/main-layout.component.html:10:80 - error NG8002: Can't bind to 'opened' since it isn't a known property of 'mat-sidenav'.
1. If 'mat-sidenav' is an Angular component and it has 'opened' input, then verify that it is part of this module.
2. If 'mat-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
10 <mat-sidenav #snav [mode]="mediaObserver.isActive('xs') ? 'over' : 'side'" [opened]="mediaObserver.isActive('gt-xs')" [fixedInViewport]="mediaObserver.isActive('xs')" fixedTopGap="56">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/layouts/main-layout/main-layout.component.ts:6:16
6 templateUrl: './main-layout.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component MainLayoutComponent.
src/app/layouts/main-layout/main-layout.component.html:10:123 - error NG8002: Can't bind to 'fixedInViewport' since it isn't a known property of 'mat-sidenav'.
1. If 'mat-sidenav' is an Angular component and it has 'fixedInViewport' input, then verify that it is part of this module.
2. If 'mat-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
10 <mat-sidenav #snav [mode]="mediaObserver.isActive('xs') ? 'over' : 'side'" [opened]="mediaObserver.isActive('gt-xs')" [fixedInViewport]="mediaObserver.isActive('xs')" fixedTopGap="56">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/layouts/main-layout/main-layout.component.ts:6:16
6 templateUrl: './main-layout.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component MainLayoutComponent.
src/app/layouts/main-layout/main-layout.component.html:11:7 - error NG8001: 'mat-nav-list' is not a known element:
1. If 'mat-nav-list' is an Angular component, then verify that it is part of this module.
2. If 'mat-nav-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
11 <mat-nav-list fxLayout="column">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/layouts/main-layout/main-layout.component.ts:6:16
6 templateUrl: './main-layout.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component MainLayoutComponent.
src/app/layouts/main-layout/main-layout.component.html:12:26 - error NG8002: Can't bind to 'routerLink' since it isn't a known property of 'a'.
12 <a mat-list-item [routerLink]="['/login']">Login</a>
~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/layouts/main-layout/main-layout.component.ts:6:16
6 templateUrl: './main-layout.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component MainLayoutComponent.
src/app/layouts/main-layout/main-layout.component.html:13:26 - error NG8002: Can't bind to 'routerLink' since it isn't a known property of 'a'.
13 <a mat-list-item [routerLink]="['/mitt-konto']">Profile</a>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/layouts/main-layout/main-layout.component.ts:6:16
6 templateUrl: './main-layout.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component MainLayoutComponent.
src/app/layouts/main-layout/main-layout.component.html:14:26 - error NG8002: Can't bind to 'routerLink' since it isn't a known property of 'a'.
14 <a mat-list-item [routerLink]="['/skapa-konto']">Register</a>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/layouts/main-layout/main-layout.component.ts:6:16
6 templateUrl: './main-layout.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component MainLayoutComponent.
src/app/layouts/main-layout/main-layout.component.html:20:5 - error NG8001: 'mat-sidenav-content' is not a known element:
1. If 'mat-sidenav-content' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
20 <mat-sidenav-content>
~~~~~~~~~~~~~~~~~~~~~
src/app/layouts/main-layout/main-layout.component.ts:6:16
6 templateUrl: './main-layout.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component MainLayoutComponent.
src/app/layouts/main-layout/main-layout.component.html:21:7 - error NG8001: 'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
21 <router-outlet></router-outlet>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/layouts/main-layout/main-layout.component.ts:6:16
6 templateUrl: './main-layout.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component MainLayoutComponent.
Итак ... что мне здесь не хватает? ?