.NET Core 2.0 is shipped with SPA templates – formerly known as
Microsoft.AspNetCore.SpaTemplates – so you don’t need to run
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*. Just upgrade to .NET Core 2.0. you’ll see the beauty.
All you need to do is
dotnet new angular -o firstapp
inside the newly created
firstapp. It will create something like below.
Here the ClientApp is the ng app.
But this has a limitation that the Angular template does not come with angular-cli support and it does not even have a
.angular-cli.json (at-least for now). It’d be easier to generate new components and modules if we have that support as well. But surely you can add it the .angular-cli.json by changing its
"root" to refer
ClientApp with some other tweak and make it work. But in this post I am about to discuss how we can add a new ng component to the application without going in the angular-cli way.
Microsoft had to create a different structure than what is there in angular-cli. But for this, I thought to stick with the Microsoft’s pattern. Here they have components residing inside ClientApps/app/components, also spitted the app.module to three files, “app.module.browser.js”, “app.module.server.js” and “app.module.shared.js”. This is mainly for the server-side prerendering and stuff – its so cool.
Now if you see the template, you will see 4 components with the app component.
so, if you just run this
I want to add a new component and make it visible via navigation menu. I actually want to create a component for reverse counting.
Create a new folder inside ClientApp/app/components called “reverse-counter” and create two files “reverse-counter.component.ts” and “reverse-counter.component.html”
Open the “reverse-counter.component.ts” and add the below
Logic is pretty obvious here. Add the “reverse-counter.component.html” as well with the below code
We have successfull “created” the basic component. Now we need to configure the component to the application module, open “app.module.shared.ts” and add
under all imports and add
ReverseCounterComponent declaration and in the
RouterModule.forRoot add below entry
may be right after the entry for counter component – so will be easier for understanding.
Finally, add the router link to the navmenu component – to make the newly added component accessible via nav menu.
Thats all: finally webpack, build and run the application,