{"action":"created","issue":{"url":"https://api.github.com/repos/aspnet/JavaScriptServices/issues/1288","repository_url":"https://api.github.com/repos/aspnet/JavaScriptServices","labels_url":"https://api.github.com/repos/aspnet/JavaScriptServices/issues/1288/labels{/name}","comments_url":"https://api.github.com/repos/aspnet/JavaScriptServices/issues/1288/comments","events_url":"https://api.github.com/repos/aspnet/JavaScriptServices/issues/1288/events","html_url":"https://github.com/aspnet/JavaScriptServices/issues/1288","id":258801364,"number":1288,"title":"Add new Angular CLI-based template","user":{"login":"SteveSandersonMS","id":1101362,"avatar_url":"https://avatars3.githubusercontent.com/u/1101362?v=4","gravatar_id":"","url":"https://api.github.com/users/SteveSandersonMS","html_url":"https://github.com/SteveSandersonMS","followers_url":"https://api.github.com/users/SteveSandersonMS/followers","following_url":"https://api.github.com/users/SteveSandersonMS/following{/other_user}","gists_url":"https://api.github.com/users/SteveSandersonMS/gists{/gist_id}","starred_url":"https://api.github.com/users/SteveSandersonMS/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SteveSandersonMS/subscriptions","organizations_url":"https://api.github.com/users/SteveSandersonMS/orgs","repos_url":"https://api.github.com/users/SteveSandersonMS/repos","events_url":"https://api.github.com/users/SteveSandersonMS/events{/privacy}","received_events_url":"https://api.github.com/users/SteveSandersonMS/received_events","type":"User","site_admin":false},"labels":[{"id":280902706,"url":"https://api.github.com/repos/aspnet/JavaScriptServices/labels/2%20-%20Working","name":"2 - Working","color":"cccccc","default":false}],"state":"open","locked":false,"assignee":{"login":"SteveSandersonMS","id":1101362,"avatar_url":"https://avatars3.githubusercontent.com/u/1101362?v=4","gravatar_id":"","url":"https://api.github.com/users/SteveSandersonMS","html_url":"https://github.com/SteveSandersonMS","followers_url":"https://api.github.com/users/SteveSandersonMS/followers","following_url":"https://api.github.com/users/SteveSandersonMS/following{/other_user}","gists_url":"https://api.github.com/users/SteveSandersonMS/gists{/gist_id}","starred_url":"https://api.github.com/users/SteveSandersonMS/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SteveSandersonMS/subscriptions","organizations_url":"https://api.github.com/users/SteveSandersonMS/orgs","repos_url":"https://api.github.com/users/SteveSandersonMS/repos","events_url":"https://api.github.com/users/SteveSandersonMS/events{/privacy}","received_events_url":"https://api.github.com/users/SteveSandersonMS/received_events","type":"User","site_admin":false},"assignees":[{"login":"SteveSandersonMS","id":1101362,"avatar_url":"https://avatars3.githubusercontent.com/u/1101362?v=4","gravatar_id":"","url":"https://api.github.com/users/SteveSandersonMS","html_url":"https://github.com/SteveSandersonMS","followers_url":"https://api.github.com/users/SteveSandersonMS/followers","following_url":"https://api.github.com/users/SteveSandersonMS/following{/other_user}","gists_url":"https://api.github.com/users/SteveSandersonMS/gists{/gist_id}","starred_url":"https://api.github.com/users/SteveSandersonMS/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SteveSandersonMS/subscriptions","organizations_url":"https://api.github.com/users/SteveSandersonMS/orgs","repos_url":"https://api.github.com/users/SteveSandersonMS/repos","events_url":"https://api.github.com/users/SteveSandersonMS/events{/privacy}","received_events_url":"https://api.github.com/users/SteveSandersonMS/received_events","type":"User","site_admin":false}],"milestone":null,"comments":96,"created_at":"2017-09-19T12:24:04Z","updated_at":"2017-11-29T10:46:34Z","closed_at":null,"author_association":"MEMBER","body":"The Angular template shipped with .NET Core 2.0 originated well before `@angular/cli` came on to the scene. Even when `@angular/cli` was first shipped, it was unclear whether it would become the de facto standard way to build real-world Angular apps. But now it seems the Angular community largely sees the CLI as the preferred approach, and it has stabilised and matured into something you actually can use in real-world development scenarios.\r\n\r\nSo, even though the ASP.NET Core Angular template has pretty much all the same features as `@angular/cli` such as HMR, AoT on publish, Karma tests, etc. (and in fact even some features that the CLI lacks, such as out-of-the-box server-side prerendering), it would be advantageous if our template achieved that stuff *using* `@angular/cli` rather than having its own implementation. The key benefit is that developers will have an even more typical project setup, so basically all online tutorials, StackOverflow posts, etc., will apply without any modification.\r\n\r\n**Approach**\r\n\r\nThe idea is for an updated `dotnet new angular` template to use a new `SpaServices` feature called *Angular CLI middleware* instead of the existing *Webpack middleware*. So it will still be a single ASP.NET Core project with the Angular part in a subdirectory called `ClientApp`, but now when the browser makes requests for content under `/dist`, we will pass through the request to an instance of `@angular/cli`'s `ng serve` process. As such, the output and behaviour will be identical to what you'd get if you ran `ng serve` directly, and all the same config and features apply. If you wanted, you could even take your `ClientApp` directory out of your project and run it manually with `ng serve`, since it's literally just a standard `@angular/cli` project. Likewise you can `ng eject` it if you don't want to use the Angular CLI for some reason (and then use *Webpack middleware* like before if you want).\r\n\r\nOf course, because you then have a standard Angular CLI project, you can use all other CLI features such as `ng generate`, `ng lint`, etc., without anything being different just because you're also using ASP.NET.\r\n\r\nWe would also integrate with Angular CLI when you publish your app. That is, a single `dotnet publish` command (or the Visual Studio equivalent option) would not only publish the .NET part but would also automate the process of using `ng build -prod`, putting the output in the right places to be served in production. Likewise, server-side prerendering would also be achieved by a call into Angular CLI.\r\n\r\n**Note:** This would *not* be a breaking change. The `SpaServices` package will continue to work exactly the same with existing applications created using the .NET Core 2.0.0 template - this scenario remains fully supported.\r\n\r\n## Tasks\r\n\r\n- [x] Add `BuildServerSideRenderer` flag in csproj\r\n- [x] Add new API for supplying custom data to prerenderer\r\n- [x] Support \"proxy only\" mode for AngularCliMiddleware, so you can have an `ng serve` process running separately and not restarted on each C# code change. Ideally, decouple the proxying from the Angular CLI-specific bits so it can be reused with other SPA frameworks.\r\n- [x] Consider whether it's practical to proxy the HMR endpoint. If not, this will be difficult to use from inside a Docker container (or at least requires extra configuration). **Update**: it does now proxy, so should work fine in Docker.\r\n- [x] Try to get CLI's progress display reflected in the console.\r\n- [x] Ensure that any errors occurring in angular-cli-middleware.js are passed back upstream. This also includes the CLI writing to stderr.\r\n- [x] Stop hard-coding CLI options in angular-cli-middleware.js. Either have a .NET API for configuring them, or better, call a `script` in `package.json` (in which case, make the task name appear explicitly in the C# source so people can discover what it does).\r\n- [x] Make sure the `npm` child processes aren't left behind on exit, including when using `dotnet watch`, including on Mac/Linux\r\n- [x] Get SSR working with publish by default. Waiting on https://github.com/angular/angular-cli/issues/7903\r\n- [x] Consider whether it's desirable to have `package.json` and `node_modules` at project root (is this necessary for VS to do auto-restore?). If so, need to support finding `node_modules` in ancestor directories using `require-from-string`-type approach (#154), since Angular app will be in subdirectory. **Update:** Not doing this - it's impractical. Angular CLI is hardcoded to assume `node_modules` is in the project root (e.g., see `getBrowserConfig` in `models\\webpack-configs\\browser.js` line 25), so we'd need to have the .NET project root as the Angular CLI project root, which means merging the folder structures (super ugly, and violates the intended separation), or having an extremely nonstandard Angular CLI config to have it fetch all sorts of things from a special subdirectory (violates the idea of it being a standard Angular CLI project). Instead, we'll rely on the `.csproj` containing instructions to do the applicable `npm install` in the `ClientApp` subdir during build when necessary.\r\n- [x] Figure out how the APIs would look if someone wanted `index.html` to be a server-rendered cshtml page instead. **Update:** Not supporting this. Doesn't really make sense.\r\n- [ ] See if it's possible to detect efficiently whether the `<base href>` matches the `PathBase` of the incoming request, and if not, fail with a clear message. Alternatives include rewriting `index.html` dynamically to inject a `<base href>` based on the per-request `PathBase`, or just rely on people reading docs to know they have to configure this manually before publishing.\r\n- [x] Ensure the right set of files are appearing in VS's Solution Explorer (e.g., `package.json` should be there)\r\n- [x] Add shrinkwrap\r\n- [x] Fix the bootstrap nav button in the Angular templates (and check it works in the others)\r\n- [ ] Ship preview\r\n\r\n### Pre-preview (try it)\r\n\r\nYou can now try this out. For instructions, please see https://github.com/aspnet/JavaScriptServices/issues/1288#issuecomment-346003334"},"comment":{"url":"https://api.github.com/repos/aspnet/JavaScriptServices/issues/comments/347822593","html_url":"https://github.com/aspnet/JavaScriptServices/issues/1288#issuecomment-347822593","issue_url":"https://api.github.com/repos/aspnet/JavaScriptServices/issues/1288","id":347822593,"user":{"login":"naveedahmed1","id":7761180,"avatar_url":"https://avatars0.githubusercontent.com/u/7761180?v=4","gravatar_id":"","url":"https://api.github.com/users/naveedahmed1","html_url":"https://github.com/naveedahmed1","followers_url":"https://api.github.com/users/naveedahmed1/followers","following_url":"https://api.github.com/users/naveedahmed1/following{/other_user}","gists_url":"https://api.github.com/users/naveedahmed1/gists{/gist_id}","starred_url":"https://api.github.com/users/naveedahmed1/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/naveedahmed1/subscriptions","organizations_url":"https://api.github.com/users/naveedahmed1/orgs","repos_url":"https://api.github.com/users/naveedahmed1/repos","events_url":"https://api.github.com/users/naveedahmed1/events{/privacy}","received_events_url":"https://api.github.com/users/naveedahmed1/received_events","type":"User","site_admin":false},"created_at":"2017-11-29T10:46:33Z","updated_at":"2017-11-29T10:46:33Z","author_association":"NONE","body":"@SteveSandersonMS  I am also having the same issue as @asadsahi is having with SSR:\r\n\r\n`NodeInvocationException: Can't resolve all parameters for MyService: (?, ?, ?, ?, [object Object]).`\r\n\r\nPlease also share your views about https://github.com/aspnet/JavaScriptServices/issues/1288#issuecomment-347592905"}}
{"actor":{"display_login":"naveedahmed1"}}