From 26ba3153297dcf8592ea5095ad7ecd5ca517bacc Mon Sep 17 00:00:00 2001 From: Yasin Kocak <> Date: Sun, 5 May 2019 21:52:30 +0200 Subject: [PATCH] Initial commit --- composer.json | 25 +++++++ readme.md | 27 ++++++++ src/AngularPreset.php | 92 ++++++++++++++++++++++++++ src/AngularPresetServiceProvider.php | 23 +++++++ src/angular-stubs/app/app.component.ts | 13 ++++ src/angular-stubs/app/app.module.ts | 15 +++++ src/angular-stubs/app/environment.ts | 3 + src/angular-stubs/app/main.ts | 12 ++++ src/angular-stubs/app/tsconfig.json | 22 ++++++ src/angular-stubs/app/tslint.json | 75 +++++++++++++++++++++ src/angular-stubs/polyfills.ts | 31 +++++++++ src/angular-stubs/tsconfig.json | 9 +++ src/angular-stubs/vendor.ts | 10 +++ src/angular-stubs/webpack.mix.js | 24 +++++++ 14 files changed, 381 insertions(+) create mode 100644 composer.json create mode 100644 readme.md create mode 100644 src/AngularPreset.php create mode 100644 src/AngularPresetServiceProvider.php create mode 100644 src/angular-stubs/app/app.component.ts create mode 100644 src/angular-stubs/app/app.module.ts create mode 100644 src/angular-stubs/app/environment.ts create mode 100644 src/angular-stubs/app/main.ts create mode 100644 src/angular-stubs/app/tsconfig.json create mode 100644 src/angular-stubs/app/tslint.json create mode 100644 src/angular-stubs/polyfills.ts create mode 100644 src/angular-stubs/tsconfig.json create mode 100644 src/angular-stubs/vendor.ts create mode 100644 src/angular-stubs/webpack.mix.js diff --git a/composer.json b/composer.json new file mode 100644 index 0000000..910716f --- /dev/null +++ b/composer.json @@ -0,0 +1,25 @@ +{ + "name": "yasinkocak/laravel-angular-preset", + "description": "Laravel Angular preset", + "keywords": [ + "laravel", + "preset", + "angular" + ], + "license": "MIT", + "require": { + "laravel/framework": "5.8.*" + }, + "autoload": { + "psr-4": { + "YasinKocak\\AngularPreset\\": "src/" + } + }, + "extra": { + "laravel": { + "providers": [ + "YasinKocak\\AngularPreset\\AngularPresetServiceProvider" + ] + } + } +} diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..8bd009c --- /dev/null +++ b/readme.md @@ -0,0 +1,27 @@ +# Laravel Angular Preset + +A simple and easy Angular 7 scaffolding so you can quickly get started creating your next app idea with Laravel Mix. + +## Installation + +Add the package in your composer.json by executing the command. + +``` +composer require yasinkocak/laravel-angular-preset +``` + +## Usage + +The Angular preset command can be initialized through Artisan: + +``` +php artisan preset angular +``` + +After running, this will replace out the Vue.js scaffolding with Angular. This includes the default Mix configuration, components, and any other related files + +Please run command to compile your fresh scaffolding: + +``` +npm install && npm run dev +``` diff --git a/src/AngularPreset.php b/src/AngularPreset.php new file mode 100644 index 0000000..23647d8 --- /dev/null +++ b/src/AngularPreset.php @@ -0,0 +1,92 @@ +deleteDirectory(resource_path('js/components')); + $filesystem->makeDirectory(resource_path('ts')); + $filesystem->makeDirectory(resource_path('ts/app')); + $filesystem->makeDirectory(resource_path('ts/environments')); + }); + + static::removeNodeModules(); + static::updateAngular(); + } + + /** + * Update the given package array. + * + * @param array $packages + * @return array + */ + protected static function updatePackageArray(array $packages) + { + return [ + '@angular/animations' => '^7.2.0', + '@angular/common' => '^7.2.0', + '@angular/compiler' => '^7.2.0', + '@angular/core' => '^7.2.0', + '@angular/forms' => '^7.2.0', + '@angular/http' => '^7.2.0', + '@angular/platform-browser' => '^7.2.0', + '@angular/platform-browser-dynamic' => '^7.2.0', + '@angular/router' => '^7.2.0', + '@types/node' => '^12.0.0', + 'core-js' => '^2.5.4', + 'rxjs' => '^6.3.3', + 'ts-loader' => '^5.4.5', + 'tslib'=> '^1.9.0', + 'typescript' => '~3.2.2', + 'zone.js' => '^0.8.26', + ] + Arr::except($packages, [ + 'axios', + 'jquery', + 'vue-template-compiler', + 'vue', + ]); + } + + /** + * Update the Webpack configuration. + * + * @return void + */ + protected static function updateWebpackConfiguration() + { + copy(__DIR__ . '/angular-stubs/webpack.mix.js', base_path('webpack.mix.js')); + } + + /** + * Update the Angular files. + * + * @return void + */ + protected static function updateAngular() + { + copy(__DIR__ . '/angular-stubs/app/main.ts', resource_path('ts/main.ts')); + copy(__DIR__ . '/angular-stubs/app/app.module.ts', resource_path('ts/app/app.module.ts')); + copy(__DIR__ . '/angular-stubs/app/app.component.ts', resource_path('ts/app/app.component.ts')); + copy(__DIR__ . '/angular-stubs/app/environment.ts', resource_path('ts/environments/environment.ts')); + copy(__DIR__ . '/angular-stubs/app/tsconfig.json', resource_path('ts/tsconfig.json')); + copy(__DIR__ . '/angular-stubs/app/tslint.json', resource_path('ts/tslint.json')); + copy(__DIR__ . '/angular-stubs/polyfills.ts', resource_path('ts/polyfills.ts')); + copy(__DIR__ . '/angular-stubs/vendor.ts', resource_path('ts/vendor.ts')); + copy(__DIR__ . '/angular-stubs/tsconfig.json', base_path('tsconfig.json')); + } +} diff --git a/src/AngularPresetServiceProvider.php b/src/AngularPresetServiceProvider.php new file mode 100644 index 0000000..1595729 --- /dev/null +++ b/src/AngularPresetServiceProvider.php @@ -0,0 +1,23 @@ +info('Angular scaffolding installed successfully.'); + $command->comment('Please run "npm install && npm run dev" to compile your fresh scaffolding.'); + }); + } +} diff --git a/src/angular-stubs/app/app.component.ts b/src/angular-stubs/app/app.component.ts new file mode 100644 index 0000000..f7f3863 --- /dev/null +++ b/src/angular-stubs/app/app.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + template: '

