How to enable SWC Aliased imports in Next JS? - next.js

Upgrading from babel to SWC. I deleted the .babelrc file but now the path aliases are no longer recognized in my project. Tried to restore this with a .swrc
.swrc
{
"jsc": {
"target": "ES2017",
"baseUrl": ".",
"paths": {
"#components/*": ["./components/*"]
}
}
}
tsconfig.json
{
"compilerOptions": {
"target": "ES2017",
"lib": ["es6", "dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "ESNEXT",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"baseUrl": ".",
"paths": {
"#components/*": ["./components/*"],
}
},
"exclude": ["node_modules", "**/*.stories.tsx"],
"include": ["**/*.ts", "**/*.tsx", "next-env.d.ts", "next.config.js"]
}
14:24 Error: Unable to resolve path to module '#components/NavBar'
.eslintrc.json
{
"root": true,
"parser": "#typescript-eslint/parser",
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:jsx-a11y/recommended",
"plugin:react-hooks/recommended"
],
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"plugins": [
"#typescript-eslint", "react", "prettier"
],
"rules": {
"prefer-const": "off",
"import/extensions": "off",
"jsx-a11y/anchor-is-valid": "off",
"import/no-cycle": [0, { "ignoreExternal": true }],
"prettier/prettier": ["error", { "endOfLine": "auto" }],
"react/prop-types": "off",
"react-hooks/exhaustive-deps": "off",
"react/no-unescaped-entities": "off",
"react/jsx-filename-extension": [1, { "extensions": [".ts", ".tsx"] }],
"react/jsx-props-no-spreading": ["error", { "html": "ignore", "custom": "ignore", "exceptions": [""] }],
// needed because of https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-use-before-define.md#how-to-use & https://stackoverflow.com/questions/63818415/react-was-used-before-it-was-defined
"no-use-before-define": "off",
"#typescript-eslint/no-use-before-define": [
"error",
{ "functions": false, "classes": false, "variables": true }
],
"#typescript-eslint/ban-ts-comment": "off",
"#typescript-eslint/no-explicit-any": "off"
},
"settings": {
"import/resolver": {
"babel-module": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
}
old .babelrc
{
"presets": ["next/babel"],
"plugins": [
[
"module-resolver",
{
"root": ["./"],
"alias": {
"#components": "./components",
"#api": "./api",
"#models": "./models",
"#screens": "./screens",
"#hooks": "./hooks",
"#services": "./services",
"#constants": "./constants",
"#context": "./context",
"#queries": "./queries",
"#data": "./data",
"#typeDefs": "./types",
"#generated": "./generated",
"#utils": "./utils",
"#pages": "./pages",
"#public": "./public"
}
}
]
]
}

Was able to solve this with a few tweaks.
Remove the import/resolver section of .eslintrc.json
Extend next in eslint.

Related

Stylelint not linting component.module.scss in Next.js

I two projects, one with React (v17.0.2) and the other with Next.js (v11.1.0) In both I
have implemented ESlint with Prettier and Stylelint.
My problem is that in React project everything is working smoothly and fine, however in Next.js project, stylelint is not linting component.modules.scss files (but other.css files are).
In React, scss files are in ./src/assets/scss/*
in Next.js scss files are in ./styles/*
These are the config files content:
.eslintrc.json
{
"settings": {
"react": {
"version": "detect"
}
},
"plugins": [
"react",
"react-hooks",
"jsx-a11y",
"only-warn",
"prettier"
],
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 2021,
"ecmaFeature": {
"jsx": true,
"modules": true
}
},
"env": {
"browser": true,
"jest": true,
"es2021": true,
"node": true
},
"parser": "babel-eslint",
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:prettier/recommended",
"next"
],
"rules": {
"camelcase": "off",
"react/prop-types": "off",
"react/jsx-curly-newline": ["off", "consistent"],
"react/jsx-handler-names": "off",
"react/display-name": ["off"],
"prettier/prettier": "error",
"arrow-body-style": "off",
"prefer-arrow-callback": "off"
}
}
.prettierrc
{
"singleQuote": true,
"trailingComma": "all",
"parser": "flow",
"semi": false,
"useTabs": false,
"editor.formatOnSave": true,
"stylelintIntegration": true
}
.stylelintrc.json
{
"extends": "stylelint-config-sass-guidelines",
"plugins": [
"stylelint-scss"
],
"rules": {
"at-rule-no-unknown": null,
"scss/at-rule-no-unknown": true,
"indentation": 2,
"number-leading-zero": null,
"max-nesting-depth": 10
}
}
Any help please? Thanks
I found what was wrong;
Need to add this in .vscode/settings.json
"stylelint.validate": ["css", "scss", ".module.scss"]
.module.scss was not considered as .scss, so adding it to the config made everything works

You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

I've recently updated from Angular 11 to Angular 12 and have got issues with parsing the CSS.
I've followed each of the options from the following:
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser after Angular 12 update
I've added this to my optimization within my angular.json file.
"optimization": {
"scripts": true,
"styles": {
"minify": false,
"inlineCritical": false
},
"fonts": true
},
I've added
"inlineStyleLanguage": "scss"
As my default style language.
And I'm still getting the following error for each of my scss files:
I've included my angular.json file for info incase I'm missing anything:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"portal": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
},
"#schematics/angular:application": {
"strict": true
}
},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"allowedCommonJsDependencies": [
"lodash",
"#firebase/database",
"angular2-chartjs",
"#ant-design/colors",
"#ant-design/icons-angular",
"#ant-design/icons-angular/icons"
],
"aot": true,
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/ng-zorro-antd/style/entry.less",
"src/app/components/kit/vendors/antd/themes/default.less",
"src/app/components/kit/vendors/antd/themes/dark.less",
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/chartist/dist/chartist.css",
"./node_modules/quill/dist/quill.core.css",
"./node_modules/quill/dist/quill.bubble.css",
"./node_modules/quill/dist/quill.snow.css",
"./node_modules/c3/c3.min.css",
"src/global.scss",
"src/app/layouts/Auth/auth.component.scss"
],
"scripts": [
"./node_modules/c3/c3.min.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": {
"scripts": true,
"styles": {
"minify": false,
"inlineCritical": false
},
"fonts": true
},
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": false,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "10mb"
}
]
},
"hmr": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hmr.ts"
}
],
"optimization": {
"scripts": true,
"styles": {
"minify": false,
"inlineCritical": false
},
"fonts": true
},
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": false,
},
"demo": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.demo.ts"
}
],
"optimization": {
"scripts": true,
"styles": {
"minify": false,
"inlineCritical": false
},
"fonts": true
},
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": false
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"aot": true,
"browserTarget": "portal:build"
},
"configurations": {
"production": {
"browserTarget": "portal:build:production"
},
"hmr": {
"browserTarget": "portal:build:hmr",
"hmr": true
},
"demo": {
"browserTarget": "portal:build:demo"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "portal:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"inlineStyleLanguage": "scss",
"styles": [
"src/styles.scss"
],
"scripts": [],
"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/**"
]
}
}
}
},
"portal-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "portal:serve"
},
"configurations": {
"production": {
"devServerTarget": "portal:serve:production"
}
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "portal",
"cli": {
"analytics": "c2ed9326-a5b8-4009-9392-6be3b6fcfd3c"
}
}
If all other configuration looks correct. It's worth checking the syntax in the reported file(s) for anything strange.
I had received this error on a few files when migrating to NG11 and also removing Node-Sass from the repository. Other posts mentioned this resulting from sass files that were in assets folder, but wasn't my case.
In my case there were usages of /deep/. Dart-Sass seemed to be choking on that. Replacing that syntax with ::ng-deep resolved my problem.

Force angular cli gz generation

I'm trying to get a dist folder populated with the standard files + the .gz version of them. I did ng eject to get the webpack.config.js file so I could add the compression plugin https://github.com/webpack-contrib/compression-webpack-plugin. I added the new CompressPlugin({}) as the last plugin and marked the ejected: false in the .angular-cli.json file.
When I then run ng build I don't get any .gzip/.gz files generated which I would expect have.
Is there something I am missing or doing wrong? The full webpack file (mostly generated by ng new is:
const fs = require('fs');
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const CircularDependencyPlugin = require('circular-dependency-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const postcssUrl = require('postcss-url');
const cssnano = require('cssnano');
const CompressionPlugin = require("compression-webpack-plugin");
const { NoEmitOnErrorsPlugin, SourceMapDevToolPlugin, NamedModulesPlugin } = require('webpack');
const { NamedLazyChunksWebpackPlugin, BaseHrefWebpackPlugin } = require('#angular/cli/plugins/webpack');
const { CommonsChunkPlugin } = require('webpack').optimize;
const { AotPlugin } = require('#ngtools/webpack');
const nodeModules = path.join(process.cwd(), 'node_modules');
const realNodeModules = fs.realpathSync(nodeModules);
const genDirNodeModules = path.join(process.cwd(), 'src', '$$_gendir', 'node_modules');
const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"];
const minimizeCss = false;
const baseHref = "";
const deployUrl = "";
const postcssPlugins = function () {
// safe settings based on: https://github.com/ben-eb/cssnano/issues/358#issuecomment-283696193
const importantCommentRe = /#preserve|#license|[##]\s*source(?:Mapping)?URL|^!/i;
const minimizeOptions = {
autoprefixer: false,
safe: true,
mergeLonghand: false,
discardComments: { remove: (comment) => !importantCommentRe.test(comment) }
};
return [
postcssUrl({
url: (URL) => {
// Only convert root relative URLs, which CSS-Loader won't process into require().
if (!URL.startsWith('/') || URL.startsWith('//')) {
return URL;
}
if (deployUrl.match(/:\/\//)) {
// If deployUrl contains a scheme, ignore baseHref use deployUrl as is.
return `${deployUrl.replace(/\/$/, '')}${URL}`;
}
else if (baseHref.match(/:\/\//)) {
// If baseHref contains a scheme, include it as is.
return baseHref.replace(/\/$/, '') +
`/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
}
else {
// Join together base-href, deploy-url and the original URL.
// Also dedupe multiple slashes into single ones.
return `/${baseHref}/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
}
}
}),
autoprefixer(),
].concat(minimizeCss ? [cssnano(minimizeOptions)] : []);
};
module.exports = {
"resolve": {
"extensions": [
".ts",
".js"
],
"modules": [
"./node_modules",
"./node_modules"
],
"symlinks": true
},
"resolveLoader": {
"modules": [
"./node_modules",
"./node_modules"
]
},
"entry": {
"main": [
"./src\\main.ts"
],
"polyfills": [
"./src\\polyfills.ts"
],
"styles": [
"./src\\styles.css"
]
},
"output": {
"path": path.join(process.cwd(), "dist"),
"filename": "[name].bundle.js",
"chunkFilename": "[id].chunk.js"
},
"module": {
"rules": [
{
"enforce": "pre",
"test": /\.js$/,
"loader": "source-map-loader",
"exclude": [
/(\\|\/)node_modules(\\|\/)/
]
},
{
"test": /\.html$/,
"loader": "raw-loader"
},
{
"test": /\.(eot|svg|cur)$/,
"loader": "file-loader?name=[name].[hash:20].[ext]"
},
{
"test": /\.(jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
"loader": "url-loader?name=[name].[hash:20].[ext]&limit=10000"
},
{
"exclude": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.css$/,
"use": [
"exports-loader?module.exports.toString()",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
}
]
},
{
"exclude": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.scss$|\.sass$/,
"use": [
"exports-loader?module.exports.toString()",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
},
{
"loader": "sass-loader",
"options": {
"sourceMap": false,
"precision": 8,
"includePaths": []
}
}
]
},
{
"exclude": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.less$/,
"use": [
"exports-loader?module.exports.toString()",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
},
{
"loader": "less-loader",
"options": {
"sourceMap": false
}
}
]
},
{
"exclude": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.styl$/,
"use": [
"exports-loader?module.exports.toString()",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
},
{
"loader": "stylus-loader",
"options": {
"sourceMap": false,
"paths": []
}
}
]
},
{
"include": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.css$/,
"use": [
"style-loader",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
}
]
},
{
"include": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.scss$|\.sass$/,
"use": [
"style-loader",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
},
{
"loader": "sass-loader",
"options": {
"sourceMap": false,
"precision": 8,
"includePaths": []
}
}
]
},
{
"include": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.less$/,
"use": [
"style-loader",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
},
{
"loader": "less-loader",
"options": {
"sourceMap": false
}
}
]
},
{
"include": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.styl$/,
"use": [
"style-loader",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
},
{
"loader": "stylus-loader",
"options": {
"sourceMap": false,
"paths": []
}
}
]
},
{
"test": /\.ts$/,
"loader": "#ngtools/webpack"
}
]
},
"plugins": [
new NoEmitOnErrorsPlugin(),
new CopyWebpackPlugin([
{
"context": "src",
"to": "",
"from": {
"glob": "assets/**/*",
"dot": true
}
},
{
"context": "src",
"to": "",
"from": {
"glob": "favicon.ico",
"dot": true
}
}
], {
"ignore": [
".gitkeep"
],
"debug": "warning"
}),
new ProgressPlugin(),
new CircularDependencyPlugin({
"exclude": /(\\|\/)node_modules(\\|\/)/,
"failOnError": false
}),
new NamedLazyChunksWebpackPlugin(),
new HtmlWebpackPlugin({
"template": "./src\\index.html",
"filename": "./index.html",
"hash": false,
"inject": true,
"compile": true,
"favicon": false,
"minify": false,
"cache": true,
"showErrors": true,
"chunks": "all",
"excludeChunks": [],
"title": "Webpack App",
"xhtml": true,
"chunksSortMode": function sort(left, right) {
let leftIndex = entryPoints.indexOf(left.names[0]);
let rightindex = entryPoints.indexOf(right.names[0]);
if (leftIndex > rightindex) {
return 1;
}
else if (leftIndex < rightindex) {
return -1;
}
else {
return 0;
}
}
}),
new BaseHrefWebpackPlugin({}),
new CommonsChunkPlugin({
"name": [
"inline"
],
"minChunks": null
}),
new CommonsChunkPlugin({
"name": [
"vendor"
],
"minChunks": (module) => {
return module.resource
&& (module.resource.startsWith(nodeModules)
|| module.resource.startsWith(genDirNodeModules)
|| module.resource.startsWith(realNodeModules));
},
"chunks": [
"main"
]
}),
new SourceMapDevToolPlugin({
"filename": "[file].map[query]",
"moduleFilenameTemplate": "[resource-path]",
"fallbackModuleFilenameTemplate": "[resource-path]?[hash]",
"sourceRoot": "webpack:///"
}),
new CommonsChunkPlugin({
"name": [
"main"
],
"minChunks": 2,
"async": "common"
}),
new NamedModulesPlugin({}),
new AotPlugin({
"mainPath": "main.ts",
"replaceExport": false,
"hostReplacementPaths": {
"environments\\environment.ts": "environments\\environment.ts"
},
"exclude": [],
"tsConfigPath": "src\\tsconfig.app.json",
"skipCodeGeneration": true
}),
new CompressionPlugin({})
],
"node": {
"fs": "empty",
"global": true,
"crypto": "empty",
"tls": "empty",
"net": "empty",
"process": true,
"module": false,
"clearImmediate": false,
"setImmediate": false
},
"devServer": {
"historyApiFallback": true
}
};
I'm using #angular/cli 1.4.4.
Note the main reason why I'm doing that is to improve some SEO recommendations because apparently my vendor.css is 600Kb big and being pointed out in the PageSpeed Ingishts: Your page has 1 blocking CSS resources. This causes a delay in rendering your page. It contains 3rd party css only - actually only bootstrap + font-awesome. Unless there is something else to prevent this I thought of compression. I also thought that the web server would auto compress and serve .gz files but I don't know whether that test would apply.
Any help is much appreciated! Thanks
Only ejected application's build is processed by exposed on the root webpack.config.js file. Application which is not ejected (or set to ejected: false) will completely ignore this webpack.config.js file.
So in order to use gzipped files you will need to work with ejected app and use new npm scripts automatically added to package.json.
Instead of 'ng build', now you should run:
npm run build
my related answers that may help:
Angular4 build - gzip missing
How to undo Angular 2 Cli ng-eject

