Angular | Working with Projects
TL;DR
Create base application
Main ideas comes from here: Combining Multiple Angular Applications into a Single One
Generate base app and workspace
In the following steps, we will create a main application and 2 sub-applications.
Each Sub-Application consists of 2 Views (Pages) and a common navigation bar.
As a result, we will get the following directory structure:
$ ng new workspace --routing --style scss $ cd workspace
Create additional apps
$ ng generate application --routing app1 --style scss $ ng generate application --routing app2 --style scss
Generate a component
For each application, we create the 3 components: View 1, View 2 and a NavBar.
- The parameter
defines the application, where we will add the component.--project
- The Parameter
defines the application module class, where we add the definition the the newly creates components, in this case--module
app#/src/app/app.modules.ts
ng generate component components/view1 --project=app1 --module=app.module.ts ng generate component components/view2 --project=app1 --module=app.module.ts ng generate component components/nav --project=app1 --module=app.module.ts ng generate component components/view1 --project=app2 --module=app.module.ts ng generate component components/view2 --project=app2 --module=app.module.ts ng generate component components/nav --project=app2 --module=app.module.ts ng generate component components/nav
Customize Components: Main App
Edit src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { App1SharedModule } from 'projects/app1/src/app/app.shared.module'; import { App2SharedModule } from 'projects/app2/src/app/app.shared.module'; import { NavComponent } from './components/nav/nav.component'; @NgModule({ declarations: [AppComponent, NavComponent], imports: [ BrowserModule, AppRoutingModule, App1SharedModule.forRoot(), App2SharedModule.forRoot() ], providers: [], bootstrap: [AppComponent] }) export class AppModule {}
Edit src/app/app-routing.module.ts
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { App1SharedModule } from 'projects/app1/src/app/app.shared.module'; import { App2SharedModule } from 'projects/app2/src/app/app.shared.module'; const routes: Routes = [ { path: 'app1', component: App1SharedModule }, { path: 'app2', component: App2SharedModule }, { path: '**', redirectTo: 'app1/view1' } ]; @NgModule({ imports: [ RouterModule.forRoot(routes), App1SharedModule.forRoot(), App2SharedModule.forRoot() ], exports: [RouterModule] }) export class AppRoutingModule {}
Edit src/app/app.component.ts
export class AppComponent { title = 'base-app'; }
Replace src/app/app.component.html
The main app page consists of two areas:
- the header part with the welcome text, an image and the navigation bar to the 2 apps
- the application part, depending of the selected application