Amplify Angular Error export 'ApiAction' (imported as 'ApiAction') was not found in '@aws-amplify/core'

[hbapps20]

How did you install the Amplify CLI?

npm

If applicable, what version of Node.js are you using?

v18.16.0

Amplify CLI Version

12.1.1

What operating system are you using?

Windows

Did you make any manual changes to the cloud resources managed by Amplify? Please describe the changes made.

No manual changes made

Describe the bug

I updated Amplify CLI and also my Angular version from 15 to 17. I have Ionic-Angular

When I build my project I get this error:

./node_modules/@aws-amplify/api/lib-esm/internals/InternalAPI.js:21:23-34 - Error: export 'Credentials' (imported as 'Credentials') was not found in '@aws-amplify/core' (possible exports: Amplify, AmplifyClassV6, Cache, ConsoleLogger, CookieStorage, Hub, I18n, ServiceWorker, clearCredentials, decodeJWT, defaultStorage, fetchAuthSession, getCredentialsForIdentity, getId, sessionStorage, sharedInMemoryStorage)
[ng]
[ng] ./node_modules/@aws-amplify/api/lib-esm/internals/InternalAPI.js:54:89-102 - Error: export 'ApiAction' (imported as 'ApiAction') was not found in '@aws-amplify/core' (possible exports: Amplify, AmplifyClassV6, Cache, ConsoleLogger, CookieStorage, Hub, I18n, ServiceWorker, clearCredentials, decodeJWT, defaultStorage, fetchAuthSession, getCredentialsForIdentity, getId, sessionStorage, sharedInMemoryStorage)
[ng]
[ng] ./node_modules/@aws-amplify/api/lib-esm/internals/InternalAPI.js:64:90-104 - Error: export 'ApiAction' (imported as 'ApiAction') was not found in '@aws-amplify/core' (possible exports: Amplify, AmplifyClassV6, Cache, ConsoleLogger, CookieStorage, Hub, I18n, ServiceWorker, clearCredentials, decodeJWT, defaultStorage, fetchAuthSession, getCredentialsForIdentity, getId, sessionStorage, sharedInMemoryStorage)
[ng]
[ng] ./node_modules/@aws-amplify/api/lib-esm/internals/InternalAPI.js:74:89-102 - Error: export 'ApiAction' (imported as 'ApiAction') was not found in '@aws-amplify/core' (possible exports: Amplify, AmplifyClassV6, Cache, ConsoleLogger, CookieStorage, Hub, I18n, ServiceWorker, clearCredentials, decodeJWT, defaultStorage, fetchAuthSession, getCredentialsForIdentity, getId, sessionStorage, sharedInMemoryStorage)
[ng]
[ng] ./node_modules/@aws-amplify/api/lib-esm/internals/InternalAPI.js:84:91-106 - Error: export 'ApiAction' (imported as 'ApiAction') was not found in '@aws-amplify/core' (possible exports: Amplify, AmplifyClassV6, Cache, ConsoleLogger, CookieStorage, Hub, I18n, ServiceWorker, clearCredentials, decodeJWT, defaultStorage, fetchAuthSession, getCredentialsForIdentity, getId, sessionStorage, sharedInMemoryStorage)
[ng]
[ng] ./node_modules/@aws-amplify/api/lib-esm/internals/InternalAPI.js:94:89-102 - Error: export 'ApiAction' (imported as 'ApiAction') was not found in '@aws-amplify/core' (possible exports: Amplify, AmplifyClassV6, Cache, ConsoleLogger, CookieStorage, Hub, I18n, ServiceWorker, clearCredentials, decodeJWT, defaultStorage, fetchAuthSession, getCredentialsForIdentity, getId, sessionStorage, sharedInMemoryStorage)
[ng]
[ng] ./node_modules/@aws-amplify/api/lib-esm/internals/InternalAPI.js:104:90-104 - Error: export 'ApiAction' (imported as 'ApiAction') was not found in '@aws-amplify/core' (possible exports: Amplify, AmplifyClassV6, Cache, ConsoleLogger, CookieStorage, Hub, I18n, ServiceWorker, clearCredentials, decodeJWT, defaultStorage, fetchAuthSession, getCredentialsForIdentity, getId, sessionStorage, sharedInMemoryStorage)
[ng]
[ng] ./node_modules/@aws-amplify/api/lib-esm/internals/InternalAPI.js:130:16-28 - Error: export 'Category' (imported as 'Category') was not found in '@aws-amplify/core' (possible exports: Amplify, AmplifyClassV6, Cache, ConsoleLogger, CookieStorage, Hub, I18n, ServiceWorker, clearCredentials, decodeJWT, defaultStorage, fetchAuthSession, getCredentialsForIdentity, getId, sessionStorage, sharedInMemoryStorage)
[ng]
[ng] ./node_modules/@aws-amplify/api/lib-esm/internals/InternalAPI.js:159:16-28 - Error: export 'Category' (imported as 'Category') was not found in '@aws-amplify/core' (possible exports: Amplify, AmplifyClassV6, Cache, ConsoleLogger, CookieStorage, Hub, I18n, ServiceWorker, clearCredentials, decodeJWT, defaultStorage, fetchAuthSession, getCredentialsForIdentity, getId, sessionStorage, sharedInMemoryStorage)
[ng]
[ng] ./node_modules/@aws-amplify/api/lib-esm/internals/InternalAPI.js:160:14-31 - Error: export 'ApiAction' (imported as 'ApiAction') was not found in '@aws-amplify/core' (possible exports: Amplify, AmplifyClassV6, Cache, ConsoleLogger, CookieStorage, Hub, I18n, ServiceWorker, clearCredentials, decodeJWT, defaultStorage, fetchAuthSession, getCredentialsForIdentity, getId, sessionStorage, sharedInMemoryStorage)
[ng]
[ng] Error: node_modules/@aws-amplify/api/lib-esm/internals/InternalAPI.d.ts:2:10 - error TS2305: Module '"@aws-amplify/core"' has no exported member 'CustomUserAgentDetails'.
[ng]
[ng] 2 import { CustomUserAgentDetails } from '@aws-amplify/core';
[ng] ~~~~~~~~~~~~~~~~~~~~~~
[ng]
[ng]
[ng] Error: node_modules/@aws-amplify/api/lib-esm/internals/InternalAPI.d.ts:21:46 - error TS2694: Namespace '"C:/Users/jagud/Documents/Projects/Flai/code/001-flai/node_modules/@aws-amplify/core/dist/esm/index"' has no exported member 'CredentialsClass'.
[ng]
[ng] 21 Credentials: import("@aws-amplify/core").CredentialsClass;
[ng] ~~~~~~~~~~~~~~~~
[ng]
[ng]
[ng] Error: node_modules/@aws-amplify/datastore/lib-esm/types.d.ts:252:371 - error TS2536: Type '"field"' cannot be used to index type 'MetadataOrDefault<T, M>["identifier"]'.
[ng]
[ng] 252 export declare type IdentifierFields<T extends PersistentModel, M extends PersistentModelMetaData = never> = (MetadataOrDefault<T, M>['identifier'] extends ManagedIdentifier<any, any> | O ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[ng]
[ng]
[ng] Error: node_modules/@aws-amplify/datastore/lib-esm/types.d.ts:301:313 - error TS2536: Type 'MetadataOrDefault<T, M>["identifier"]["field"]' cannot be used to index type 'T'.
[ng]
[ng] 301 export declare type IdentifierFieldValue<T extends PersistentModel, M extends PersistentModelMetaData> = MetadataOrDefault<T, M>['identifier'] extends CompositeIdentifier<T, any> ? MetadataOrDefault<T, M>['identifier']['fields'] extends [any] ? T[MetadataOrDefault<T, M>['identifier']['fields'][0]] : never : T[MetadataOrDefault<T, M>['identifier']['field']];
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[ng]
[ng]
[ng] Error: node_modules/@aws-amplify/datastore/lib-esm/types.d.ts:301:315 - error TS2536: Type '"field"' cannot be used to index type 'MetadataOrDefault<T, M>["identifier"]'.
[ng]
[ng] 301 export declare type IdentifierFieldValue<T extends PersistentModel, M extends PersistentModelMetaData> = MetadataOrDefault<T, M>['identifier'] extends CompositeIdentifier<T, any> ? MetadataOrDefault<T, M>['identifier']['fields'] extends [any] ? T[MetadataOrDefault<T, M>['identifier']['fields'][0]] : never : T[MetadataOrDefault<T, M>['identifier']['field']];

It seams to be library error

Expected behavior

That my Ionic Angular application builds with no error

Code Snippet:

main.ts (I have remove amplify.configure as I thought that Gen2 Amplify does not need it, still does not work with it.

`import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser'
import { RouteReuseStrategy, provideRouter } from '@angular/router';
import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';
import { routes } from './app/app.routes';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';
import { provideHttpClient } from '@angular/common/http';

// import { Amplify, Auth } from 'aws-amplify';
// //import awsconfig from './aws-exports';
// import awsconfig from './aws-exports';

// Amplify.configure(awsconfig);

if (environment.production) {
enableProdMode();
}

bootstrapApplication(AppComponent, {
providers: [
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
provideIonicAngular(),
provideRouter(routes),
provideHttpClient()
],
});

// platformBrowserDynamic().bootstrapModule(AppModule)
// .catch(err => console.log(err));
`

Reproduction steps

1. I have deleted amplify folder
2. I have deleted package-lock.json
3. Install again node packages with npm install
4. run npm create amplify@latest
5. import project, amplify import --appId xxxxxxxx
6. amplify push

Folder is created but bugs still in place

Project Identifier

No response

Log output

# Put your logs below this line

Additional information

I have deleted and create several times amplify project, my amplify resources are build with cdk, and then I import the project to angular.

package.json

{
"name": "myapp",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"lint": "ng lint"
},
"private": true,
"dependencies": {
"@angular/common": "^17.3.7",
"@angular/core": "^17.3.7",
"@angular/forms": "^17.3.7",
"@angular/google-maps": "^17.3.7",
"@angular/platform-browser": "^17.3.7",
"@angular/platform-browser-dynamic": "^17.3.7",
"@angular/router": "^17.3.7",
"@aws-amplify/core": "^6.2.0",
"@capacitor/app": "4.1.1",
"@capacitor/core": "4.6.2",
"@capacitor/haptics": "4.1.0",
"@capacitor/keyboard": "4.1.1",
"@capacitor/status-bar": "4.1.1",
"@ionic/angular": "^8.1.0",
"@ngx-translate/core": "^14.0.0",
"@ngx-translate/http-loader": "^7.0.0",
"aws-amplify": "^5.3.18",
"ionicons": "^6.0.3",
"libphonenumber-js": "^1.10.24",
"rxjs": "~7.5.0",
"swiper": "^10.0.2",
"zone.js": "~0.14.5"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.3.6",
"@angular-eslint/builder": "^14.0.0",
"@angular-eslint/eslint-plugin": "^14.0.0",
"@angular-eslint/eslint-plugin-template": "^14.0.0",
"@angular-eslint/template-parser": "^14.0.0",
"@angular/cli": "^17.3.6",
"@angular/compiler": "^17.3.7",
"@angular/compiler-cli": "^17.3.7",
"@angular/language-service": "^17.3.7",
"@aws-amplify/backend": "^1.0.0",
"@aws-amplify/backend-cli": "^1.0.1",
"@capacitor/cli": "4.6.2",
"@ionic/angular-toolkit": "^11.0.1",
"@types/google.maps": "^3.54.3",
"@types/jasmine": "~4.0.0",
"@types/jest": "^29.5.0",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "5.3.0",
"@typescript-eslint/parser": "5.3.0",
"aws-cdk": "^2.140.0",
"aws-cdk-lib": "^2.140.0",
"constructs": "^10.3.0",
"esbuild": "^0.21.1",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~4.3.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"ts-node": "~8.3.0",
"tslib": "^2.5.0",
"tsx": "^4.9.3",
"typescript": "^5.4.5"
},
"description": "An Ionic project"
}

Before submitting, please confirm:

• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
• I have removed any sensitive information from my code snippets and submission.

[ykethan]

Hey @hbapps20, thank you for reaching out. From the information provided and the screenshot, are you running Gen 1 commands in Gen 2?
As the screenshot shows the new folder structure for Gen 2 and with the Gen 1 command amplify import --appId xxxxxxxx. The Gen 1 commands are currently not supported in Gen 2. https://docs.amplify.aws/react/reference/cli-commands/

[hbapps20]

Hi @ykethan thanks for your response...

Well I updated to amplify 12.1.1 so I think it is Gen2. ¿What would be the command to import an existin amplify project for Gen2?

[ykethan]

@hbapps20 importing a existing Gen 1 project into Gen 2 is currently not yet supported. Refer to our FAQ and differences in Gen 1 and Gen 2 documentation:
https://docs.amplify.aws/react/how-amplify-works/faq/
https://docs.amplify.aws/react/start/migrate-to-gen2/

To upgrade the Amplify CLI in Gen 1, you can run amplify upgrade or npm install -g @aws-amplify/cli