59 Commits

Author SHA1 Message Date
Charles Lyding
23fc8e1e17 fix(@schematics/angular): generate components without a .component extension/type
To align with the updated style guide, Angular v20 will generate components
without a `.component` file extension type for all component related
files by default. Projects will automatically use this naming convention.
Projects can however opt-out by setting the `type` option to `Component`
for the component schematic. This can be done as a default in the `angular.json`
or directly on the commandline via `--type=Component` when executing `ng generate`.
As an example, `app.component.css` will now be named `app.css`. Additionally,
the TypeScript class name will be `App` instead of the previous `AppComponent`.
2025-03-14 11:27:43 -07:00
Alan Agius
29855bf54e docs: improve README files generated by Angular schematics 2024-10-14 19:32:26 +02:00
David LJ
0fa7e91231 docs: update tsconfig template link aio->adev 2024-06-05 09:31:34 -07:00
cexbrayat
d6af99601b fix(@schematics/angular): use angular.dev in readme 2024-05-23 09:24:11 -04:00
Alan Agius
0c9d137ff0 fix(@schematics/angular): add standalone option to library library
This commit fixes an issue were libraries could not be created with standalone APIs.

Standalone libraries do not have an an NgModule. When consumed users need to import the needed components, pipes, and directives.

It is also recommended not to avoid grouping exports as this typically indicates bad architecture and may also hinder tree-shaking.

**Don't**
```ts
export const COMPONENTS = [
  FooComponent,
  BarComponent,
]
```

**Do**
```ts
export { FooComponent } from './foo/foo.component';
export { BarComponent } from './bar/bar.component';
```
2023-04-25 15:38:57 +00:00
Felix Hamann
62121f89ab feat(@schematics/angular): add sideEffects:false to library package.json 2022-10-25 10:50:17 -07:00
Alan Agius
b6897dbb0a feat(@schematics/angular): remove karma.conf.js from newly generated projects
`@angular-devkit/build-angular` now has a built in Karma config. Users can still create their own Karma configuration if they want to override the default configuration.
2022-09-28 17:37:53 +02:00
Alan Agius
56a1e8f9f5 feat(@schematics/angular): remove test.ts file from new projects
The test.ts is now included in `@angular-devkit/build-angular` and unless this needs to be customized is no longer needed to be provided.

Default config:
```js
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
  errorOnUnknownElements: true,
  errorOnUnknownProperties: true
});
```
2022-09-27 18:59:08 +02:00
Alan Agius
597bfea1b2 feat(@schematics/angular): drop polyfills.ts file from new templates
With this change we drop the `polyfills.ts` from new application projects and add the polyfills directly in the `angular.json`. This is possible as now the `polyfills` option accept an array of module specifiers.

