How is the SharePoint FX's integration with Angular? - sharepoint

Question

How is the SharePoint FX's integration with Angular? I know it has good support for React, but want to know the pros and cons of SharePoint Framework with Angular 6+

Answer 1

Lets update some of the files for Angular to work with SharePoint Framework.
package.json
"#angular/common": "^6.0.3",
"#angular/compiler": "^6.0.3",
"#angular/core": "^6.0.3",
"#angular/elements": "^6.0.3",
"#angular/platform-browser": "^6.0.3",
"#angular/platform-browser-dynamic": "^6.0.3",
"#webcomponents/custom-elements": "^1.1.1",
"core-js": "^2.5.7",
"rxjs": "^6.2.0",
"zone.js": "^0.8.26"
tsconfig.json
This is the TypeScript configuration file for the IDE. Open tsconfig.json file, add below line under "compilerOptions".
"emitDecoratorMetadata": true,
gulpfile.js
This file defines all the tasks for the project like compiling TypeScript files to JavaScript, bundle and minify JS/CSS files etc. We need to modify the build process. Open "gulpfile.js" file and add below code just above the "build.initialize" line.
const webpack = require('webpack');
const path = require('path');
build.configureWebpack.mergeConfig({
additionalConfiguration: (generatedConfiguration) => {
generatedConfiguration.plugins.push(new webpack.ContextReplacementPlugin(/\#angular(\\|\/)core(\\|\/)fesm5/, path.join(__dirname, './client')));
return generatedConfiguration;
}
});
Here are two solution with source code about use Angular 6 in SharePoint framework for your reference.
Angular Demo Webpart
Angular Elements in SharePoint Framework