nativescript-schematics
nativescript-schematics copied to clipboard
NativeScript
Nativescript Angular code sharing project doesn't build with webpack version 5
Environment
{
"name": "housters",
"main": "main.tns.js",
"version": "7.00.01",
"scripts": {
"ng start": "ng serve",
"ng build": "ng build",
"lint": "eslint --fix src/ && stylelint \"src/**/*.scss\" --fix && prettier --write src/",
"android": "tns run android --no-hmr",
"ios": "tns run ios --provision hstr-dv --no-hmr",
"ios-phone": "tns run ios --provision hstr-dv --no-hmr --device `node build-scripts/find-identifier.js \"iPhone\"`",
"ios-tablet": "tns run ios --provision hstr-dv --no-hmr --device `node build-scripts/find-identifier.js \"iPad\"",
"ios-connected-device": "tns run ios --provision hstr-dv --no-hmr --device `node build-scripts/find-identifier.js first-connected-device`",
"preview": "tns preview",
"sync": "gaffer-generator generate"
},
"private": true,
"lint-staged": {
"*.(ts|js)": [
"eslint --fix",
"prettier --write"
],
"*.(css|scss)": [
"stylelint --fix",
"prettier --write"
]
},
"dependencies": {
"@angular/animations": "^12.2.5",
"@angular/common": "^12.2.5",
"@angular/compiler": "^12.2.5",
"@angular/core": "^12.2.5",
"@angular/forms": "^12.2.5",
"@angular/platform-browser": "^12.2.5",
"@angular/platform-browser-dynamic": "^12.2.5",
"@angular/router": "^12.2.5",
"@codelab/nativescript-multi-select": "^2.0.1",
"@nativescript/angular": "^12.2.0",
"@nativescript/background-http": "^5.0.2",
"@nativescript/camera": "^5.0.9",
"@nativescript/core": "^8.1.5",
"@nativescript/datetimepicker": "^2.1.9",
"@nativescript/firebase": "^11.1.3",
"@nativescript/imagepicker": "^1.0.5",
"@nativescript/theme": "^3.0.2",
"@triniwiz/nativescript-pager": "^13.0.2",
"@triniwiz/nativescript-stripe": "^7.0.1",
"@types/crypto-js": "^4.0.2",
"bootstrap": "^4.6.1",
"core-js": "^2.6.12",
"crypto-js": "3.3.0",
"dayjs": "^1.10.7",
"jquery": "^3.5.1",
"nativescript-drop-down": "^6.0.0",
"nativescript-fingerprint-auth": "^7.0.2",
"nativescript-iqkeyboardmanager": "^1.5.1",
"nativescript-localstorage": "^2.0.2",
"nativescript-purchase": "^2.0.14",
"nativescript-ratings": "^1.0.1",
"nativescript-ui-chart": "^8.0.2",
"nativescript-ui-listview": "^9.1.4",
"ngx-device-detector": "^2.1.1",
"node-fetch": "^2.6.6",
"reflect-metadata": "~0.1.13",
"rxjs": "~7.3.0",
"sass": "^1.43.4",
"tslib": "~2.1.0",
"zone.js": "~0.11.3"
},
"devDependencies": {
"@angular/cli": "~11.1.3",
"@angular/compiler-cli": "^12.2.5",
"@nativescript/android": "~8.1.1",
"@nativescript/ios": "~8.1.0",
"@nativescript/webpack": "^5.0.1",
"@types/jasmine": "^3.10.2",
"@types/jasminewd2": "^2.0.10",
"@types/node": "^14.17.33",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"codelyzer": "^6.0.2",
"dotenv": "^8.6.0",
"eslint": "^7.32.0",
"eslint-plugin-nativescript": "0.0.0",
"eslint-plugin-prettier": "^3.4.1",
"gaffer-generator": "^1.2.5",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~6.0.0",
"karma": "~6.1.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~4.0.1",
"karma-jasmine-html-reporter": "^1.7.0",
"lint-staged": "^10.5.4",
"lodash": "^4.17.20",
"prettier": "2.2.1",
"protractor": "~7.0.0",
"stylelint": "^13.13.1",
"stylelint-config-sass-guidelines": "^8.0.0",
"stylelint-config-standard": "^20.0.0",
"stylelint-declaration-use-variable": "^1.7.3",
"ts-node": "~9.1.1",
"typescript": "~4.3.5",
"@ngtools/webpack": "~10.0.0"
}
}
Describe the bug When upgrading from @nativescript/webpack v4 to v5, the code sharing webpack.config.js script no longer builds. Many of the imported functions no longer exist.
To Reproduce Here is the webpack.config.js that I was using that worked with v4:
const dotenvResult = require('dotenv').config();
const { join, relative, resolve, sep, dirname } = require('path');
const fs = require('fs');
const webpack = require('webpack');
const nsWebpack = require('@nativescript/webpack');
const nativescriptTarget = require('@nativescript/webpack/nativescript-target');
const { nsSupportHmrNg } = require('@nativescript/webpack/transformers/ns-support-hmr-ng');
const { nsTransformNativeClassesNg } = require('@nativescript/webpack/transformers/ns-transform-native-classes-ng');
const { parseWorkspaceConfig, hasConfigurations } = require('@nativescript/webpack/helpers/angular-config-parser');
const { getMainModulePath } = require('@nativescript/webpack/utils/ast-utils');
const { getNoEmitOnErrorFromTSConfig, getCompilerOptionsFromTSConfig } = require('@nativescript/webpack/utils/tsconfig-utils');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const { NativeScriptWorkerPlugin } = require('nativescript-worker-loader/NativeScriptWorkerPlugin');
const TerserPlugin = require('terser-webpack-plugin');
const { getAngularCompilerPlugin } = require('@nativescript/webpack/plugins/NativeScriptAngularCompilerPlugin');
const hashSalt = Date.now().toString();
module.exports = env => {
// Add your custom Activities, Services and other Android app components here.
const appComponents = ['@nativescript/core/ui/frame', '@nativescript/core/ui/frame/activity'];
const platform = env && ((env.android && 'android') || (env.ios && 'ios'));
if (!platform) {
throw new Error('You need to provide a target platform!');
}
const AngularCompilerPlugin = getAngularCompilerPlugin(platform);
const projectRoot = __dirname;
// Default destination inside platforms/<platform>/...
const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
const {
// The 'appPath' and 'appResourcesPath' values are fetched from
// the nsconfig.json configuration file
// when bundling with `tns run android|ios --bundle`.
appPath = 'src',
appResourcesPath = 'App_Resources',
// You can provide the following flags when running 'tns run android|ios'
snapshot, // --env.snapshot,
production, // --env.production
configuration, // --env.configuration (consistent with angular cli usage)
projectName, // --env.projectName (drive configuration through angular projects)
uglify, // --env.uglify
report, // --env.report
sourceMap, // --env.sourceMap
hiddenSourceMap, // --env.hiddenSourceMap
hmr, // --env.hmr,
unitTesting, // --env.unitTesting
testing, // --env.testing
verbose, // --env.verbose
ci, // --env.ci
snapshotInDocker, // --env.snapshotInDocker
skipSnapshotTools, // --env.skipSnapshotTools
compileSnapshot, // --env.compileSnapshot
} = env;
const { fileReplacements, copyReplacements } = parseWorkspaceConfig(platform, configuration, projectName);
const useLibs = compileSnapshot;
const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
const externals = nsWebpack.getConvertedExternals(env.externals);
const appFullPath = resolve(projectRoot, appPath);
const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
let tsConfigName = 'tsconfig.json';
let tsConfigPath = resolve(projectRoot, tsConfigName);
const tsConfigTnsName = 'tsconfig.tns.json';
const tsConfigTnsPath = resolve(projectRoot, tsConfigTnsName);
if (fs.existsSync(tsConfigTnsPath)) {
// support shared angular app configurations
tsConfigName = tsConfigTnsName;
tsConfigPath = tsConfigTnsPath;
}
const tsConfigEnvName = 'tsconfig.env.json';
const tsConfigEnvPath = resolve(projectRoot, tsConfigEnvName);
if (hasConfigurations(configuration) && fs.existsSync(tsConfigEnvPath)) {
// when configurations are used, switch to environments supported config
tsConfigName = tsConfigEnvName;
tsConfigPath = tsConfigEnvPath;
}
const entryModule = `${nsWebpack.getEntryModule(appFullPath, platform)}.ts`;
const entryPath = `.${sep}${entryModule}`;
const entries = { bundle: entryPath };
const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf('@nativescript') > -1);
if (platform === 'ios' && !areCoreModulesExternal && !testing) {
entries['tns_modules/@nativescript/core/inspector_modules'] = 'inspector_modules';
}
const compilerOptions = getCompilerOptionsFromTSConfig(tsConfigPath);
nsWebpack.processTsPathsForScopedModules({ compilerOptions });
nsWebpack.processTsPathsForScopedAngular({ compilerOptions });
const ngCompilerTransformers = [nsTransformNativeClassesNg];
const additionalLazyModuleResources = [];
const copyIgnore = { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] };
const copyTargets = [
{ from: 'assets/**', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
{ from: 'fonts/**', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
...copyReplacements,
];
if (!production) {
// for development purposes only
// for example, include mock json folder
// copyTargets.push({ from: 'tools/mockdata', to: 'assets/mockdata' });
if (hmr) {
ngCompilerTransformers.push(nsSupportHmrNg);
}
}
// when "@angular/core" is external, it's not included in the bundles. In this way, it will be used
// directly from node_modules and the Angular modules loader won't be able to resolve the lazy routes
// fixes https://github.com/NativeScript/nativescript-cli/issues/4024
if (env.externals && env.externals.indexOf('@angular/core') > -1) {
const appModuleRelativePath = getMainModulePath(resolve(appFullPath, entryModule), tsConfigName);
if (appModuleRelativePath) {
const appModuleFolderPath = dirname(resolve(appFullPath, appModuleRelativePath));
// include the new lazy loader path in the allowed ones
additionalLazyModuleResources.push(appModuleFolderPath);
}
}
const ngCompilerPlugin = new AngularCompilerPlugin({
hostReplacementPaths: nsWebpack.getResolver([platform, 'tns']),
platformTransformers: ngCompilerTransformers.map(t => t(() => ngCompilerPlugin, resolve(appFullPath, entryModule), projectRoot)),
mainPath: join(appFullPath, entryModule),
tsConfigPath,
skipCodeGeneration: false,
sourceMap: !!isAnySourceMapEnabled,
additionalLazyModuleResources: additionalLazyModuleResources,
compilerOptions: { paths: compilerOptions.paths },
});
let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist);
const itemsToClean = [`${dist}/**/*`];
if (platform === 'android') {
itemsToClean.push(`${join(projectRoot, 'platforms', 'android', 'app', 'src', 'main', 'assets', 'snapshots')}`);
itemsToClean.push(
`${join(projectRoot, 'platforms', 'android', 'app', 'build', 'configurations', 'nativescript-android-snapshot')}`,
);
}
const noEmitOnErrorFromTSConfig = getNoEmitOnErrorFromTSConfig(tsConfigName);
nsWebpack.processAppComponents(appComponents, platform);
const config = {
mode: production ? 'production' : 'development',
context: appFullPath,
externals,
watchOptions: {
ignored: [
appResourcesFullPath,
// Don't watch hidden files
'**/.*',
],
},
target: nativescriptTarget,
entry: entries,
output: {
pathinfo: false,
path: dist,
sourceMapFilename,
libraryTarget: 'commonjs2',
filename: '[name].js',
globalObject: 'global',
hashSalt,
},
resolve: {
extensions: ['.ts', '.js', '.scss', '.css'],
// Resolve {N} system modules from @nativescript/core
modules: [
resolve(__dirname, 'node_modules/@nativescript/core'),
resolve(__dirname, 'node_modules'),
'node_modules/@nativescript/core',
'node_modules',
],
alias: {
'~/package.json': resolve(projectRoot, 'package.json'),
'~': appFullPath,
'tns-core-modules': '@nativescript/core',
'nativescript-angular': '@nativescript/angular',
...fileReplacements,
},
symlinks: true,
},
resolveLoader: {
symlinks: false,
},
node: {
// Disable node shims that conflict with NativeScript
http: false,
timers: false,
setImmediate: false,
fs: 'empty',
__dirname: false,
},
devtool: hiddenSourceMap ? 'hidden-source-map' : sourceMap ? 'inline-source-map' : 'none',
optimization: {
runtimeChunk: 'single',
noEmitOnErrors: noEmitOnErrorFromTSConfig,
splitChunks: {
cacheGroups: {
vendor: {
name: 'vendor',
chunks: 'all',
test: (module, chunks) => {
const moduleName = module.nameForCondition ? module.nameForCondition() : '';
return /[\\/]node_modules[\\/]/.test(moduleName) || appComponents.some(comp => comp === moduleName);
},
enforce: true,
},
},
},
minimize: !!uglify,
minimizer: [
new TerserPlugin({
parallel: true,
cache: !ci,
sourceMap: isAnySourceMapEnabled,
terserOptions: {
output: {
comments: false,
semicolons: !isAnySourceMapEnabled,
},
compress: {
// The Android SBG has problems parsing the output
// when these options are enabled
collapse_vars: platform !== 'android',
sequences: platform !== 'android',
// custom
drop_console: true,
drop_debugger: true,
ecma: 6,
keep_infinity: platform === 'android', // for Chrome/V8
reduce_funcs: platform !== 'android', // for Chrome/V8
global_defs: {
__UGLIFIED__: true,
},
},
// custom
ecma: 6,
safari10: platform !== 'android',
},
}),
],
},
module: {
rules: [
{
include: join(appFullPath, entryPath),
use: [
// Require all Android app components
platform === 'android' && {
loader: '@nativescript/webpack/helpers/android-app-components-loader',
options: { modules: appComponents },
},
{
loader: '@nativescript/webpack/bundle-config-loader',
options: {
angular: true,
loadCss: !snapshot, // load the application css if in debug mode
unitTesting,
appFullPath,
projectRoot,
ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform),
},
},
].filter(loader => !!loader),
},
{ test: /\.html$|\.xml$/, use: 'raw-loader' },
{
test: /[\/|\\]app\.css$/,
use: [
'@nativescript/webpack/helpers/style-hot-loader',
{
loader: '@nativescript/webpack/helpers/css2json-loader',
options: { useForImports: true },
},
],
},
{
test: /[\/|\\]app\.scss$/,
use: [
'@nativescript/webpack/helpers/style-hot-loader',
{
loader: '@nativescript/webpack/helpers/css2json-loader',
options: { useForImports: true },
},
'sass-loader',
],
},
// Angular components reference css files and their imports using raw-loader
{ test: /\.css$/, exclude: /[\/|\\]app\.css$/, use: 'raw-loader' },
{
test: /\.scss$/,
exclude: /[\/|\\]app\.scss$/,
use: ['raw-loader', 'resolve-url-loader', 'sass-loader'],
},
{
test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
use: [
'@nativescript/webpack/helpers/moduleid-compat-loader',
'@nativescript/webpack/helpers/lazy-ngmodule-hot-loader',
'@ngtools/webpack',
],
},
// Mark files inside `@angular/core` as using SystemJS style dynamic imports.
// Removing this will cause deprecation warnings to appear.
{
test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
parser: { system: true },
},
],
},
plugins: [
// Define useful constants like TNS_WEBPACK
new webpack.DefinePlugin({
'global.TNS_WEBPACK': 'true',
'global.isAndroid': platform === 'android',
'global.isIOS': platform === 'ios',
'global.env': JSON.stringify(dotenvResult.parsed),
process: 'global.process',
}),
// Remove all files from the out dir.
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: itemsToClean,
verbose: !!verbose,
}),
// Copy assets
new CopyWebpackPlugin({
patterns: copyTargets,
}),
new nsWebpack.GenerateNativeScriptEntryPointsPlugin('bundle'),
// For instructions on how to set up workers with webpack
// check out https://github.com/nativescript/worker-loader
new NativeScriptWorkerPlugin(),
ngCompilerPlugin,
// Does IPC communication with the {N} CLI to notify events when running in watch mode.
new nsWebpack.WatchStateLoggerPlugin(),
],
};
if (report) {
// Generate report files for bundles content
config.plugins.push(
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false,
generateStatsFile: true,
reportFilename: resolve(projectRoot, 'report', `report.html`),
statsFilename: resolve(projectRoot, 'report', `stats.json`),
}),
);
}
if (snapshot) {
config.plugins.push(
new nsWebpack.NativeScriptSnapshotPlugin({
chunk: 'vendor',
angular: true,
requireModules: [
'reflect-metadata',
'@angular/platform-browser',
'@angular/core',
'@angular/common',
'@angular/router',
'@nativescript/angular',
],
projectRoot,
webpackConfig: config,
snapshotInDocker,
skipSnapshotTools,
useLibs,
}),
);
}
if (!production && hmr) {
config.plugins.push(new webpack.HotModuleReplacementPlugin());
}
return config;
};
Expected behavior
That nativescript angular code sharing would work with webpack version 5. Basically, we need a new sample webpack.config.js file that works with v5.
