I am trying to build the Angular 5 project using --aot option and the build fails with the following error,
ERROR in ../node_modules/#angular/forms/esm5/forms.js Module not
found: Error: Can't resolve '#angular/platform-browser' in '...PROJECT
LOCATION.../node_modules/#angular/forms/esm5'
Angular version
Angular CLI: 1.7.4
Node: 8.11.1
OS: darwin x64
Angular: 5.2.10
... animations, common, compiler-cli, core, http
... language-service, router
#angular/cdk: 5.2.4
#angular/cli: 1.7.4
#angular/compiler: 5.2.11
#angular/forms: 5.2.0
#angular/material-moment-adapter: 8.0.1
#angular/material: 5.2.4
#angular/platform-browser-dynamic: 5.2.0
#angular/platform-browser: 5.2.0
#angular/platform-server: 8.1.2
#angular-devkit/build-optimizer: 0.3.2
#angular-devkit/core: 0.3.2
#angular-devkit/schematics: 0.3.2
#ngtools/json-schema: 1.2.0
#ngtools/webpack: 1.10.2
#schematics/angular: 0.3.2
#schematics/package-update: 0.3.2
typescript: 2.4.2
webpack: 3.11.0
And the main.ts
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));
When I change it to bootstrapModule of platform-browser instead of platform-browser-dynamic build is successful but the app fails to render.
What needs to be done to compile using AOT?
Upgrade to typescript#2.6.2 will solve the issue
Related
Version
5.0.1
Reproduction link
github.com
Environment info
Environment Info:
System:
OS: Linux 5.13 Ubuntu 20.04.4 LTS (Focal Fossa)
CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU # 3.70GHz
Binaries:
Node: 14.17.1 - ~/.nvm/versions/node/v14.17.1/bin/node
Yarn: 1.22.17 - /usr/bin/yarn
npm: 6.14.13 - ~/.nvm/versions/node/v14.17.1/bin/npm
Browsers:
Chrome: 98.0.4758.102
Firefox: 97.0
npmPackages:
#gtm-support/vue-gtm: ^1.3.0 => 1.3.0
#intlify/eslint-plugin-vue-i18n: ^1.2.0 => 1.2.0
#intlify/vue-devtools: 9.2.0-beta.22
#vue/apollo-option: ^4.0.0-alpha.15 => 4.0.0-alpha.15
#vue/babel-helper-vue-jsx-merge-props: 1.2.1
#vue/babel-helper-vue-transform-on: 1.0.2
#vue/babel-plugin-jsx: 1.1.1
#vue/babel-plugin-transform-vue-jsx: 1.2.1
#vue/babel-preset-app: 5.0.1
#vue/babel-preset-jsx: 1.2.4
#vue/babel-sugar-composition-api-inject-h: 1.2.1
#vue/babel-sugar-composition-api-render-instance: 1.2.4
#vue/babel-sugar-functional-vue: 1.2.2
#vue/babel-sugar-inject-h: 1.2.2
#vue/babel-sugar-v-model: 1.2.3
#vue/babel-sugar-v-on: 1.2.3
#vue/cli-overlay: 5.0.1
#vue/cli-plugin-babel: ^5.0.1 => 5.0.1
#vue/cli-plugin-eslint: ^5.0.1 => 5.0.1
#vue/cli-plugin-router: 5.0.1
#vue/cli-plugin-typescript: ^5.0.1 => 5.0.1
#vue/cli-plugin-unit-jest: ^5.0.1 => 5.0.1
#vue/cli-plugin-vuex: 5.0.1
#vue/cli-service: ^5.0.1 => 5.0.1
#vue/cli-shared-utils: 5.0.1
#vue/compiler-core: 3.2.30
#vue/compiler-dom: 3.2.30
#vue/compiler-sfc: 3.2.30
#vue/compiler-ssr: 3.2.30
#vue/component-compiler-utils: 3.3.0
#vue/devtools-api: 6.0.0-beta.20.1
#vue/eslint-config-airbnb: ^5.3.0 => 5.3.0
#vue/eslint-config-typescript: ^7.0.0 => 7.0.0
#vue/reactivity: 3.2.30 (3.2.31)
#vue/reactivity-transform: 3.2.30
#vue/runtime-core: 3.2.30 (3.2.31)
#vue/runtime-dom: 3.2.30 (3.2.31)
#vue/server-renderer: 3.2.30
#vue/shared: 3.2.30 (3.2.31)
#vue/test-utils: ^2.0.0-rc.18 => 2.0.0-rc.18
#vue/vue3-jest: ^27.0.0-alpha.4 => 27.0.0-alpha.4
#vue/web-component-wrapper: 1.3.0
eslint-plugin-vue: ^7.17.0 => 7.17.0
eslint-plugin-vue-scoped-css: ^1.3.0 => 1.3.0
floating-vue: ^2.0.0-beta.1 => 2.0.0-beta.1
jest-serializer-vue: 2.0.2
jest-serializer-vue-tjw: ^3.19.0 => 3.19.0
stylelint-config-recommended-vue: ^1.2.0 => 1.2.0
typescript: ^4.4.2 => 4.4.2
vue: ^3.2.30 => 3.2.30
vue-apollo: ^3.0.7 => 3.0.7
vue-chart-3: ^3.1.1 => 3.1.1
vue-cli-plugin-webpack-bundle-analyzer: ~4.0.0 => 4.0.0
vue-composition-test-utils: ^1.0.3 => 1.0.3
vue-ctk-date-time-picker3: ^2.5.2 => 2.5.2
vue-demi: 0.4.5 (0.12.1)
vue-eslint-parser: 7.10.0 (8.0.1)
vue-hot-reload-api: 2.3.4
vue-i18n: ^9.2.0-beta.22 => 9.2.0-beta.22
vue-loader: 17.0.0 (15.9.8)
vue-resize: 2.0.0-alpha.1
vue-router: ^4.0.12 => 4.0.12
vue-style-loader: 4.1.3
vue-template-es2015-compiler: 1.9.1
npmGlobalPackages:
#vue/cli: 5.0.1
Steps to reproduce
HMR/Hot-reload doesn't work and in the console errors such as "The connection to wss://custom-url:8080/ws was interrupted while the page was loading.." will be thrown constantly. So something must be wrong with the devServer setup but I've tried many different setups and couldn't find a working one.
When I change anything in the templates I usually get similar errors such as:
Uncaught TypeError: can't access property "./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/Suppliers/Suppliers.vue?vue&type=script&lang=js", currentUpdate is undefined
What is expected?
HMR should work as it was before changing to the v5 plugins
What is actually happening?
HMR doesn't work, my changes are only visible if I reload the page
This is about an old vue 2.6.x project being migrated to vue 3 completely. Unfortunately it is about a monolith app so a complete reproduction wasn't possible, but I hope that posting all config files may be enough to find out the problem. If you need any other config files or anything else to help debug please let me know.
I see an error in the terminal as well:
Proxy error: Could not proxy request /app.e9978b73a5a9070c.hot-update.json from CUSTOM-URL:8080 to https://CUSTOM-URL/. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).
Thanks for you help in advance!
My team could fix it by adding the optimization object to our webpack config (in vue.config.js):
const { defineConfig } = require('#vue/cli-service');
module.exports = defineConfig({
/* your config */
configureWebpack: {
optimization: {
runtimeChunk: 'single',
},
},
devServer: {
proxy: `https://${process.env.SANDBOX_HOSTNAME}/`, // we need this for apollo to work properly
host: '0.0.0.0',
allowedHosts: 'all',
},
});
It fixed the HMR for us, however if you're using firefox your console might be still spammed by error messages like these: The connection to wss://SANDBOX_HOSTNAME:8080/ws was interrupted while the page was loading.
I configured metro.config.js with the extraNodeModules setting so metro will find my shared modules from outside my project (a 'monorepo' configuration).
Metro is finding my external module (see dumb-module below), but I'm getting an error when that external module tries to import react. I get no error when the imported module does not import react.
Here's the error:
Unable to resolve module #babel/runtime/helpers/interopRequireDefault from /Users/jim/.../modules/dumb-module/index.js: #babel/runtime/helpers/interopRequireDefault could not be found within the project.
If you are sure the module exists, try these steps:
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*
> 1 | import React from 'react';
2 | import { Text } from 'react-native';
3 |
4 | const DumbModule = () => {
Because it's showing the contents of dumb-module, it's clearly able to find my external modules. But it looks like it can't resolve that module trying to import react.
I've tried, as you might expect, everything. Would love to get some ideas here.
metro.config.js
const path = require('path');
const extraNodeModules = {
'modules': path.resolve(path.join(__dirname, '../../modules'))
};
const watchFolders = [
path.resolve(path.join(__dirname, '../../modules'))
];
const nodeModulesPaths = [path.resolve(path.join(__dirname, './node_modules'))];
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: true,
inlineRequires: true,
},
}),
},
resolver: {
extraNodeModules,
nodeModulesPaths
},
watchFolders
};
dumb-module/index.js
import React from 'react';
import { Text } from 'react-native';
const DumbModule = () => {
return (
<Text>I am useless.</Text>
);
};
export default DumbModule;
expo diagnostics:
expo diagnostics
Expo CLI 4.12.0 environment info:
System:
OS: macOS 11.6
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
Yarn: 1.22.11 - ~/.nvm/versions/node/v14.16.1/bin/yarn
npm: 7.24.0 - ~/.nvm/versions/node/v14.16.1/bin/npm
Managers:
CocoaPods: 1.11.2 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 15.0, DriverKit 20.4, macOS 11.3, tvOS 15.0, watchOS 8.0
IDEs:
Xcode: 13.0/13A233 - /usr/bin/xcodebuild
npmPackages:
expo: ~42.0.1 => 42.0.4
react: 16.13.1 => 16.13.1
react-dom: 16.13.1 => 16.13.1
react-native: https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz => 0.63.2
react-native-web: ~0.13.12 => 0.13.18
npmGlobalPackages:
expo-cli: 4.12.0
Expo Workflow: managed
So, this actually works fine, and my issue was I wasn't resetting the metro cache properly.
I'll leave this post up because this metro.config.js is part of the solution to getting an expo app to work inside a monorepo and utilized shared components.
The other part is using yarn's nohoist option on the expo app folder so its dependencies are kept within its node_modules.
I have cloned my repository an then install all packages via npm. When i try to start mu program with gatsby develop i get this error in all files in templates directory.
I've already cleared chache, deleted node_modules and public folders, re-install packages and so on, but nothing worked.
This is is info, which I get from gatsby info:
System:
OS: macOS 11.1
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU # 2.30GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 14.0.0 - ~/.nvm/versions/node/v14.0.0/bin/node
Yarn: 1.13.0 - ~/.npm-global/bin/yarn
npm: 6.14.4 - ~/.nvm/versions/node/v14.0.0/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 87.0.4280.141
Firefox: 78.0.2
Safari: 14.0.2
npmPackages:
gatsby: ^2.30.1 => 2.31.1
gatsby-awesome-pagination: ^0.3.6 => 0.3.6
gatsby-image: ^2.5.0 => 2.10.0
gatsby-plugin-eslint: ^2.0.8 => 2.0.8
gatsby-plugin-fontawesome-css: ^1.0.0 => 1.0.0
gatsby-plugin-manifest: ^2.6.1 => 2.11.0
gatsby-plugin-netlify-cms: ^4.5.0 => 4.9.0
gatsby-plugin-offline: ^3.4.0 => 3.9.0
gatsby-plugin-react-helmet: ^3.4.0 => 3.9.0
gatsby-plugin-sharp: ^2.8.0 => 2.13.1
gatsby-plugin-styled-components: ^3.5.0 => 3.9.0
gatsby-plugin-typography: ^2.10.0 => 2.11.0
gatsby-source-filesystem: ^2.5.0 => 2.10.0
gatsby-transformer-remark: ^2.12.0 => 2.15.0
gatsby-transformer-sharp: ^2.6.0 => 2.11.0
Does anyone have similar problem, or know how to solve it?
It's not a matter of dependencies or configuration, you have a typo in your project. It seems that somewhere in your JavaScript files (maybe in the templates folder) you have a . (dot) that is breaking your code.
To enable optional chaining in any JavaScript project, since it's not a standard feature, you need to:
Install the dependency (#babel/plugin-proposal-optional-chaining):
npm install --save-dev #babel/plugin-proposal-optional-chaining
Or:
yarn add #babel/plugin-proposal-optional-chaining --dev
Enable it in your Babel configuration. In Gatsby, you can create a babel.config.js (or .babelrc) in the root of your project to customize Babel's configuration:
{
"plugins": [
["#babel/plugin-proposal-optional-chaining"]
],
"presets": [
[
"babel-preset-gatsby",
{
"targets": {
"browsers": [">0.25%", "not dead"]
}
}
]
]
}
Fixed by:
problem was my package-lock.json. After we fixed it, everything works
properly :) nevermind
I installed the TextToSpeech Cordova Plugin on my Ionic App:
"#ionic-native/text-to-speech": "^5.30.0",
"cordova-plugin-tts": "^0.2.3",
And used it in my vue file:
import { Plugins } from "#capacitor/core";
const { TextToSpeech } = Plugins;
...
methods: {
tts(text) {
TextToSpeech.speak(text)
.then(() => console.log("Success Speach"))
.catch((reason) => console.log(reason));
},
...
console.log(TextToSpeech);
I'm using Capacitor
IOS
When I'm trying to use the plugin on IOS: I get an unknown error: error {}
When I'm printing the plugin, I get: [log] - undefined
Browser
When I'm trying to use the plugin it prints as expecting: TextToSpeech does not have web implementation.
When I'm printing the plugin, I get: Proxy {}
So it's working and loaded in the Browser, but no on the Device.
I found the solution.
first update #ionic-native/core
npm uninstall --save #ionic-native/core && npm install --save #ionic-native/core#latest
The import the plugin like this
import { TextToSpeech } from "#ionic-native/text-to-speech";
just install fresh Ionic4 framework, create tabs starter project and try install media plugin as described here
https://ionicframework.com/docs/native/media/#installation
But nothing worked and I received the following error:
[ng] ERROR in src/app/tab2/tab2.page.ts(14,22): error TS2304: Cannot find name 'Media'.**
my ionic info
$ ionic info
Ionic:
ionic (Ionic CLI) : 4.9.0 (C:\Users\RAMS\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : #ionic/angular 4.0.0
#angular-devkit/build-angular : 0.12.3
#angular-devkit/schematics : 7.2.3
#angular/cli : 7.2.3
#ionic/angular-toolkit : 1.2.3
Cordova:
cordova (Cordova CLI) : 8.0.0
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (1 plugins total)
System:
Android SDK Tools : 25.2.5 (C:\Program Files (x86)\Android\android-sdk)
NodeJS : v8.12.0 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows 7
here is my tab2.page.ts
import {Media, MediaObject} from '#ionic-native/media';
#Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
constructor(private media: Media) {
}
}
Perhaps there was an issue with your installation?
Maybe you could try reinstalling:
ionic cordova plugin add cordova-plugin-media
npm install #ionic-native/media