Angular-cli: Angular cli component inside an existing .net MVC application.

[phani257]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

angular cli - 1.4
angular - 4.4

Repro steps.

I have created a new angular cli application and created a component in it. I am able to successfully run it. Now I want to integrate this component in to my existing .net mvc application that is written in .net framework 4.6
I tried adding all the dependencies but it didn't work.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

[seangwright]

This isn't really a CLI issue. This is an issue integrating what the CLI creates, when you perform a build, into your backend technology stack.

If you run ng build --prod and take the output of that process (the /dist directory in your project folder root) and place it into your MVC app you can host your Angular application.

As to how to do this, the simplest solution would be to copy the <script> tags in the /dist/index.html to one of your razor layout pages and host the .css and .js contents of /dist in your MVC app to match those paths.

There are lots of examples of how to do this if you search the web. Here is one example https://github.com/mithunvp/ng2Mvc5Demo

[phani257]

@sgwatgit By doing the way that you have mentioned, we may have to keep the angular application as a separate project. But is there a way that it can be added to the existing .net application itself instead of maintaining two projects.

[seangwright]

In my experience, it's better to have two repositories (one for server api/app and one for the client) due to the server/client relationship, Forcing a purely javascript based, nodejs built application into the .net ecosystem, which really isn't tooled to support it, seems like using the right tool (Visual Studio) for the wrong job (managing an Angular/CLI app).

In addition to this, the client application is a UI layer which means it should be possible to update and redeploy it without changing the backend. This also lends itself to having separate repos/projects.

But if you want to have them both in a .sln you can use MSBuild / .csproj files to kick off your node build whenever you perform a project build in VS and then move the build assets around into the correct places in your MVC project. As to how to do this... again there isn't a ton of tooling in VS for what you want to do, especially in MVC 5 / full framework (asp.net core is a different story). You will need to write the MSBuild targets yourself I think.

[phani257]

Thanks for all your inputs. I am thinking in the below manner. Please correct me if this is feasible.

To my existing .net application, add all the angular dependencies to the package.json. Run npm install and download all the dependencies.
create angular components.
Now add the angular components and use them in the .net views. Will this work? I might be completely wrong.

[seangwright]

Read the wiki (specially ng build) https://github.com/angular/angular-cli/wiki/build if you haven't already.

Then take a look at this SO answer https://stackoverflow.com/a/43950906/939634

Here is an example of integrating the CLI directly into an MVC 5 app like you originally asked (which seems to be a huge pain) https://www.codeproject.com/Articles/1193423/Integrating-the-Angular-CLI-With-Visual-Studio

My recommendation:

1. Work with the Angular project as a separate repository
2. Perform an ng build --prod when you want to deploy it to your MVC app
3. Treat the contents of /dist that ng build creates as static content (html, css, js) in your MVC app
4. Let your MVC app reference that static content created by the CLI in your layouts using /dist/index.html as a guide.

I have had a lot of success with this approach in deploying Angular with Web Forms, MVC, Web Api and ASP.NET core

[Cezus]

So as I saw this has been labeled as a discussion I put in my two cents: With the process mentioned above it is not possible to use a build environment other than your local computer. We use a combination with HtmlWebpackPlugin to generate a _Layout.cshtml from a _LayoutTemplate.cshtml. In the generated _layout.cshtml are the script tags injected that corresponds with output of the cli.

We are still in the phase where we are discovering what the best configuration is for automation of builds for developing and production.

[ivanlopezmolina]

@Cezus Hi where you able to automate the build?
thanks.

[Cezus]

@ivanlopezmolina Yes! We are able to automate the build. In short, what we ultimately did is generate a Angular site with the CLI and run the 'eject' command so we were able to edit the webpack config. Then copy the generated angular code to the .NET webproject and edit it so it generates a _Layout.cshtml from a _LayoutTemplate.cshtml. Then, in the build process, run npm to build the production or development or any other configuration to generate the angular webapplication.

Do you understand what I described above?

[filipesilva]

Heya, I'm closing this issue as it's more of a question and there already seem to be a couple of approaches suggested.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}