How to extend an existing angular schematic
I'd like to customize the ng g app schematic so that calling ng g app myapp will create myapp/src/environments/environment.ts file like so:
import { environment as baseEnvironment } from '@myworkspace/environments/environment';
export const environment = Object.assign(
{ production: false },
baseEnvironment
);
The Nx docs show how to set things up but do not show any code examples, which would be greatly appreciated.
angular nrwl angular-schematics
asked Nov 20 '18 at 12:02
galkigalki
1,82312130
add a comment |
I'd like to customize the ng g app schematic so that calling ng g app myapp will create myapp/src/environments/environment.ts file like so:
import { environment as baseEnvironment } from '@myworkspace/environments/environment';
export const environment = Object.assign(
{ production: false },
baseEnvironment
);
The Nx docs show how to set things up but do not show any code examples, which would be greatly appreciated.
angular nrwl angular-schematics
asked Nov 20 '18 at 12:02
galkigalki
1,82312130
Are you using Nx?
– electrichead
Nov 23 '18 at 15:53
@electrichead yes
– galki
Nov 24 '18 at 15:41
add a comment |
I'd like to customize the ng g app schematic so that calling ng g app myapp will create myapp/src/environments/environment.ts file like so:
import { environment as baseEnvironment } from '@myworkspace/environments/environment';
export const environment = Object.assign(
{ production: false },
baseEnvironment
);
The Nx docs show how to set things up but do not show any code examples, which would be greatly appreciated.
angular nrwl angular-schematics
asked Nov 20 '18 at 12:02
galkigalki
1,82312130
I'd like to customize the ng g app schematic so that calling ng g app myapp will create myapp/src/environments/environment.ts file like so:
import { environment as baseEnvironment } from '@myworkspace/environments/environment';
export const environment = Object.assign(
{ production: false },
baseEnvironment
);
The Nx docs show how to set things up but do not show any code examples, which would be greatly appreciated.
angular nrwl angular-schematics
angular nrwl angular-schematics
asked Nov 20 '18 at 12:02
galkigalki
1,82312130
asked Nov 20 '18 at 12:02
galkigalki
1,82312130
asked Nov 20 '18 at 12:02
galkigalki
1,82312130
asked Nov 20 '18 at 12:02
galkigalki
1,82312130
asked Nov 20 '18 at 12:02
galkigalki
1,82312130
1,82312130
Are you using Nx?
– electrichead
Nov 23 '18 at 15:53
@electrichead yes
– galki
Nov 24 '18 at 15:41
add a comment |
Are you using Nx?
– electrichead
Nov 23 '18 at 15:53
@electrichead yes
– galki
Nov 24 '18 at 15:41
Are you using Nx?
– electrichead
Nov 23 '18 at 15:53
Are you using Nx?
– electrichead
Nov 23 '18 at 15:53
@electrichead yes
– galki
Nov 24 '18 at 15:41
@electrichead yes
– galki
Nov 24 '18 at 15:41
add a comment |
2 Answers
2
active
oldest
votes
You can create a custom schematic to do this in your Nx workspace.
ng g workspace-schematic my-new-app
This will create a new schematic under tools/schematics. You can edit the index.ts file that's created to insert your own code.
import { chain, externalSchematic, Rule } from '@angular-devkit/schematics';
export default function(schema: any): Rule {
return chain([
externalSchematic('@nrwl/schematics', 'app', {
name: schema.name
}),
// add your custom code here
]);
}
You can then run this with this command:
npm run workspace-schematic my-new-app -- somename
answered Dec 17 '18 at 19:33
electricheadelectrichead
702417
You're right that there isn't much current documentation about this. We are working on a book on Nx as well as a blog article on schematics. I'll post those links when they are ready.
– electrichead
Dec 17 '18 at 19:34
So there’s no way to extend ‘ng g app’?
– galki
Dec 18 '18 at 9:34
ng g app uses a schematic from @angular/schematics. If you want to extend it, the only way is to create your own schematic (and extend the @angular/schematic in there)
– electrichead
Dec 21 '18 at 18:59
add a comment |
Yes, there is a way to do this, and quite easily :)
create a schematic, and add “extends”: [ “@schematics/angular” ] to the collection.json of this schematic. (or @nrwl/schematics if you’re using that)
define your schematic as ‘app’ (since that’s the function you want to edit) — and the factory would use externalSchematic method to call angular’s/nrwl’s create app schematic, and you can add your environment file to this created tree.
Done! (I have assumed the knowledge of creating a schematic is known, if not, https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2 should be a good starting point)
answered Dec 21 '18 at 21:19
Chhirag KatariaChhirag Kataria
1336
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53392596%2fhow-to-extend-an-existing-angular-schematic%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can create a custom schematic to do this in your Nx workspace.
ng g workspace-schematic my-new-app
This will create a new schematic under tools/schematics. You can edit the index.ts file that's created to insert your own code.
import { chain, externalSchematic, Rule } from '@angular-devkit/schematics';
export default function(schema: any): Rule {
return chain([
externalSchematic('@nrwl/schematics', 'app', {
name: schema.name
}),
// add your custom code here
]);
}
You can then run this with this command:
npm run workspace-schematic my-new-app -- somename
answered Dec 17 '18 at 19:33
electricheadelectrichead
702417
You're right that there isn't much current documentation about this. We are working on a book on Nx as well as a blog article on schematics. I'll post those links when they are ready.
– electrichead
Dec 17 '18 at 19:34
So there’s no way to extend ‘ng g app’?
– galki
Dec 18 '18 at 9:34
ng g app uses a schematic from @angular/schematics. If you want to extend it, the only way is to create your own schematic (and extend the @angular/schematic in there)
– electrichead
Dec 21 '18 at 18:59
add a comment |
You can create a custom schematic to do this in your Nx workspace.
ng g workspace-schematic my-new-app
This will create a new schematic under tools/schematics. You can edit the index.ts file that's created to insert your own code.
import { chain, externalSchematic, Rule } from '@angular-devkit/schematics';
export default function(schema: any): Rule {
return chain([
externalSchematic('@nrwl/schematics', 'app', {
name: schema.name
}),
// add your custom code here
]);
}
You can then run this with this command:
npm run workspace-schematic my-new-app -- somename
answered Dec 17 '18 at 19:33
electricheadelectrichead
702417
You're right that there isn't much current documentation about this. We are working on a book on Nx as well as a blog article on schematics. I'll post those links when they are ready.
– electrichead
Dec 17 '18 at 19:34
So there’s no way to extend ‘ng g app’?
– galki
Dec 18 '18 at 9:34
ng g app uses a schematic from @angular/schematics. If you want to extend it, the only way is to create your own schematic (and extend the @angular/schematic in there)
– electrichead
Dec 21 '18 at 18:59
add a comment |
You can create a custom schematic to do this in your Nx workspace.
ng g workspace-schematic my-new-app
This will create a new schematic under tools/schematics. You can edit the index.ts file that's created to insert your own code.
import { chain, externalSchematic, Rule } from '@angular-devkit/schematics';
export default function(schema: any): Rule {
return chain([
externalSchematic('@nrwl/schematics', 'app', {
name: schema.name
}),
// add your custom code here
]);
}
You can then run this with this command:
npm run workspace-schematic my-new-app -- somename
answered Dec 17 '18 at 19:33
electricheadelectrichead
702417
You can create a custom schematic to do this in your Nx workspace.
ng g workspace-schematic my-new-app
This will create a new schematic under tools/schematics. You can edit the index.ts file that's created to insert your own code.
import { chain, externalSchematic, Rule } from '@angular-devkit/schematics';
export default function(schema: any): Rule {
return chain([
externalSchematic('@nrwl/schematics', 'app', {
name: schema.name
}),
// add your custom code here
]);
}
You can then run this with this command:
npm run workspace-schematic my-new-app -- somename
answered Dec 17 '18 at 19:33
electricheadelectrichead
702417
answered Dec 17 '18 at 19:33
electricheadelectrichead
702417
answered Dec 17 '18 at 19:33
electricheadelectrichead
702417
answered Dec 17 '18 at 19:33
electricheadelectrichead
702417
702417
You're right that there isn't much current documentation about this. We are working on a book on Nx as well as a blog article on schematics. I'll post those links when they are ready.
– electrichead
Dec 17 '18 at 19:34
So there’s no way to extend ‘ng g app’?
– galki
Dec 18 '18 at 9:34
ng g app uses a schematic from @angular/schematics. If you want to extend it, the only way is to create your own schematic (and extend the @angular/schematic in there)
– electrichead
Dec 21 '18 at 18:59
add a comment |
You're right that there isn't much current documentation about this. We are working on a book on Nx as well as a blog article on schematics. I'll post those links when they are ready.
– electrichead
Dec 17 '18 at 19:34
So there’s no way to extend ‘ng g app’?
– galki
Dec 18 '18 at 9:34
ng g app uses a schematic from @angular/schematics. If you want to extend it, the only way is to create your own schematic (and extend the @angular/schematic in there)
– electrichead
Dec 21 '18 at 18:59
You're right that there isn't much current documentation about this. We are working on a book on Nx as well as a blog article on schematics. I'll post those links when they are ready.
– electrichead
Dec 17 '18 at 19:34
You're right that there isn't much current documentation about this. We are working on a book on Nx as well as a blog article on schematics. I'll post those links when they are ready.
– electrichead
Dec 17 '18 at 19:34
So there’s no way to extend ‘ng g app’?
– galki
Dec 18 '18 at 9:34
So there’s no way to extend ‘ng g app’?
– galki
Dec 18 '18 at 9:34
ng g app uses a schematic from @angular/schematics. If you want to extend it, the only way is to create your own schematic (and extend the @angular/schematic in there)
– electrichead
Dec 21 '18 at 18:59
ng g app uses a schematic from @angular/schematics. If you want to extend it, the only way is to create your own schematic (and extend the @angular/schematic in there)
– electrichead
Dec 21 '18 at 18:59
add a comment |
Yes, there is a way to do this, and quite easily :)
create a schematic, and add “extends”: [ “@schematics/angular” ] to the collection.json of this schematic. (or @nrwl/schematics if you’re using that)
define your schematic as ‘app’ (since that’s the function you want to edit) — and the factory would use externalSchematic method to call angular’s/nrwl’s create app schematic, and you can add your environment file to this created tree.
Done! (I have assumed the knowledge of creating a schematic is known, if not, https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2 should be a good starting point)
answered Dec 21 '18 at 21:19
Chhirag KatariaChhirag Kataria
1336
add a comment |
Yes, there is a way to do this, and quite easily :)
create a schematic, and add “extends”: [ “@schematics/angular” ] to the collection.json of this schematic. (or @nrwl/schematics if you’re using that)
define your schematic as ‘app’ (since that’s the function you want to edit) — and the factory would use externalSchematic method to call angular’s/nrwl’s create app schematic, and you can add your environment file to this created tree.
Done! (I have assumed the knowledge of creating a schematic is known, if not, https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2 should be a good starting point)
answered Dec 21 '18 at 21:19
Chhirag KatariaChhirag Kataria
1336
add a comment |
Yes, there is a way to do this, and quite easily :)
create a schematic, and add “extends”: [ “@schematics/angular” ] to the collection.json of this schematic. (or @nrwl/schematics if you’re using that)
define your schematic as ‘app’ (since that’s the function you want to edit) — and the factory would use externalSchematic method to call angular’s/nrwl’s create app schematic, and you can add your environment file to this created tree.
Done! (I have assumed the knowledge of creating a schematic is known, if not, https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2 should be a good starting point)
answered Dec 21 '18 at 21:19
Chhirag KatariaChhirag Kataria
1336
Yes, there is a way to do this, and quite easily :)
create a schematic, and add “extends”: [ “@schematics/angular” ] to the collection.json of this schematic. (or @nrwl/schematics if you’re using that)
define your schematic as ‘app’ (since that’s the function you want to edit) — and the factory would use externalSchematic method to call angular’s/nrwl’s create app schematic, and you can add your environment file to this created tree.
Done! (I have assumed the knowledge of creating a schematic is known, if not, https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2 should be a good starting point)
answered Dec 21 '18 at 21:19
Chhirag KatariaChhirag Kataria
1336
answered Dec 21 '18 at 21:19
Chhirag KatariaChhirag Kataria
1336
answered Dec 21 '18 at 21:19
Chhirag KatariaChhirag Kataria
1336
answered Dec 21 '18 at 21:19
Chhirag KatariaChhirag Kataria
1336
1336
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53392596%2fhow-to-extend-an-existing-angular-schematic%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Are you using Nx?
– electrichead
Nov 23 '18 at 15:53
@electrichead yes
– galki
Nov 24 '18 at 15:41