ng server is not outputing any css

I'm using #angular/cli when I execute ng server
the css code doesn't show up in anyway on the webpage.
This is the angular-cli.json
{
"project": {
"version": "1.0.0-beta.18",
"name": "botshop"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"../vendor/font-awesome/css/font-awesome.min.css",
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/metismenu/src/metisMenu.css",
"./assets/css/sb-admin-2.min.css",
"styles.css"
],
"scripts": [
"../systemjs.config.js",
"../node_modules/core-js/shim.js",
"../node_modules/zone.js/dist/zone.js",
"../node_modules/reflect-metadata/Reflect.js",
"../node_modules/systemjs/dist/system.src.js",
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js",
"../node_modules/metismenu/src/metisMenu.js",
"./assets/js/sb-admin-2.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
I'm getting outputed .js files but not any css.
I have upgraded ng-cli to the latest version and I'm using the last nodejs LTS
Any ideas?

grunt-contrib-jade unable to read file (EISDIR)

Executing grunt jade:dev on this
grunt.initConfig({
"jade": {
"dev": {
"files": {
"cwd": "src",
"src": ["**/*.jade"],
"dest": "dist",
"ext": ".html",
"expand": true
},
"options": {
"pretty": true,
"data": {
"environment": "dev"
}
}
},
"prod": {
"files": {
"cwd": "src",
"src": ["**/*.jade"],
"dest": "dist",
"ext": ".html",
"expand": true
},
"options": {
"pretty": true,
"data": {
"environment": "prod"
}
}
}
}
});
fails with
Warning: Unable to read "src" file (Error code: EISDIR). Use --force to continue.
But executing grunt jade on this
grunt.initConfig({
"jade": {
"files": {
"cwd": "src",
"src": ["**/*.jade"],
"dest": "dist",
"ext": ".html",
"expand": true
},
"options": {
"pretty": true,
"data": {
"environment": "dev"
}
}
}
});
succeeds.
There is no difference between the configuration of the tasks I'm running in both cases. What am I missing?
I don't know why, but this seems to work:
grunt.initConfig({
"jade": {
"dev": {
"cwd": "src",
"src": ["**/*.jade"],
"dest": "dist",
"ext": ".html",
"expand": true,
"options": {
"pretty": true,
"data": {
"environment": "dev"
}
}
},
"prod": {
"cwd": "src",
"src": ["**/*.jade"],
"dest": "dist",
"ext": ".html",
"expand": true,
"options": {
"pretty": true,
"data": {
"environment": "prod"
}
}
}
}
});
All I did was remove the enclosing "files" object.

Resources