Menu
So I created an app with angular-cli . I have following structure in src dir.
.
├── app
│ ├── app-routing.module.ts
│ ├── app.component.css
│ ├── app.component.html
│ ├── app.component.spec.ts
│ ├── app.component.ts
│ ├── app.module.ts
│ └── notifications
│ ├── notifications.component.css
│ ├── notifications.component.html
│ ├── notifications.component.spec.ts
│ └── notifications.component.ts
├── assets
├── environments
│ ├── environment.prod.ts
│ └── environment.ts
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── protocol.js
├── styles.css
└── test.ts
Routes have following.
RouterModule.forRoot([
{ path: '', component: AppComponent },
{ path: 'notifications', component: NotificationsComponent}
])
AppComponent has Html for the login page.
Once the form is submitted I redirect to notifications component with [routerLink]="['/notifications']"
Now I am expecting <app_root></app_root> in the index.html to be populated with notifications-component.html.
First of all, is the assumption above right?
I tried to change the selector in notification-component.ts
I tried putting <app-notifications></app-notifications> in <app_root></app_root>
I tried putting <router-outlet></router-outlet> in <app_root>, app.component.html and notifications.component.html. (Only app.component.html worked. but it is showing both HTMLs.)
If the assumptions above is not right, how is it supposed to work?
P.S.
THANKS, EVERYONE FOR PROMPT RESPONSE.
I know all of your answers are right, but I could only accept one answer.
242
The default text is not Loading. Loading is what appears between the moment when the page is loaded by the browser and the moment when the JavaScript code has been parsed and executed by the browser. At this time, Angular instantiates the component and replaces the default, static text "Loading" by the dynamic template of the component.
Therefore, the most basic unit that can be lazy-loaded in Angular is a module, and with the module come the bundled components that we are interested in. The loadChildren property takes a function that returns a promise using the browser's built-in syntax for lazy loading code using dynamic imports import ('...').
Import the Required Angular Modules The most common mistake when you’re a beginner is not to import the required modules. Why? Because you don’t know enough about the framework. Having a complete overview of Angular takes some time. This error indicates that the Angular Forms Module was not imported into our module.
The most common reason, is, that the browser has not finished creating it and has not yet added it to the DOM. If you try to use it before it has been added, it will not work and crash your app. If you are familiar with JavaScript in general, you have probably stumbled across that problem, as it is not specific to angular.
A couple of changes are required to your approach:
Add <router-outlet></router-outlet> to the app.component.html file.
Create another component for login ( eg. LoginComponent )
Update route
RouterModule.forRoot([
{ path: '', pathMatch: 'full', component: LoginComponent },
{ path: 'notifications', component: NotificationsComponent }
])],
*Also it's not recommended to use the home path for login, you can change the url to /login and re-route if it's not authenticated.
Have a look https://stackblitz.com/edit/angular-dfhxek.
166
AppComponent should be your app's root component, with <router-outlet></router-outlet> inside (and possibly little or nothing more). Don't have a route leading there, it's the one component that'll always be rendered.
Create a separate component handling login (LoginComponent for example), and have routes like:
RouterModule.forRoot([
{ path: 'login', component: LoginComponent},
{ path: 'notifications', component: NotificationsComponent}
{ path: '', redirectTo: 'login'},
])
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
