What's new in @angular/cli 6

So I wanted to check what is new in the new version of @angular/cli
Specifically I was interested if it was possible to create a monorepository containing all the angular projects and all the angular libraries using @angular/cli.
In the last version it was impossible to create a library using @angular/cli, so that rolled out the mono repository since we were unable to create libraries and share them among multiple projects.
So in order to solve this problem there was an excellent packages called: nx which was an extension for @angular/cli and enabled us to go mono repository while not losing to much of @angular/cli.
Although the package did come with some goodies of it's own, they declared while building the package that must of the features are bound to be created in @angular/cli
Let's try and dive in to what new in angular cli version 6

Update your @angular/cli

You can update your @angular/cli by running:

                        
                            npm install -g @angular/cli@latest
                        
                    

you can verify that your @angular/cli version is greater than 6 by typing:

                        
                            ng -v
                        
                    

At the time of writing I'm using @angular/cli version 6.0.8 so I'm opening a new project using:

                        
                            ng new <project-name>
                        
                    

angular.json

If you go in the files of the project, the first thing you will notice is the missing file: .angular-cli.json
The angular cli configuration file is now located at the file: angular.json
So the syntax of the configuration file is also changed a bit so to update your old angular cli project to the new version you can simply run:

                        
                            ng update
                        
                    

You might be asked to run the command with --all flag to update all packages

Adding a new application

To create a mono repository with all our angular apps, we need to be able to create multiple angular apps.
To create another app type:

                        
                            ng g application second-app
                        
                    

It's kind of weird the files structure if you create another project, angular puts the new project under the projects dir but angular doesn't put the main app there, rather the main app is still under src.
I would think that it makes much more sense to put all the projects including the main one under the projects folder.
running ng serve will run the main project, I was wondering how to run the second project we opened so I tried to look in the help by typing:

                        
                            ng serve --help
                        
                    

There was no record there on how to run the second app so I figured since it's under the projects folder I will try to place --project flag.
That was a good guess so to run our second app we can simply type:

                        
                            ng serve --project second-app
                        
                    

Moving all the apps to the projects folder

I was kinda bothered by the fact that all future projects will be under the projects folder but there will be one project, the first one that is not in it.
The first project doesn't mean it's the most important one and should be different then the others.
So I created a new project for the first one with: ng g application first-app and then removed the src folder and the e2e folder.
You will have to modify the angular.json accordingly so under the projects dictionary remove the two projects that pointed to the folders you deleted.
The end result is you will have all your projects under the projects folder and the mono repository will be much cleaner.
Of course you will have to run the serve command each time with a --project flag.

Adding a library

So a long anticipated feature of the new version of @angular/cli is the ability to create an angular library.
Run the following command to create a new library:

                        
                        ng g library @nz/auth
                        
                    

I wanted to create a scoped package with Nerdeez company prefix, and indeed angular cli created the package with the correct name and even created a folder nz for the scope, which allows us to group the prefix libraries in the same folder.
What I found pretty annoying was the fact that it created the library inside the projects folder.
I would think it would be much better to organize all the libraries inside a library folder, which is similar file structure like nx is doing.
I couldn't find a way to tell angular cli to create a library in a custom folder so I had to do things manually.

• I created a libraries folder
• I moved the generated nz folder inside the projects folder to the new libraries folder
• I modified all the references from angular.json to my new library

Using our library

So I wanted to make sure that with all my file moving, I can still use my created library.
Angular created a service template in our library, let's verify that we can import that service and build our app.
Modify the file auth.module.ts to include the provider service

                        
                            libraries/nz/auth/src/lib/auth.module.ts
                        
                    

                            
                            import { NgModule } from '@angular/core';
                            import { AuthComponent } from './auth.component';
                            import {AuthService} from "./auth.service";
                            
                            @NgModule({
                                imports: [
                                ],
                                declarations: [AuthComponent],
                                exports: [AuthComponent],
                                providers: [AuthService]
                            })
                            export class AuthModule { }
                            
                    

In the first-app let's modify the app.module.ts so include the library module in the imports array.

                        
                            projects/first-app/src/app/app.module.ts
                        
                    

                        
                        import { BrowserModule } from '@angular/platform-browser';
                        import { NgModule } from '@angular/core';
                        import { AppComponent } from './app.component';
                        import {AuthModule} from "@nz/auth";
                        
                        @NgModule({
                            declarations: [
                            AppComponent
                            ],
                            imports: [
                            BrowserModule,
                            AuthModule
                            ],
                            providers: [],
                            bootstrap: [AppComponent]
                        })
                        export class AppModule { }
                        
                    

Typescript will mark an error on the import from @nz/auth so in order for it to work you will have to build the library before importing it:

                        
                            ng build --project @nz/auth
                        
                    

This is also somewhat annoying cause with nx workspace you won't have to build the library each time, but the plus side of the libraries that you will have a dist folder with the library ready for publish
All you need to do is do npm publish in that folder and you are good to go.

Summary

We did manage to create our mono repository with the new @angular/cli.
The new @angular/cli is meant for multiple projects and multiple libraries.
We were not too happy with the project structure but with some manual changes it's perfectly customizable.
The fact that ng-packagr is now embedded with the cli will really encourge the community to publish more packages since it's super easy to do now