{"id":5092,"date":"2019-08-20T11:49:53","date_gmt":"2019-08-20T09:49:53","guid":{"rendered":"http:\/\/blog.via-internet.de\/?p=5092"},"modified":"2023-04-30T18:02:16","modified_gmt":"2023-04-30T16:02:16","slug":"angular-working-with-workspaces-and-projects","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2019\/08\/20\/angular-working-with-workspaces-and-projects\/","title":{"rendered":"Angular | Working with Projects"},"content":{"rendered":"\n

TL;DR<\/h2>\n\n\n\n

Live Demo<\/a> or Source Code<\/a><\/p>\n\n\n\n

Create base application<\/h2>\n\n\n\n

Main ideas comes from here: Combining Multiple Angular Applications into a Single One<\/a><\/p>\n\n\n\n

Generate base app and workspace<\/h3>\n\n\n\n
\n
\n

In the following steps, we will create a main application and 2 sub-applications.<\/p>\n\n\n\n

Each Sub-Application consists of 2 Views (Pages) and a common navigation bar.<\/p>\n\n\n\n

As a result, we will get the following directory structure:<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
$ ng new workspace --routing --style scss\n$ cd workspace<\/pre>\n\n\n\n
Create additional apps<\/h3>\n\n\n\n
$ ng generate application --routing app1 --style scss\n$ ng generate application --routing app2 --style scss<\/pre>\n\n\n\n
Generate a component<\/h3>\n\n\n\n
For each application, we create the 3 components: View 1, View 2 and a NavBar.<\/p>\n\n\n\n
  • The parameter --project<\/code><\/code><\/code> defines the application, where we will add the component.<\/li>
  • The Parameter --module<\/code><\/code> defines the application module class, where we add the definition the the newly creates components, in this case app#\/src\/app\/app.modules.ts<\/code><\/code><\/code><\/li><\/ul>\n\n\n\n
    <\/p>\n\n\n\n
    ng generate component components\/view1 --project=app1 --module=app.module.ts\nng generate component components\/view2 --project=app1 --module=app.module.ts\nng generate component components\/nav   --project=app1 --module=app.module.ts\n\nng generate component components\/view1 --project=app2 --module=app.module.ts\nng generate component components\/view2 --project=app2 --module=app.module.ts\nng generate component components\/nav   --project=app2 --module=app.module.ts\n\nng generate component components\/nav<\/pre>\n\n\n\n
    Customize Components: Main App<\/h2>\n\n\n\n
    Edit src\/app\/app.module.ts<\/code><\/h3>\n\n\n\n
    import { BrowserModule } from '@angular\/platform-browser';\nimport { NgModule } from '@angular\/core';\n\nimport { AppRoutingModule } from '.\/app-routing.module';\nimport { AppComponent } from '.\/app.component';\n\nimport { App1SharedModule } from 'projects\/app1\/src\/app\/app.shared.module';\nimport { App2SharedModule } from 'projects\/app2\/src\/app\/app.shared.module';\nimport { NavComponent } from '.\/components\/nav\/nav.component';\n\n@NgModule({\n    declarations: [AppComponent, NavComponent],\n    imports: [\n        BrowserModule,\n        AppRoutingModule,\n        App1SharedModule.forRoot(),\n        App2SharedModule.forRoot()\n    ],\n    providers: [],\n    bootstrap: [AppComponent]\n})\nexport class AppModule {}<\/pre>\n\n\n\n
    Edit src\/app\/app-routing.module.ts<\/code><\/h3>\n\n\n\n
    import { NgModule } from '@angular\/core';\nimport { Routes, RouterModule } from '@angular\/router';\n\nimport { App1SharedModule } from 'projects\/app1\/src\/app\/app.shared.module';\nimport { App2SharedModule } from 'projects\/app2\/src\/app\/app.shared.module';\n\nconst routes: Routes = [\n    { path: 'app1', component: App1SharedModule },\n    { path: 'app2', component: App2SharedModule },\n    { path: '**', redirectTo: 'app1\/view1' }\n];\n\n@NgModule({\n    imports: [\n        RouterModule.forRoot(routes),\n        App1SharedModule.forRoot(),\n        App2SharedModule.forRoot()\n    ],\n    exports: [RouterModule]\n})\nexport class AppRoutingModule {}<\/pre>\n\n\n\n
    Edit src\/app\/app.component.ts<\/code><\/h3>\n\n\n\n
    export class AppComponent {\n    title = 'base-app';\n}<\/pre>\n\n\n\n
    Replace src\/app\/app.component.html<\/code><\/h3>\n\n\n\n
    \n
    \n
    The main app page consists of two areas:<\/p>\n\n\n\n
    • the header part with the welcome text, an image and the navigation bar to the 2 apps<\/li>
    • the application part, depending of the selected application<\/li><\/ul>\n<\/div>\n\n\n\n
      \n
      \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
      <div style=\"text-align:center\">\n    <h1>Welcome to {{ title | uppercase }}<\/h1>\n    <img width=\"300\" alt=\"Angular Logo\"\n        src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/c\/cf\/Angular_full_color_logo.svg\">\n<\/div>\n\n<app-nav><\/app-nav>\n<hr \/>\n<router-outlet><\/router-outlet><\/pre>\n\n\n\n
      Replace src\/app\/components\/nav\/nav.component.html<\/code><\/h3>\n\n\n\n
      <div style=\"text-align:center\">\n    <a routerLink=\"\/app1\">App 1<\/a> | <a routerLink=\"\/app2\">App 2<\/a>\n<\/div><\/pre>\n\n\n\n
      Customize Components: App1<\/code><\/code><\/code><\/h2>\n\n\n\n
      Edit projects\/app1\/src\/app\/app.module.ts<\/code><\/h3>\n\n\n\n
      import { View1Component } from '.\/components\/view1\/view1.component';\nimport { View2Component } from '.\/components\/view2\/view2.component';\nimport { NavComponent }   from '.\/components\/nav\/nav.component';\n\n@NgModule({\n    declarations: [AppComponent, View1Component, View2Component, NavComponent],\n    ...<\/pre>\n\n\n\n
      Edit projects\/app1\/src\/app\/app-routing.module.ts<\/code><\/h3>\n\n\n\n
      import { View1Component } from '.\/components\/view1\/view1.component';\nimport { View2Component } from '.\/components\/view2\/view2.component';\n\nconst routes: Routes = [\n        { path: 'app1\/view1', component: View1Component },\n        { path: 'app1\/view2', component: View2Component },\n        { path: 'app1', redirectTo: 'app1\/view1' }\n    ];<\/pre>\n\n\n\n
      Create projects\/app1\/src\/app\/app.shared.module.ts<\/code><\/h3>\n\n\n\n
      import { NgModule, ModuleWithProviders } from '@angular\/core';\nimport { AppModule } from '.\/app.module';\n\nconst providers = [];\n\n@NgModule({})\nexport class App1SharedModule {\n    static forRoot(): ModuleWithProviders {\n        return {\n            ngModule: AppModule,\n            providers\n        };\n    }\n}<\/pre>\n\n\n\n
      Replace projects\/app1\/src\/app\/app.component.html<\/code><\/h3>\n\n\n\n
      <router-outlet><\/router-outlet><\/pre>\n\n\n\n
      Replace projects\/app1\/src\/app\/components\/nav\/nav.component.html<\/code><\/h3>\n\n\n\n
      <a routerLink=\"\/app1\/view1\">View 1<\/a> | <a routerLink=\"\/app1\/view2\">View 2<\/a><\/pre>\n\n\n\n
      Add to projects\/app1\/src\/app\/components\/view2\/view2.component.ts<\/code><\/h3>\n\n\n\n
      export class View1Component implements OnInit {\n    title = 'App1: View 1';\n    ...<\/pre>\n\n\n\n
      Replace projects\/app1\/src\/app\/components\/view1\/view1.component.html<\/code><\/h3>\n\n\n\n
      <app-nav><\/app-nav>\n<p>{{ title }}<\/p><\/pre>\n\n\n\n
      Replace projects\/app1\/src\/app\/components\/view2\/view2.component.html<\/code><\/h3>\n\n\n\n
      <app-nav><\/app-nav>\n<p>{{ title }}<\/p><\/pre>\n\n\n\n
      Customize Components: App2<\/h2>\n\n\n\n
      Do the same as for App1, but replace every App1<\/code> with App2<\/code>and every app1<\/code> with app2<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"
      TL;DR Live Demo or Source Code 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: Create additional apps Generate a component For each application, we create the 3 components: View 1, View 2 and a NavBar. The parameter –project defines the application, where we will add the component. The Parameter –module defines the application […]<\/p>\n","protected":false},"author":1,"featured_media":5095,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[90],"tags":[],"class_list":["post-5092","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular"],"jetpack_featured_media_url":"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/08\/logo_toolbox_angular.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/5092","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=5092"}],"version-history":[{"count":1,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/5092\/revisions"}],"predecessor-version":[{"id":9496,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/5092\/revisions\/9496"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media\/5095"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=5092"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=5092"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=5092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}