Feature request: option to integrate with an Angular CLI / Nx project

[beeman]

Hey Ben, I just saw this project on Twitter and it looks super interesting. I've been working on a prototype with a very similar goal, with file based routing generating all the repetitive code as needed, but you took it a few steps further!

I like how you added the imports key to the Component directive.

I'm wondering if you have considered trying to implement this using a plugin that could be hooked into a normal Angular CLI (or Nx CLI) workspace, maybe by extending the webpack config or using a custom builder.

I think having the ability to integrate with a common Angular project would be ideal as it leaves folks in a common structure and allows to do things like monorepos.

If it sounds interesting, I'd be happy to talk about collaborating on that effort. In case you're not aware, there is an Angular Community on Discord where you can find me with the same username.

[benwinding]

Hi @beeman,

Thanks for checking out the project and I appreciate the kind words.

I'm wondering if you have considered trying to implement this using a plugin that could be hooked into a normal Angular CLI (or Nx CLI) workspace, maybe by extending the webpack config or using a custom builder.

Yes, that was the original plan. I initially wanted to insert my own typescript transformer plugin into the webpack build pipeline, which would allow me to generate decorators before the angular compiler gets to them. Like this:

This transformer would convert my own type of decorators and generate angular decorators (@NgModule and @Component), and pass it to the angular compiler, which will proceed with the rest of the build. Like this:

But this was deemed impossible with the current compiler as it doesn't obey the rules of webpack (more details here)

I think having the ability to integrate with a common Angular project would be ideal as it leaves folks in a common structure and allows to do things like monorepos.

I agree, but unless the AngularCompilerPlugin is modified to allow for files to be changed in the webpack pipeline, this is unfortunately not possible. But I could be wrong, and I welcome any input that would make this possible.

This tool could allow for mono-repos too, but they wouldn't be compatible with traditional angular.json mono-repos. (Also, I'm not familiar with nx, maybe that's worth checking out)

If it sounds interesting, I'd be happy to talk about collaborating on that effort.

Thanks for the discord link, I've posted it there too, under #shameless-plugs. And yes, I'd be happy to collaborate on this.

Cheers,
Ben

[edbzn]

Hi, first of all nice work done here, I'm happy to see that peoples still push the Angular community further. I'm also interested in this project and a big fan of Nx. I quickly digged in the code base and something attracted my attention.

The way you grab the PROJECT_DIR here.

const PROJECT_DIR = path.join(process.cwd(), ProjectName || "");

What about defining this var from the configuration file?

Reading the angular.json file, finding the root value from the project and resolving it from ROOT_DIR.

That's the common mechanism used in Nx, the only difference is that you need to fallback the angular.json file to workspace.json.

Edit: I don't think it's the only thing to do to make this project work with Nx but it's a requirement in any case.

[benwinding]

Hi @edbzn,

Thanks for checking it out, appreciate the feedback.

This command could potentially grab the project name from an environment variable, or another command could be created, especially for nx, say ngext new-nx.

ngext/src/cli.ts

Lines 33 to 40 in d6e2f67

	commander
	.command("new [ProjectName]")
	.description("Creates a new project")
	.action(async (ProjectName) => {
	const PROJECT_DIR = path.join(process.cwd(), ProjectName || "");
	console.log("creating new project at: ", PROJECT_DIR);
	await MakeNewProject(PROJECT_DIR);
	});

I'm not exactly sure at how nx works, you have commands which generate projects for a mono repo right?

Well to clear things up a little, this project (ngext) abstracts from the angular.json (it doesn't use one) it uses it's own configuration file called ngext.config.js, which is closer to webpack.config.js and can include logic.

Cheers,
Ben