>nx g lib --help
nx generate @nrwl/angular:library [name] [options,...]
Options:
--name Library name
--directory A directory where the lib is placed
--publishable Generate a buildable library.
--prefix The prefix to apply to generated selectors.
--skipFormat Skip formatting files
--simpleModuleName Keep the module name simple (when using --directory)
--skipPackageJson Do not add dependencies to package.json.
--skipTsConfig Do not update tsconfig.json for development experience.
--style The file extension to be used for style files. (default: css)
--routing Add router configuration. See lazy for more information.
--lazy Add RouterModule.forChild when set to true, and a simple array of routes when set to false.
--parentModule Update the router configuration of the parent module using loadChildren or children, depending on what `lazy` is set to.
--tags Add tags to the library (used for linting)
--unitTestRunner Test runner to use for unit tests (default: jest)
--dryRun Runs through and reports activity without writing to disk.
--help Show available options for project target.
Add a new lib called auth. We will not lazy load this lib as auth will always be used by our app. Choose SASS as your styelsheet language.
Note: You may decide not to make this a presentational component but it makes it easier to test and refactor.
As this is a child route it is assumed that the consuming module will already prefix the route with "localhost:4200/auth" and when we say the path is "login" we mean relative to this so it will end up being "localhost:4200/auth/login".
3. Add a default route to the auth module
libs/auth/src/auth.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Route } from '@angular/router';
import { LoginComponent } from './containers/login/login.component';
import { LoginFormComponent } from './components/login-form/login-form.component';
export const authRoutes: Route[] = [
{ path: 'login', component: LoginComponent }
];
@NgModule({
imports: [CommonModule, RouterModule],
declarations: [LoginComponent, LoginFormComponent]
})
export class AuthModule {}
4. Update the consuming Customer Portal App module
Delete everything but the router-outlet on the apps app.component.html file.
apps/customer-portal/src/app/app.component.html
<router-outlet></router-outlet>
Add the Auth module to the main App Module
apps/customer-portal/src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NxModule } from '@nrwl/nx';
import { RouterModule } from '@angular/router';
import { authRoutes, AuthModule } from '@demo-app/auth'; //added
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
NxModule.forRoot(),
RouterModule.forRoot([{path: 'auth', children: authRoutes}], { initialNavigation: 'enabled' }),
AuthModule // added
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
import { Component, EventEmitter, Output } from '@angular/core';
import { Authenticate } from '@demo-app/data-models';
@Component({
selector: 'app-login-form',
templateUrl: './login-form.component.html',
styleUrls: ['./login-form.component.scss']
})
export class LoginFormComponent {
@Output() submit = new EventEmitter<Authenticate>();
login(authenticate: Authenticate) {
this.submit.emit(authenticate);
}
}
7. Change the ChangeDetectionStrategy to OnPush
Now that we are using the presentation and container component pattern and we know that we only need to check the child components for changes if a DOM event or a @Input or @Output passes new primitives or reference values. In this way we can tell Angular not check the whole component tree which can cause performance issues in larger applications.
