Running Multiple Angular SPA using NRWL

Hi Friends,

In this section, we will talk about handling multi-spa scenario with one of the libraries provided by NRWL team. An Nx workspace is pretty much same as angular cli. Main advantage of this, it supports multiple angular application in a single repo. The @nrwl/schematics scope package comes with a binary for running the schematics for generating new workspace. We can start with installing npm i -g @nrwl/schematics.

This will setup command create-nx-workspace. Therefore, we can create simple project via create-nx-workspace sample-project. This is the simplest way of creating nx-workspace. However, we can specify npmscope and directory as well with this. Now, let’s understand, what these two options mean. Nx-workspace is an angular cli project configured for enterprise development. Its multi-app ready and it encourages to build out of application code in libs in single repository.

There are three pieces to this setup. First one is repository itself typically known as root of the application. Second is the angular-cli-project-name. Third is the npmscope for the libs which will be part of workspace.

With –directory option, we can change the name of the parent directory. And with –npm-scope option, we can set the scope of the application. And if we don’t provide these options, then it will take project name as default value for all these parameters. However, these things can be setup at later stage as well. Now it may happen, you will end up getting below error while creating the project. However, main benefit of this utilizing the same in existing app. Let’s say, I already have one angular project and that I want as part of multi spa. For that, I will run the below command.

Now, at this stage schematics scope package has setup as dev dependency because its used angular cli generate command and nx scope package has setup as normal dependency because it will help as helper code for some of the code used by schematics. Now, in the angular-cli.json file, we need to set defaults value for schematics like shown below.

This will tell the angular cli generator command to use the @nrwl/schematics as the collection to run the schematics from. Now, with those in place, we can run the below command. Here, I have set npm scope as well which means, it will set the shorthand option for all imports. Once run successfully, it will print the below result.

Now the new folder structure looks like

You can see apps folder created and in that first-client project created. Here, both, e2e and src folder has been moved. Also, in .angular-cli.json file, schema has changed to @nrwl/schematics.

Apart from that, couple of things have also changed like npmscope has been set to first-suite. And also under apps section, directory path has been updated. It will also update the tsconfig.json file. It will add the paths property and create a mapping to the npmscope value to the libs directory in the workspace.

Similarly tslint.json file will get updated as well with the addition of nx-enforce-module-boundaries.

This handles check for libs usage. Its here for public apis and also for lazy loaded modules. Now, there are some additional dependencies which nx relies on. These dependencies gets added in package.json.

Along with couple of npm scripts.

And finally there are few tweaks made in protractor.conf.js, test.js and tsconfig.spec.json file. These files moved up to the root level of the workspace. Now, last thing we can just ensure that all packages are successfully installed by running npm i command.

Now, we can go ahead and create new app in the nx workspace via ng g app second-client. It will add new app in the workspace like shown below.

Now, If you see the folder structure now, you will see that it has created the new project under apps folder itself.

Now, at this instant if I look at my apps section under .angular-cli.json file, it will give the appear like shown below. Here, I have minimized to show that currently, we have multiple apps.

And second app also aligned itself with the project like shown below.

Now, if we have to see all the available cli options for app schematics. We can see the same via ng g app –help command. This also supports most of the angular cli new command.

Now let’s create another app here with routing option as shown above.

We can verify the third app.

Now let’s see how to create new libs. This can be created via command ng g lib first-lib.

Now, if we see the folder structure, it will come like

An angular lib is a ng model which can be imported by another ng model which are sitting in apps or in other libs. The libs schematic will scaffold the ngModel files. And in index.ts file, it will be used to configure the public api.

It will also add an app entry in .angular-cli.json file like shown below.

Now, this can be little confusing that why libs are under apps category. Well, if you notice, lib is listed with name here, means we can easily add any service say by just referring to the lib like ng g s first-service -a=first-lib. Here, -a is the short for –app.

Having said that, it will appear like

Now, lib-schematics also has many options. You can explore the same via command ng g lib -h.

Now, let’s see how to update parent module with routing configuration created in lib folder. Say, ng g lib second-lib –routing –parent-module=apps/third-client/src/app/app.module.ts.

Here, it created the angular lib with routing bits and updated the parent module with child route as route config of that lib. Pretty neat and clean.

Now, let’s see how to implement lazy loading here. You can complete this with below command.

ng g lib third-lib –routing –lazy –parent-module=apps/third-client/src/app/app.module.ts.

Now, if I see my module, I can see that lazy loaded route is there.

Now, let’s see how to serve app locally. we can run ng serve -a=third-client.

It will launch the app

Now, let’s say I need to run another app in parallel. For that, what I can do, I can run the same on different port like ng serve -a=second-client -p=4201