Skip to content

Commit

Permalink
Update angular example to v8 (#7747)
Browse files Browse the repository at this point in the history
Update angular example to v8
  • Loading branch information
shilman authored Sep 28, 2019
2 parents f44bcb1 + 9aaf6ad commit 2ebcb6c
Show file tree
Hide file tree
Showing 10 changed files with 763 additions and 639 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import { NgStory, ICollection } from './types';
template: '<ng-template #target></ng-template>',
})
export class AppComponent implements OnInit, OnDestroy {
@ViewChild('target', { read: ViewContainerRef })
@ViewChild('target', { read: ViewContainerRef, static: true })
target: ViewContainerRef;

constructor(private cfr: ComponentFactoryResolver, @Inject(STORY) private data: NgStory) {}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import { StoryFnAngularReturnType, ICollection } from '../../types';
template: '<ng-template #target></ng-template>',
})
export class AppComponent implements OnInit, OnDestroy {
@ViewChild('target', { read: ViewContainerRef })
@ViewChild('target', { read: ViewContainerRef, static: true })
target: ViewContainerRef;

readonly previousValues: { [key: string]: any } = {};
Expand Down
95 changes: 40 additions & 55 deletions app/angular/src/server/__tests__/angular-cli_config.test.ts
Original file line number Diff line number Diff line change
@@ -1,67 +1,52 @@
import stripJsonComments from 'strip-json-comments';
import { Path } from '@angular-devkit/core';
import { getAngularCliWebpackConfigOptions } from '../angular-cli_config';

// eslint-disable-next-line global-require
jest.mock('fs', () => require('../../../../../__mocks__/fs'));
jest.mock('path', () => ({
join: (...args) =>
args[args.length - 1] === 'angular.json'
? 'angular.json'
: jest.requireActual('path').join(...args),
resolve: (...args) => 'tsconfig.json',
}));

const angularJson = jest
.requireActual('fs')
.readFileSync(jest.requireActual('path').resolve(__dirname, 'angular.json'), 'utf8');

const setupFiles = (files: any) => {
// eslint-disable-next-line no-underscore-dangle, global-require
require('fs').__setMockFiles(files);
};
import * as fs from 'fs';
import * as path from 'path';
import {
getAngularCliWebpackConfigOptions,
getLeadingAngularCliProject,
} from '../angular-cli_config';

describe('angular-cli_config', () => {
describe('getAngularCliWebpackConfigOptions()', () => {
it('should return have empty `buildOptions.sourceMap` and `buildOptions.optimization` by default', () => {
setupFiles({ 'angular.json': angularJson });

const config = getAngularCliWebpackConfigOptions('/' as Path);

expect(config).toMatchObject({
buildOptions: {
sourceMap: {},
optimization: {},
},
});
it('should return have empty `buildOptions.sourceMap` and `buildOptions.optimization` by default', () => {
const config = getAngularCliWebpackConfigOptions(__dirname as Path);
expect(config).toMatchObject({
buildOptions: {
sourceMap: {},
optimization: {},
},
});
});

it('should use `storybook` project by default when project is defined', () => {
// Lazy clone example angular json
const overrideAngularJson = JSON.parse(stripJsonComments(angularJson));
// Add storybook project
overrideAngularJson.projects.storybook = {
architect: {
build: {
options: {
assets: [],
styles: ['custom/styles'],
},
it('should use `storybook` project by default when `storybook` project is defined', () => {
// Lazy clone example angular json
const angularJson = fs.readFileSync(path.resolve(__dirname, 'angular.json'), 'utf8');
const angularJsonWithStorybookProject = JSON.parse(stripJsonComments(angularJson));

// Add storybook project
angularJsonWithStorybookProject.projects.storybook = {
architect: {
build: {
options: {
assets: [],
styles: ['custom/styles'],
},
},
};

setupFiles({ 'angular.json': JSON.stringify(overrideAngularJson) });

const config = getAngularCliWebpackConfigOptions('/' as Path);

// Assure configuration matches values from `storybook` project
expect(config).toMatchObject({
buildOptions: {
assets: [],
styles: ['custom/styles'],
},
};

const projectConfig = getLeadingAngularCliProject(angularJsonWithStorybookProject);

// Assure configuration matches values from `storybook` project
expect(projectConfig).toMatchObject({
architect: {
build: {
options: {
assets: [],
styles: ['custom/styles'],
},
},
});
},
});
});
});
14 changes: 10 additions & 4 deletions app/angular/src/server/angular-cli_config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,24 +46,30 @@ function getTsConfigOptions(tsConfigPath: Path) {
return basicOptions;
}

export function getAngularCliWebpackConfigOptions(dirToSearch: Path) {
export function getAngularCliConfig(dirToSearch: string) {
const fname = path.join(dirToSearch, 'angular.json');

if (!fs.existsSync(fname)) {
return null;
}

const angularJson = JSON.parse(stripJsonComments(fs.readFileSync(fname, 'utf8')));
const { projects, defaultProject } = angularJson;
return JSON.parse(stripJsonComments(fs.readFileSync(fname, 'utf8')));
}

export function getLeadingAngularCliProject(ngCliConfig: any) {
const { defaultProject } = ngCliConfig;
const { projects }: any = ngCliConfig;
if (!projects || !Object.keys(projects).length) {
throw new Error('angular.json must have projects entry.');
}

const fallbackProject = defaultProject && projects[defaultProject];
const firstProject = projects[Object.keys(projects)[0]];
const project = projects.storybook || fallbackProject || firstProject;
return projects.storybook || fallbackProject || firstProject;
}

export function getAngularCliWebpackConfigOptions(dirToSearch: Path) {
const project = getLeadingAngularCliProject(getAngularCliConfig(dirToSearch));
const { options: projectOptions } = project.architect.build;

const normalizedAssets = normalizeAssetPatterns(
Expand Down
5 changes: 1 addition & 4 deletions app/angular/src/server/framework-preset-angular-cli.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,7 @@ import {
export function webpackFinal(config: Configuration) {
const cwd = process.cwd() as Path;
const cliWebpackConfigOptions = getAngularCliWebpackConfigOptions(cwd);

if (cliWebpackConfigOptions) {
logger.info('=> Loading angular-cli config.');
}
logger.info('=> Loading angular-cli config.');

return applyAngularCliWebpackConfig(config, cliWebpackConfigOptions);
}
38 changes: 9 additions & 29 deletions examples/angular-cli/angular.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
/* angular.json can have comments */
// angular.json can have comments
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"$schema": "../../node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
Expand All @@ -20,18 +20,10 @@
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"src/styles.scss"
],
"assets": ["src/favicon.ico", "src/assets"],
"styles": ["src/styles.css", "src/styles.scss"],
"stylePreprocessorOptions": {
"includePaths": [
"src/commons"
]
"includePaths": ["src/commons"]
},
"scripts": []
},
Expand Down Expand Up @@ -79,26 +71,16 @@
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"styles.css"
],
"styles": ["styles.css"],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
"assets": ["src/favicon.ico", "src/assets"]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
"tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
"exclude": ["**/node_modules/**"]
}
}
}
Expand All @@ -118,9 +100,7 @@
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
"exclude": ["**/node_modules/**"]
}
}
}
Expand Down
22 changes: 11 additions & 11 deletions examples/angular-cli/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,23 +18,23 @@
"test:watch": "jest --watch"
},
"dependencies": {
"@angular/common": "^7.2.6",
"@angular/compiler": "^7.2.6",
"@angular/core": "^7.2.6",
"@angular/forms": "^7.2.6",
"@angular/platform-browser": "^7.2.6",
"@angular/platform-browser-dynamic": "^7.2.6",
"@ngrx/store": "^7.2.0",
"@angular/common": "^8.2.8",
"@angular/compiler": "^8.2.8",
"@angular/core": "^8.2.8",
"@angular/forms": "^8.2.8",
"@angular/platform-browser": "^8.2.8",
"@angular/platform-browser-dynamic": "^8.2.8",
"@ngrx/store": "^8.2.0",
"core-js": "^3.0.1",
"node-sass": "^4.12.0",
"rxjs": "^6.3.3",
"rxjs-compat": "^6.4.0",
"zone.js": "^0.8.29"
"zone.js": "^0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.13.4",
"@angular/cli": "^7.3.6",
"@angular/compiler-cli": "^7.2.6",
"@angular-devkit/build-angular": "~0.803.6",
"@angular/cli": "^8.3.6",
"@angular/compiler-cli": "^8.2.8",
"@storybook/addon-a11y": "5.3.0-alpha.5",
"@storybook/addon-actions": "5.3.0-alpha.5",
"@storybook/addon-backgrounds": "5.3.0-alpha.5",
Expand Down
14 changes: 13 additions & 1 deletion examples/angular-cli/src/stories/ngrx-store.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,19 @@ class WithStoreComponent {
storiesOf('ngrx|Store', module)
.addDecorator(
moduleMetadata({
imports: [StoreModule.forRoot({})],
imports: [
StoreModule.forRoot(
{},
{
runtimeChecks: {
strictStateImmutability: true,
strictActionImmutability: true,
strictStateSerializability: true,
strictActionSerializability: true,
},
}
),
],
declarations: [WithStoreComponent],
})
)
Expand Down
14 changes: 7 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -116,12 +116,12 @@
},
"browserslist": "defaults",
"devDependencies": {
"@angular/common": "^7.2.6",
"@angular/compiler": "^7.2.6",
"@angular/core": "^7.2.6",
"@angular/forms": "^7.2.6",
"@angular/platform-browser": "^7.2.6",
"@angular/platform-browser-dynamic": "^7.2.6",
"@angular/common": "^8.2.8",
"@angular/compiler": "^8.2.8",
"@angular/core": "^8.2.8",
"@angular/forms": "^8.2.8",
"@angular/platform-browser": "^8.2.8",
"@angular/platform-browser-dynamic": "^8.2.8",
"@babel/cli": "^7.2.3",
"@babel/core": "^7.3.4",
"@babel/plugin-proposal-class-properties": "^7.3.3",
Expand Down Expand Up @@ -158,7 +158,6 @@
"codecov": "^3.5.0",
"codelyzer": "^5.0.0",
"commander": "^2.19.0",
"ts-dedent": "^1.1.0",
"concurrently": "^4.0.1",
"core-js": "^3.0.1",
"corejs-upgrade-webpack-plugin": "^2.2.0",
Expand Down Expand Up @@ -212,6 +211,7 @@
"svelte": "^3.4.1",
"svelte-jest": "^0.2.0",
"trash": "^6.0.0",
"ts-dedent": "^1.1.0",
"ts-jest": "^24.0.2",
"typescript": "^3.4.0",
"weak": "^1.0.1"
Expand Down
Loading

1 comment on commit 2ebcb6c

@vercel
Copy link

@vercel vercel bot commented on 2ebcb6c Sep 28, 2019

Choose a reason for hiding this comment

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

Please sign in to comment.