4 |
5 | Read the full tutorial, ["Building React and Angular Component Libraries with Stencil and Nx"](https://ionicframework.com/blog/building-react-and-angular-component-libraries-with-stencil-and-nx/), on the Ionic blog.
6 |
7 | Or checkout the [video tutorial on Youtube](https://www.youtube.com/watch?v=p9NaM4_CdmQ)!
8 |
--------------------------------------------------------------------------------
/packages/react-app/src/app/app.spec.tsx:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 |
3 | import App from './app';
4 |
5 | describe('App', () => {
6 | it('should render successfully', () => {
7 | const { baseElement } = render(Hello, World! I'm {this.getText()}
;
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/packages/angular-app/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false,
7 | };
8 |
9 | /*
10 | * For easier debugging in development mode, you can import the following file
11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 | *
13 | * This import should be commented out in production mode because it will have a negative impact
14 | * on performance if an error is thrown.
15 | */
16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
17 |
--------------------------------------------------------------------------------
/packages/angular-app/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.base.json",
3 | "files": [],
4 | "include": [],
5 | "references": [
6 | {
7 | "path": "./tsconfig.app.json"
8 | },
9 | {
10 | "path": "./tsconfig.spec.json"
11 | },
12 | {
13 | "path": "./tsconfig.editor.json"
14 | }
15 | ],
16 | "compilerOptions": {
17 | "forceConsistentCasingInFileNames": true,
18 | "strict": true,
19 | "noImplicitOverride": true,
20 | "noPropertyAccessFromIndexSignature": true,
21 | "noImplicitReturns": true,
22 | "noFallthroughCasesInSwitch": true
23 | },
24 | "angularCompilerOptions": {
25 | "strictInjectionParameters": true,
26 | "strictInputAccessModifiers": true,
27 | "strictTemplates": true
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/packages/core-components-react/project.json:
--------------------------------------------------------------------------------
1 | {
2 | "root": "packages/core-components-react",
3 | "sourceRoot": "packages/core-components-react/src",
4 | "projectType": "library",
5 | "tags": [],
6 | "targets": {
7 | "lint": {
8 | "executor": "@nrwl/linter:eslint",
9 | "outputs": ["{options.outputFile}"],
10 | "options": {
11 | "lintFilePatterns": [
12 | "packages/core-components-react/**/*.{ts,tsx,js,jsx}"
13 | ]
14 | }
15 | },
16 | "test": {
17 | "executor": "@nrwl/jest:jest",
18 | "outputs": ["coverage/packages/core-components-react"],
19 | "options": {
20 | "jestConfig": "packages/core-components-react/jest.config.js",
21 | "passWithNoTests": true
22 | }
23 | }
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/angular-app/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | displayName: 'angular-app',
3 | preset: '../../jest.preset.js',
4 | setupFilesAfterEnv: ['
14 | Hello, World! I'm
15 |
16 |
30 | Hello, World! I'm Stencil 'Don't call me a framework' JS
31 |
32 |
431 |
842 | `,
843 | styles: [],
844 | encapsulation: ViewEncapsulation.None,
845 | })
846 | export class NxWelcomeComponent implements OnInit {
847 | constructor() {}
848 |
849 | ngOnInit(): void {}
850 | }
851 |
--------------------------------------------------------------------------------
432 |
433 |
841 |
434 |
439 |
440 |
441 | 435 | Hello there, 436 | Welcome angular-app 👋 437 |
438 |
442 |
474 |
475 |
476 |
443 |
461 | 444 | 457 | You're up and running 458 |
459 | What's next? 460 |
462 |
472 |
473 |
477 |
749 |
750 |
751 |
478 |
667 | Learning materials
479 | 485 | 498 | 499 | Documentation 500 | Everything is in there 501 | 502 | 515 | 516 | 522 | 535 | 536 | Blog 537 | Changelog, features & events 538 | 539 | 552 | 553 | 559 | 570 | 571 | YouTube channel 572 | Nx Show, talks & tutorials 573 | 574 | 587 | 588 | 594 | 607 | 608 | Interactive tutorials 609 | Create an app, step-by-step 610 | 611 | 624 | 625 | 631 | 648 | 649 | Video courses 650 | Nx custom courses 651 | 652 | 665 | 666 |
668 |
675 |
686 |
687 | Install Nx Console
688 | Plugin for VSCode
689 |
690 |
691 |
748 |
692 |
725 |
732 |
742 |
743 | Nx is open source
744 | Love Nx? Give us a star!
745 |
746 |
747 |
693 |
707 |
712 | 708 | NxCloud 709 | Enable faster CI & better DX 710 |
711 |713 | You can activate distributed tasks executions and caching by 714 | running: 715 |
716 |nx connect-to-nx-cloud717 | 722 | What is Nx Cloud? 723 | 724 |
752 |
823 |
824 | Next steps
753 |Here are some things you can do with Nx:
754 |
755 |
777 | 756 | 769 | Add UI library 770 |
771 |# Generate UI lib 772 | nx g @nrwl/angular:lib ui 773 | 774 | # Add a component 775 | nx g @nrwl/angular:component button --project ui776 |
778 |
796 | 779 | 792 | View interactive project graph 793 |
794 |nx graph795 |
797 |
822 | 798 | 811 | Run affected commands 812 |
813 |# see what's been affected by changes 814 | nx affected:graph 815 | 816 | # run tests for current changes 817 | nx affected:test 818 | 819 | # run e2e tests for current changes 820 | nx affected:e2e821 |
825 | Carefully crafted with 826 | 839 |
840 |