I have created an authentication library @mylib/auth to use across various
applications. It works great in that I just need to import it in my app
module, and I get all sorts of great components (LoginComponent,
RegisterComponent, ResetPasswordComponent, etc) and my AuthService provided
for me. Even more still, by importing AuthModule.routing() in my AppModule
definition I get all these routes defined for my app as well. '/sign-in',
'/register', '/reset-password'. So by adding just a couple of lines (below)
into any of my applications I get users and authentication. It's great and
I love it.
@NgModule({
...
imports: [
...
AuthModule,
AuthModule.routing(),
...
Now the catch is, that if I want to change the template for one of these
pages, I have to subclass the component. While that is simple enough, it
means I lose the magic of just importing AuthenticationModule.routing() in
my main module, so then I have to create a routing module and define all my
routes there...
import { LoginComponent } from '@mylib/auth'
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
})
export class DerivedLoginComponent extends LoginComponent {
}
So, while it's not the end of the world - I REALLY like just having those 2
lines to add into my app to get my authentication components and urls. If I
could make it just 3 lines in order to change my template I would LOVE it.
Something like this:
template.auth.login = '/templates/auth/login.component.html'
@NgModule({
...
imports: [
...
AuthModule,
AuthModule.routing(),
...
So my thoughts here was to create a variables called templates in a single
file mylib/auth/templates.ts, and pull in that variable in each of my
*.component.ts files and use it determine the which template to use.
I was stopped very quickly as even just moving the @component definition
variable outside (like the code below) of the decorator causes errors in
the browser after compiling - just a blank page and in the console "cannot
find ./login.template.html"
let ngComponent = {
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
}
@Component(
ngComponent
)
export class LoginComponent extends FormComponent {
I have plans to make a few more libraries in addition to the auth library
and the consuming apps will pretty much only want to change the template.
Is there a solution to this problem (that works with AOT)? Maybe this whole
ordeal is a bit esoteric but I am loving the clean project folder and just
adding a few simple lines to get add powerful features. I'm willing to jump
through some hoops in the Auth library to make the consuming apps super
simple.
Thanks in advance for any insight.
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