This change also fixes another open issue (#14432) which was caused by the missing polyfills file in the library test setup.

Closes #14432
2022-09-26 18:27:35 +02:00
Alan Agius
dbcea96274 refactor(@angular-devkit/build-angular): simplify how specs are found and loaded
Prior to this change specs where found and loaded using Webpack's `require.context` API. The `require.context` is found in the users project `test.ts`. This resulted in a complex and hacky setup especially to filter tests when the `include` builder option is provided, were we had to amend the `test.ts` in memory.

With this change we find all the specs files and add them as part of the main entrypoint.

Closes #23751 and closes #22531
2022-09-23 18:52:26 -04:00
Cédric Exbrayat
1c21e470c7 feat(@schematics/angular): enable error on unknown properties and elements in tests
These new options have been introduced in Angular v14.
The commit enables the option in a new project, as we did when we introduced the `destroyAfterOption`,
with the same long term goal to have these options enabled by default.
2022-09-16 11:37:56 -07:00
Alan Agius
14f8f5c5ab fix(@schematics/angular): remove browserslist configuration
By default the defaults are now configured in ng-packagr

https://github.com/ng-packagr/ng-packagr/blob/main/src/lib/styles/stylesheet-processor.ts#L35-L47
2022-07-07 15:38:04 +02:00
alkavats1
d52697047a refactor: refactored the code and removed the code smells
refactored the code and removed the code smells
2022-05-06 11:11:13 -07:00
Alan Agius
37a7239458 fix(@schematics/angular): address eslint linting failures in test.ts
Closes #22171
2021-11-18 20:26:39 +01:00
Alan Agius
81531d1b64 fix(@schematics/angular): remove target and lib options for library tsconfig
The `target` option is set directly in ng-packagr binary and cannot be overridden, while the `lib` option is inherited from the root level tsconfig.
2021-10-08 14:40:54 +02:00
Alan Agius
585adacd06 fix(@schematics/angular): don't add destroyAfterEach in newly generated spec files
This is now enabled by default.

See https://github.com/angular/angular/pull/43353 for more context.
2021-10-06 14:33:42 -05:00
Alan Agius
732ef79852 fix(@schematics/angular): add browserslist configuration in library projects
Previously, browserslist configuration was not added in library projects. This in some cases caused a large number of CSS prefixes to be included in components stylesheets
2021-08-27 15:57:57 +02:00
Alan Agius
20fd33f6d4 feat(@schematics/angular): destroy test module after every test
In version 12.1, the framework added the `destroyAfterEach` an opt-in feature that improves tests performance and also addresses two long-standing issues.

The idea, is to have this enabled by default in the future.  Related PR: https://github.com/angular/angular/pull/42566

Closes #21280
2021-07-07 10:31:20 -04:00
Alan Agius
695a01ba02 feat(@schematics/angular): configure new libraries to be published in Ivy partial mode
With this change we configure new libraries to be published using Ivy partial compilation instead of the deprecated View Engine rendering engine, we also remove several view engine specific `angularCompilerOptions`.

New libraries can be published using this format, as they are not depend upon by View Engine libraries or application.
2021-04-09 18:40:39 -04:00
Alan Agius
226a8d274d feat(@schematics/angular): remove tslint and codelyzer from new projects
Both of these projects and the tslint builder are deprecated.

Closes #20105 and closes #18465
2021-03-16 15:49:46 +01:00
Alan Agius
bb38f85202 feat(@schematics/angular): use new zone.js entry-points 2021-02-17 12:44:43 -06:00
cexbrayat
5a0940e62d fix(@schematics/angular): document jasmine options
Currently it can be hard to find how to configure Jasmine in the Karma config.
For example, a developer might want to reproduce a randomly failing test with a specific seed.

This commit adds some information that may be helpful to beginners.
2020-11-20 11:37:19 +00:00
cexbrayat
53193eaf77 fix(@schematics/angular): remove duplicated Karma traces
Currently, Karma is reporting a failed test and the total twice in a bare CLI project:

```
12 11 2020 13:59:46.666:INFO [launcher]: Starting browser Chrome
✔ Browser application bundle generation complete.
12 11 2020 13:59:50.457:INFO [Chrome 86.0.4240.198 (Mac OS 10.15.7)]: Connected on socket F0ehOBWL6BYFqXfbAAAA with id 69358036
Chrome 86.0.4240.198 (Mac OS 10.15.7) AppComponent should render title FAILED
	Error: Expected 'ponyracer app is running!' to contain 'other'.
	    at <Jasmine>
	    at UserContext.<anonymous> (src/app/app.component.spec.ts:29:65)
	    at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:364:1)
	    at ProxyZoneSpec.push.QpwO.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/zone-testing.js:292:1)
Chrome 86.0.4240.198 (Mac OS 10.15.7): Executed 2 of 3 (1 FAILED) (0 secs / 0.231 secs)
Chrome 86.0.4240.198 (Mac OS 10.15.7) AppComponent should render title FAILED
	Error: Expected 'ponyracer app is running!' to contain 'other'.
	    at <Jasmine>
	    at UserContext.<anonymous> (src/app/app.component.spec.ts:29:65)
	    at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:364:1)
Chrome 86.0.4240.198 (Mac OS 10.15.7): Executed 3 of 3 (1 FAILED) (0.309 secs / 0.242 secs)
TOTAL: 1 FAILED, 2 SUCCESS
TOTAL: 1 FAILED, 2 SUCCESS
```

This is a bit annoying when you have several tests failing, and tend to confuse beginners.

This commit configures the Karma HTML reporter to suppress the duplicates (both error and success), which results in only one reporter showing the failed test and total:

```
12 11 2020 14:01:43.002:INFO [launcher]: Starting browser Chrome
✔ Browser application bundle generation complete.
12 11 2020 14:01:58.728:INFO [Chrome 86.0.4240.198 (Mac OS 10.15.7)]: Connected on socket Pc0xPggxJPdC8E_LAAAA with id 54797430
Chrome 86.0.4240.198 (Mac OS 10.15.7) AppComponent should render title FAILED
	Error: Expected 'ponyracer app is running!' to contain 'other'.
	    at <Jasmine>
	    at UserContext.<anonymous> (src/app/app.component.spec.ts:29:65)
	    at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:364:1)
	    at ProxyZoneSpec.push.QpwO.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/zone-testing.js:292:1)
Chrome 86.0.4240.198 (Mac OS 10.15.7): Executed 3 of 3 (1 FAILED) (0.331 secs / 0.252 secs)
TOTAL: 1 FAILED, 2 SUCCESS
```
2020-11-13 15:53:01 -05:00
cexbrayat
8e8a51c3fa fix(@schematics/angular): remove trailing comma in karma conf
We usually don't have trailing commas in the generated code of the CLI (and this one makes the linter/formatter angry).
2020-11-12 13:16:40 -05:00
Alan Agius
9768230b4d docs: update further help section in readme 2020-10-21 14:15:24 +02:00
cexbrayat
8303681123 style(@schematics/angular): fix formatting of coverage reporters 2020-09-14 12:34:33 -04:00
Alan Agius
0d7bbd82f6 refactor(@schematics/angular): remove lcov from coverage reporters
In many users will not use lcov reports, also  this reporter generates an HTML report, which we are already generating using the html reporter.\
2020-09-11 15:17:23 -04:00
Keen Yee Liau
8995e49f0b feat(@angular-devkit/build-angular): Switch to karma-coverage
This commit switches coverage tooling from karma-coverage-istanbul-reporter
to karma-coverage since it's better supported.

Closes #17757
2020-09-06 12:22:25 +02:00
Alan Agius
8b96e52d83 fix(@schematics/angular): remove solution style tsconfig from new projects
Following the issues highlighted in https://docs.google.com/document/d/1eB6cGCG_2ircfS5GzpDC9dBgikeYYcMxghVH5sDESHw/edit?usp=sharing and discussions held with the TypeScript team. The best course of action is to rollback this feature.

In future, it is not excluded that solution style tsconfigs are re-introduced..

Closes #18040 and closes #18170
2020-08-12 19:26:12 +01:00
Alan Agius
76f525cec2 fix(@schematics/angular): add links to generated tsconfig files
We now add a link to generated tsconfig.json to make is easier for users to find relevant information.
2020-06-15 08:48:14 +02:00
Alan Agius
17dbaeb1fa feat(@schematics/angular): emit declaration maps for local library builds
With this change we enable emitting declaration maps when building libraries to be consumed locally as this improved DX as this will allow editors to go to the original typescript file when using `Go to Definition`.

For production builds, declaration maps are disabled because they are not useful since the source files are not included in the distributable package.

Closes #17888
2020-06-12 19:39:58 +02:00
Alan Agius
ade3f491fe fix(@schematics/angular): remove node typings from tsconfig.spec.json 2020-05-27 14:17:05 +02:00
Alan Agius
bede23226a feat(@schematics/angular): add solutions style tsconfig structure
In version 3.9, TypeScript introduced the concept of "Solutions Style" tsconfig to improve developer experience.

More info: https://devblogs.microsoft.com/typescript/announcing-typescript-3-9-rc/#solution-style-tsconfig

Closes #17493 and closes #8138
2020-05-20 12:12:33 -07:00
Alan Agius
a042290726 fix(@schematics/angular): update to tslib 2.0.0
TypeScript 3.9 requires tslib 2.0.0, with this change we;
- Update tslib existing and new workspaces to use tslib 2.0.0
- Update new and existing libraries to use tslib 2.0.0 as a direct depedency.

Tslib version is bound to the TypeScript version used to compile the library. Thus, we shouldn't list `tslib` as a `peerDependencies`. This is because, a user can install libraries which have been compiled with older versions of TypeScript and thus require multiple `tslib` versions to be installed.

Closes: #17753

Reference: TOOL-1374
2020-05-20 11:25:31 +01:00
Cyrille Tuzi
ee589d9116 fix(@schematics/angular): add compliance with no-any lint rule 2020-01-29 10:19:36 -08:00
Alan Agius
a384a983fa feat(@schematics/angular): add tslib as a peerDependencies in library package.json
This is to align with https://github.com/angular/angular/pull/32167
2019-10-22 13:26:38 -07:00
Alan Agius
745670fa6a feat(@schematics/angular): remove dependency on tsickle (#15603)
With this change we remove the requirement  to add tsickle as a dependency when having a workspace library.

Since the CTOR downlevel transformer which was previously provided via tsickle  is now in ng-packagr version 5.5.1+ We migrate existing libraries to remove the need for tsickle.
2019-09-18 14:50:29 +01:00
Alan
beb7070ac8 feat(@schematics/angular): introduce Ivy libraries for development
Since `NGCC` is non incremental and in library projects we have the original TS sources
we don't need to build a library using the `VE` and transform it using `NGCC`. Instead we can build the library using `NGTSC` (Ivy) directly
 as this enables faster incremental compilations and a better development experience.

 Libraries now have a `production` configuration, which enabled `VE` compilations. As it is not recommended to publish NGTSC (Ivy)
 built libraries to NPM repositories, since Ivy libraries are not backwards compatible with the legacy View Engine.
2019-08-16 09:31:02 -07:00
Wataru.Kasahara
4cbf59beb2 fix(@schematics/angular): add text-summary to code coverage reporter 2019-07-10 04:16:27 +08:00
Charles Lyding
635de55982 fix(@schematics/angular): enable tsickle for library compilation
This is required to support forward references in ES2015 target code.  tsickle provides the constructor parameter downlevel logic that removes the runtime TDZ error that would otherwise be encountered.
2019-05-23 19:12:40 +02:00
Charles Lyding
6b28d3ac51 fix(@schematics/angular): remove emitDecoratorMetadata TS option for new applications 2019-05-23 19:12:40 +02:00
Charles Lyding
a0a583adaa fix(@schematics/angular): remove unused core-js dependency from new projects
Required polyfills are now managed directly by the build system.  If additional polyfills are required, packages can be manually added as needed.
2019-04-04 09:28:02 -07:00
Alan Agius
9e18cf240e fix(@schematics/angular): kebab case prefix causes lint errors in new directives
`Component` selectors are always kekabed while `Directive` selectors are always camelized. This updates the lint rules to convert the prefix to the appropiate case

Fixes #13796
2019-03-04 09:35:22 -08:00
Alan Agius
a139243644 refactor: clean up library tsconfig
These properties are already defined in the root tsconfig
2019-02-14 20:58:59 +08:00
Charles Lyding
91d457af73 refactor(@schematics/angular): remove redundant branchAndMerge rules 2019-02-13 15:21:37 -08:00
Luis Confraria
1f9c84f98c fix(@schematics/angular): set restartOnFileChange to true in karma.conf templates
Fix #13542
2019-02-08 16:12:19 -08:00
Alan Agius
6ae1752891 feat(@schematics/angular): remove annotateForClosureCompiler in libraries tsconfig (#13546)
Users outside of Google don't usually need closure annotations.

We should also follow up with ng-packagr to remove tsickle from peerDependency and afterwards, we be able to remove tsickle from the added dependencies when running this schematic
2019-01-30 11:24:04 -08:00
Alan Agius
36eba0c9fc refactor: use .template suffix for all schematic files
Currently when using `ivy-ngcc` it will print out a warning

```
Failed to read entry point info from //node_modules/@schematics/angular/workspace/files/package.json with error SyntaxError: Unexpected token < in JSON at position 1121.
```

Fixes #13378
2019-01-16 10:29:56 -08:00
Amadou Sall
3e14158283 fix(@schematics/angular): generate coverage for libs in their own folder 2019-01-14 10:57:51 -08:00
Klaus Kazlauskas
100cf47cb9 feat(@schematics/angular): generate a library with a README.md file
Fixes #13296
2019-01-08 13:45:18 -08:00