{{ title }}

', +}) +export class AppComponent { + title = 'Laravel & Angular'; + + ngOnInit(): void { + console.log('Bootstrapped' + this.title + ' with Laravel Mix '); + } +} diff --git a/src/angular-stubs/app/app.module.ts b/src/angular-stubs/app/app.module.ts new file mode 100644 index 0000000..d30b4b8 --- /dev/null +++ b/src/angular-stubs/app/app.module.ts @@ -0,0 +1,15 @@ +import { BrowserModule } from '@angular/platform-browser'; +import { NgModule } from '@angular/core'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ + AppComponent + ], + imports: [ + BrowserModule + ], + bootstrap: [AppComponent] +}) +export class AppModule { } diff --git a/src/angular-stubs/app/environment.ts b/src/angular-stubs/app/environment.ts new file mode 100644 index 0000000..1d0edfd --- /dev/null +++ b/src/angular-stubs/app/environment.ts @@ -0,0 +1,3 @@ +export const environment = { + production: false +}; diff --git a/src/angular-stubs/app/main.ts b/src/angular-stubs/app/main.ts new file mode 100644 index 0000000..c8847c0 --- /dev/null +++ b/src/angular-stubs/app/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.log(err)); diff --git a/src/angular-stubs/app/tsconfig.json b/src/angular-stubs/app/tsconfig.json new file mode 100644 index 0000000..0921176 --- /dev/null +++ b/src/angular-stubs/app/tsconfig.json @@ -0,0 +1,22 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "module": "es2015", + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "importHelpers": true, + "target": "es5", + "typeRoots": [ + "node_modules/@types" + ], + "lib": [ + "es2018", + "dom" + ] + } +} diff --git a/src/angular-stubs/app/tslint.json b/src/angular-stubs/app/tslint.json new file mode 100644 index 0000000..e5d942c --- /dev/null +++ b/src/angular-stubs/app/tslint.json @@ -0,0 +1,75 @@ +{ + "extends": "tslint:recommended", + "rulesDirectory": [ + "codelyzer" + ], + "rules": { + "array-type": false, + "arrow-parens": false, + "deprecation": { + "severity": "warn" + }, + "import-blacklist": [ + true, + "rxjs/Rx" + ], + "interface-name": false, + "max-classes-per-file": false, + "max-line-length": [ + true, + 140 + ], + "member-access": false, + "member-ordering": [ + true, + { + "order": [ + "static-field", + "instance-field", + "static-method", + "instance-method" + ] + } + ], + "no-consecutive-blank-lines": false, + "no-console": [ + true, + "debug", + "info", + "time", + "timeEnd", + "trace" + ], + "no-empty": false, + "no-inferrable-types": [ + true, + "ignore-params" + ], + "no-non-null-assertion": true, + "no-redundant-jsdoc": true, + "no-switch-case-fall-through": true, + "no-use-before-declare": true, + "no-var-requires": false, + "object-literal-key-quotes": [ + true, + "as-needed" + ], + "object-literal-sort-keys": false, + "ordered-imports": false, + "quotemark": [ + true, + "single" + ], + "trailing-comma": false, + "no-output-on-prefix": true, + "use-input-property-decorator": true, + "use-output-property-decorator": true, + "use-host-property-decorator": true, + "no-input-rename": true, + "no-output-rename": true, + "use-life-cycle-interface": true, + "use-pipe-transform-interface": true, + "component-class-suffix": true, + "directive-class-suffix": true + } +} diff --git a/src/angular-stubs/polyfills.ts b/src/angular-stubs/polyfills.ts new file mode 100644 index 0000000..176d0bc --- /dev/null +++ b/src/angular-stubs/polyfills.ts @@ -0,0 +1,31 @@ +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +import 'core-js/es6/symbol'; +import 'core-js/es6/object'; +import 'core-js/es6/function'; +import 'core-js/es6/parse-int'; +import 'core-js/es6/parse-float'; +import 'core-js/es6/number'; +import 'core-js/es6/math'; +import 'core-js/es6/string'; +import 'core-js/es6/date'; +import 'core-js/es6/array'; +import 'core-js/es6/regexp'; +import 'core-js/es6/map'; +import 'core-js/es6/weak-map'; +import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +import 'core-js/es6/reflect'; + + +/** Evergreen browsers require these. **/ +// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. +import 'core-js/es7/reflect'; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. diff --git a/src/angular-stubs/tsconfig.json b/src/angular-stubs/tsconfig.json new file mode 100644 index 0000000..e356df0 --- /dev/null +++ b/src/angular-stubs/tsconfig.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "module": "commonjs", + "target": "es5", + "noImplicitAny": false, + "sourceMap": false + }, + "include": ["resources/ts/**/*"] +} diff --git a/src/angular-stubs/vendor.ts b/src/angular-stubs/vendor.ts new file mode 100644 index 0000000..2acfa87 --- /dev/null +++ b/src/angular-stubs/vendor.ts @@ -0,0 +1,10 @@ +// Angular +import '@angular/platform-browser'; +import '@angular/platform-browser-dynamic'; +import '@angular/core'; +import '@angular/common'; +import '@angular/http'; +import '@angular/router'; + +// RxJS +import 'rxjs'; diff --git a/src/angular-stubs/webpack.mix.js b/src/angular-stubs/webpack.mix.js new file mode 100644 index 0000000..e297c6a --- /dev/null +++ b/src/angular-stubs/webpack.mix.js @@ -0,0 +1,24 @@ +const mix = require('laravel-mix'); + +/* + |-------------------------------------------------------------------------- + | Mix Asset Management + |-------------------------------------------------------------------------- + | + | Mix provides a clean, fluent API for defining some Webpack build steps + | for your Laravel application. By default, we are compiling the Sass + | file for the application as well as bundling up all the JS files. + | + */ +mix.ts([ + 'resources/js/app.js', // Can deleted if no needed + 'resources/ts/vendor.ts', + 'resources/ts/polyfills.ts', +], 'public/js/vendor.js'); + +mix.ts([ + 'resources/ts/main.ts' +], 'public/js/app.js').version(); + +mix.sass('resources/sass/app.scss', 'public/css'); + \ No newline at end of file