All geek questions in one place

Angular 2 two indexes or two components different for front and admin url

I am using angular2 version 2.4.7 and node 6.9.5

I need a single angular app for front and admin. e.g. http: // localhost: port for front-end components, modules, and routers. And http: // localhost: port / admin for components, modules, and routers for admin sites.

I tried many solutions, but could not find the right solution.

Here is my sample code that I am currently using.

My folder structure

src app admin components models services admin.component.html admin.component.ts admin.module.ts admin.routing.ts main.ts site components models services app.component.html app.component.ts app.module.ts app.routing.ts main.ts assets environments index.html main.ts polyfills.ts systemjs.config.js tsconfig.json (other angular2 required files)

Src / main.ts

 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { enableProdMode } from '@angular/core'; import { environment } from './environments/environment'; import { AppModule } from './app/site/app.module'; if (environment.production) { enableProdMode(); } platformBrowserDynamic().bootstrapModule(AppModule);

CSI / application / administrator / admin.module.ts

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; // other required imports import { MockBackend, MockConnection } from '@angular/http/testing'; import { BaseRequestOptions } from '@angular/http'; import { AdminComponent } from './admin.component'; import { adminrouting } from './admin.routing'; @NgModule({ imports: [ CommonModule, adminrouting, HttpModule, ], declarations: [ //declarations ], providers: [ //providers ], }) export class AdminModule { }

CSI / application / admin / admin.component.ts

  import {Component}  '@angular/core'; @({   : "adminapp",   templateUrl: 'admin.component.html' })   AdminComponent {} >

CSI / application / administrator / admin.routing.ts

  import {, RouterModule}  '@angular/router'; //   const appRoutes:  = [   //      //    admin   {path: '**', redirectTo: ''} ]; export const adminrouting = RouterModule.forChild(appRoutes); >

SIC / application / administrator / admin.component.html and SIC / application / site / admin.component.html

both are currently the same for the administrator and foreground. I want this to be different for both.

  <! -    - > < div class= "jumbotron" >   < div class= "" >       < div class= "col-sm-8 col-sm-offset-2" >           < - > </- >       </ >   </ > </ > >

CSI / application / administrator / main.ts

 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AdminModule } from './admin.module'; platformBrowserDynamic().bootstrapModule(AdminModule);

CSI / application / website / app.component.ts

 import { Component } from '@angular/core'; @Component({ selector: 'app', templateUrl: 'app.component.html' }) export class AppComponent { }

CSI / application / website / app.module.ts

 // imports @NgModule({ imports: [ BrowserModule, HttpModule, routing, ], declarations: [ AppComponent, AdminComponent //other declarations ], providers: [ //my providers ], bootstrap: [AppComponent, AdminComponent] }) export class AppModule { }

CSI / application / website / application / routing.ts

  import {, RouterModule}  '@angular/router'; const appRoutes:  = [   //     {     : 'admin',     loadChildren: '../admin/admin.module#AdminModule',   },   //         {path: '**', redirectTo: ''} ]; export const routing = RouterModule.forRoot(appRoutes); >

CSI / application / site / main.ts

  import {platformBrowserDynamic}  '@angular/platform-browser-dynamic'; import {AppModule}  './app.module'; . PlatformBrowserDynamic() bootstrapModule (AppModule); >

Src / index.html

 <!DOCTYPE html> <html> <head> <base href="/" /> <title>Angular 2 Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- bootstrap css --> <!-- application css --> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function (err) { console.error(err); }); </script> </head> <body> <app>Loading...</app> <adminapp></adminapp> </body> </html>

My structure is working.

But my question is that there is some solution, I can use admin.html as an index file for http: // localhost: port / admin instead of index.html, now this is the same for both the administrator and front side. Here, in my index.html, I have two tags for both sides, which I think are not good practice. In this case, both components will load in both URLs.

 <app></app> <adminapp></adminapp>

Can anyone suggest me a better approach for this. I do not want to make two different applications for this.

Sorry to post all the code here, instead of using Plunker or anything else. But I do not have such a practice.

I am completely new to angular2.

thanks

+7
source share
2 answers

You can use the CanLoad guard for your administrator route and check if the user is allowed access to the administration area. If not, it won’t even load the admin module ...

 { path: 'admin', canLoad: [UserGuard], loadChildren: '../admin/admin.module#AdminModule', },
0
source

You can try this, have 2 html files. And save one root component, add one attribute in this tag to distinguish it from the administrator or another input (), in the constructor of the root component you can get the value of the isAdmin attribute using ElementRef (we cannot use @Input to read the input value because browsers once do not treat the root tag as angular because it is not fully loaded). Store this value in some shared service used in the application, using this value, we can create the canActivate service and attach this canActivate component in the routing administrator module. Check it out, solve your problem.

0
source

Source: https://habr.com/ru/post/1265811/

More articles:


All Articles