Migration guide - Extending the project
Edit on GitHubThis document outlines the changes that need to be made at a project level to extend the frontend part of your project.
Estimated migration time: 1h 30m
To update the project, do the following:
- Update the following files in the root:
wget -O angular.json https://raw.githubusercontent.com/spryker-shop/suite/master/angular.json
wget -O tsconfig.json https://raw.githubusercontent.com/spryker-shop/suite/master/tsconfig.json
wget -O tsconfig.mp.json https://raw.githubusercontent.com/spryker-shop/suite/master/tsconfig.mp.json
- In the
frontend/merchant-portal
folder, update or create the following files:
wget -O frontend/merchant-portal/entry-points.js https://raw.githubusercontent.com/spryker-shop/suite/master/frontend/merchant-portal/entry-points.js
wget -O frontend/merchant-portal/utils.js https://raw.githubusercontent.com/spryker-shop/suite/master/frontend/merchant-portal/utils.js
wget -O frontend/merchant-portal/mp-paths.js https://raw.githubusercontent.com/spryker-shop/suite/master/frontend/merchant-portal/mp-paths.js
wget -O frontend/merchant-portal/tsconfig.spec.json https://raw.githubusercontent.com/spryker-shop/suite/master/frontend/merchant-portal/tsconfig.spec.json
wget -O frontend/merchant-portal/update-config-paths.js https://raw.githubusercontent.com/spryker-shop/suite/master/frontend/merchant-portal/update-config-paths.js
- In the
src/Pyz/Zed
folder, create the files tree on the project level:
- ZedUi
- Presentation
- Components
- app
- app.module.ts
- assets
- .gitkeep
- environments
- environment.prod.ts
- environment.ts
- index.html
- main.ts
- polyfills.ts
- styles.less
- public-api.ts
- app
- Components
- mp.public-api.ts
- Presentation
- Fill in the newly created files with the following code:
app.module.ts
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DefaultMerchantPortalConfigModule, RootMerchantPortalModule } from '@mp/zed-ui';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
RootMerchantPortalModule,
DefaultMerchantPortalConfigModule,
],
})
export class AppModule extends RootMerchantPortalModule {}
environment.prod.ts
export const environment = {
production: true,
};
environment.ts
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
export const environment = {
production: false,
};
/*
* For easier debugging in development mode, you can import the following file
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
*
* This import must be commented out in production mode because it will have a negative impact
* on performance if an error is thrown.
*/
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
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)
/* tslint:disable-next-line: no-console */
.catch((error) => console.error(error));
polyfills.ts
import '@mp/polyfills';
mp.public-api.ts
export * from './Presentation/Components/public-api';
public-api.ts
export * from './app/...';
...
// Packages that you want to be exported as public api
- Reinstall
node_modules
:
rm -rf node_modules && npm install
- Build the Marketplace project:
npm run mp:build
Related articles:
Thank you!
For submitting the form