Skip to content

fix(material/schematics): support standalone components in ng-add #24931

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 19, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .bazelignore
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ integration/ng-update-v13/node_modules
integration/ng-add/.angular
integration/ng-add/node_modules

integration/ng-add-standalone/.angular
integration/ng-add-standalone/node_modules

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thx for adding it here!

integration/yarn-pnp-compat/.angular
integration/yarn-pnp-compat/.yarn/cache
integration/yarn-pnp-compat/.yarn/unplugged
Expand Down
16 changes: 16 additions & 0 deletions integration/ng-add-standalone/.browserslistrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support

# You can see what browsers were selected by your queries by running:
# npx browserslist

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
16 changes: 16 additions & 0 deletions integration/ng-add-standalone/.editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# Editor configuration, see https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.ts]
quote_type = single

[*.md]
max_line_length = off
trim_trailing_whitespace = false
45 changes: 45 additions & 0 deletions integration/ng-add-standalone/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.

# compiled output
/dist
/tmp
/out-tsc
# Only exists if Bazel was run
/bazel-out

# dependencies
/node_modules

# profiling files
chrome-profiler-events*.json

# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace

# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*

# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings

# System Files
.DS_Store
Thumbs.db
31 changes: 31 additions & 0 deletions integration/ng-add-standalone/BUILD.bazel
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
load("@bazel_skylib//lib:dicts.bzl", "dicts")
load("//tools:integration.bzl", "CLI_PROJECT_MAPPINGS")
load("//tools:defaults.bzl", "node_integration_test")

npmPackageMappings = dicts.add(
CLI_PROJECT_MAPPINGS,
{
"//src/cdk:npm_package_archive": "@angular/cdk",
"//src/material:npm_package_archive": "@angular/material",
},
)

node_integration_test(
name = "test",
srcs = glob(["**/*"]),
commands = [
# Note: We use a cache folder within the integration test as otherwise
# the NPM package mapped archive would be cached in the system.
# See: https://github.com/yarnpkg/yarn/issues/2165.
# TODO(devversion): determine if a solution/workaround could live in the test runner.
"yarn install --cache-folder .yarn_cache_folder/",
"yarn ng add @angular/material",
"yarn test",
],
npm_packages = npmPackageMappings,
setup_chromium = True,
tags = [
# This test relies on `yarn` so there needs to be internet access.
"requires-network",
],
)
27 changes: 27 additions & 0 deletions integration/ng-add-standalone/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# NgAddStandalone

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.0.0-next.7.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
101 changes: 101 additions & 0 deletions integration/ng-add-standalone/angular.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ng-add-standalone": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/ng-add-standalone",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": ["src/favicon.ico", "src/assets"],
"styles": ["src/styles.scss"],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "ng-add-standalone:build:production"
},
"development": {
"browserTarget": "ng-add-standalone:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "ng-add-standalone:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": ["src/favicon.ico", "src/assets"],
"styles": ["src/styles.scss"],
"scripts": [],
"watch": false
}
}
}
}
}
}
49 changes: 49 additions & 0 deletions integration/ng-add-standalone/karma.conf.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage'),
require('@angular-devkit/build-angular/plugins/karma'),
],
client: {
jasmine: {
// you can add configuration options for Jasmine here
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
// for example, you can disable the random execution with `random: false`
// or set a specific seed with `seed: 4321`
},
clearContext: false, // leave Jasmine Spec Runner output visible in browser
},
jasmineHtmlReporter: {
suppressAll: true, // removes the duplicated traces
},
coverageReporter: {
dir: require('path').join(__dirname, './coverage/ng-add-standalone'),
subdir: '.',
reporters: [{type: 'html'}, {type: 'text-summary'}],
},
customLaunchers: {
ChromeHeadlessNoSandbox: {
base: 'ChromeHeadless',
flags: ['--no-sandbox'],
},
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
// Chrome cannot run with sandbox enabled as this test already runs within
// the Bazel sandbox environment and the sandboxes would conflict otherwise.
browsers: ['ChromeHeadlessNoSandbox'],
singleRun: false,
restartOnFileChange: true,
});
};
42 changes: 42 additions & 0 deletions integration/ng-add-standalone/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
{
"name": "ng-add-standalone",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "file:../../node_modules/@angular/animations",
"@angular/cdk": "file:../../dist/releases/cdk",
"@angular/common": "file:../../node_modules/@angular/common",
"@angular/compiler": "file:../../node_modules/@angular/compiler",
"@angular/core": "file:../../node_modules/@angular/core",
"@angular/forms": "file:../../node_modules/@angular/forms",
"@angular/material": "file:../../dist/releases/material",
"@angular/platform-browser": "file:../../node_modules/@angular/platform-browser",
"@angular/platform-browser-dynamic": "file:../../node_modules/@angular/platform-browser-dynamic",
"@angular/router": "file:../../node_modules/@angular/router",
"rxjs": "file:../../node_modules/rxjs",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "file:../../node_modules/@angular-devkit/build-angular",
"@angular/cli": "file:../../node_modules/@angular/cli",
"@angular/compiler-cli": "file:../../node_modules/@angular/compiler-cli",
"@types/jasmine": "~3.9.0",
"@types/node": "^12.11.1",
"glob": "^7.2.0",
"jasmine-core": "~3.9.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "file:../../node_modules/typescript"
}
}
10 changes: 10 additions & 0 deletions integration/ng-add-standalone/src/app/app-routing.module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';

const routes: Routes = [];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
Loading