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`.
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';
```
`@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.
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
});
```
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
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
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.
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
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/42566Closes#21280
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.
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.
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
```
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
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
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.
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.
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.
`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
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
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