Merge pull request #727 from izaera/IFI-2783

izaera · web-flow · commit 41fda2f57141 · 2021-11-05T08:48:38.000+01:00
feat: update liferay-cli to account for changes in Angular architecture
diff --git a/projects/js-toolkit/packages/liferay-cli/src/dependencies.json b/projects/js-toolkit/packages/liferay-cli/src/dependencies.json
@@ -1,37 +1,32 @@
 {
 	"facet-angular": {
 		"dependencies": {
-			"@angular/animations": "10.2.2",
-			"@angular/common": "10.2.2",
-			"@angular/compiler": "10.2.2",
-			"@angular/core": "10.2.2",
-			"@angular/forms": "10.2.2",
-			"@angular/platform-browser": "10.2.2",
-			"@angular/platform-browser-dynamic": "10.2.2",
-			"@angular/router": "10.2.2",
-			"rxjs": "6.6.3",
-			"tslib": "2.0.3",
-			"zone.js": "0.10.3"
+			"@angular/animations": "~12.2.0",
+			"@angular/common": "~12.2.0",
+			"@angular/compiler": "~12.2.0",
+			"@angular/core": "~12.2.0",
+			"@angular/forms": "~12.2.0",
+			"@angular/platform-browser": "~12.2.0",
+			"@angular/platform-browser-dynamic": "~12.2.0",
+			"@angular/router": "~12.2.0",
+			"components-lib": "../components-app/dist/components-lib",
+			"rxjs": "~6.6.0",
+			"tslib": "^2.3.0",
+			"zone.js": "~0.11.4"
 		},
 		"devDependencies": {
-			"@angular/cli": "10.2.0",
-			"@angular/compiler-cli": "10.2.2",
-			"@angular-devkit/build-angular": "0.1002.0",
-			"@types/jasmine": "3.5.14",
-			"@types/jasminewd2": "2.0.8",
-			"@types/node": "12.11.1",
-			"codelyzer": "6.0.1",
-			"jasmine-core": "3.6.0",
-			"jasmine-spec-reporter": "5.0.2",
-			"karma": "5.0.9",
-			"karma-chrome-launcher": "3.1.0",
-			"karma-coverage-istanbul-reporter": "3.0.3",
-			"karma-jasmine": "4.0.1",
-			"karma-jasmine-html-reporter": "1.5.4",
-			"protractor": "7.0.0",
-			"ts-node": "8.3.0",
-			"tslint": "6.1.3",
-			"typescript": "4.0.5"
+			"@angular/cli": "~12.2.12",
+			"@angular/compiler-cli": "~12.2.0",
+			"@angular-devkit/build-angular": "~12.2.12",
+			"@types/jasmine": "~3.8.0",
+			"@types/node": "^12.11.1",
+			"jasmine-core": "~3.8.0",
+			"karma": "~6.3.0",
+			"karma-chrome-launcher": "~3.1.0",
+			"karma-coverage": "~2.0.3",
+			"karma-jasmine": "~4.0.0",
+			"karma-jasmine-html-reporter": "~1.7.0",
+			"typescript": "~4.3.5"
 		}
 	},
 	"facet-react": {
diff --git a/projects/js-toolkit/packages/liferay-cli/src/new/facet-angular/index.ts b/projects/js-toolkit/packages/liferay-cli/src/new/facet-angular/index.ts
@@ -53,9 +53,11 @@ const facet: Facet = {
 
 		await renderer.render('src/app/app.component.html', context);
 		await renderer.render('src/app/app.component.ts', context);
-		await renderer.render('src/app/dynamic.loader.ts', context);
+		await renderer.render('src/app/app.dynamic.loader.ts', context);
 		await renderer.render('src/app/app.module.ts', context);
-		await renderer.render('src/types/LiferayParams.ts', context);
+		await renderer.render('src/app/app.url.resolver.ts', context);
+		await renderer.render('src/types/base.url.map.ts', context);
+		await renderer.render('src/types/liferay.params.ts', context);
 		await renderer.render('src/polyfills.ts', context);
 		await renderer.render('src/index.ts', context);
 
diff --git a/projects/js-toolkit/packages/liferay-cli/src/new/facet-angular/templates/src/app/app.component.ts.ejs b/projects/js-toolkit/packages/liferay-cli/src/new/facet-angular/templates/src/app/app.component.ts.ejs
@@ -1,16 +1,14 @@
 import { Component } from '@angular/core';
 
-import LiferayParams from '../types/LiferayParams'
+import { LiferayParams } from '../types/liferay.params';
 
 declare const Liferay: any;
 
 @Component({
-	templateUrl: 
-		Liferay.ThemeDisplay.getPathContext() + 
-		'/o/<%= pkgJson.name %>-<%= pkgJson.version %>/app/app.component.html'
+	templateUrl: './app.component.html'
 })
 export class AppComponent {
-	params: LiferayParams;
+	params?: LiferayParams;
 	labels: any;
 
 	constructor() {
@@ -25,6 +23,6 @@ export class AppComponent {
 	}
 
 	get configurationJSON() {
-		return JSON.stringify(this.params.configuration, null, 2);
+		return JSON.stringify(this.params?.configuration, null, 2);
 	}
 }
diff --git a/projects/js-toolkit/packages/liferay-cli/src/new/facet-angular/templates/src/app/app.dynamic.loader.ts.ejs b/projects/js-toolkit/packages/liferay-cli/src/new/facet-angular/templates/src/app/app.dynamic.loader.ts.ejs
@@ -6,22 +6,22 @@ import {
 	Type,
 } from '@angular/core';
 
-import LiferayParams from '../types/LiferayParams'
+import { LiferayParams } from '../types/liferay.params';
 import { AppComponent } from './app.component';
 
 /**
  * This class loads an Angular component dinamically so that we can attach it to
  * the portlet's DOM, which is different for each portlet instance and thus,
  * cannot be determined until the page is rendered (during runtime).
  */
-export class DynamicLoader {
+export class AppDynamicLoader {
 	constructor(private injector: Injector) {}
 
 	loadComponent<T>(
 		component: Type<AppComponent>, params: LiferayParams) {
-		
+
 		const node = document.getElementById(params.portletElementId);
-		
+
 		(<NgZone>this.injector.get(NgZone)).run(() => {
 			const componentFactory = this.injector
 				.get(ComponentFactoryResolver)
diff --git a/projects/js-toolkit/packages/liferay-cli/src/new/facet-angular/templates/src/app/app.url.resolver.ts.ejs b/projects/js-toolkit/packages/liferay-cli/src/new/facet-angular/templates/src/app/app.url.resolver.ts.ejs
@@ -0,0 +1,40 @@
+import { UrlResolver } from '@angular/compiler';
+
+import { BaseURLMap } from '../types/base.url.map';
+import { LiferayParams } from '../types/liferay.params';
+
+declare const Liferay: any;
+
+/**
+ * This is a map from `baseUrl`s to server URLs so that the Angular Compiler
+ * knows the place from where templates must be downloaded
+ */
+const BASE_URL_MAP: BaseURLMap = {
+	'./AppComponent': '/app'
+};
+
+export class AppUrlResolver implements UrlResolver {
+	/* Initial LiferayParams object (injected from index.ts) */
+	static params: LiferayParams;
+
+	resolve(baseUrl: string, url: string): string {
+		if (url.startsWith('.')) {
+			url = url.substring(1);
+		}
+
+		if (!url.startsWith('/')) {
+			url = '/' + url;
+		}
+
+		const mappedBaseUrl = BASE_URL_MAP[baseUrl];
+
+		if (!mappedBaseUrl) {
+			throw new Error(`Unknown baseUrl: ${baseUrl}`);
+		}
+
+		return Liferay.ThemeDisplay.getPathContext() + 
+			AppUrlResolver.params.contextPath +
+			mappedBaseUrl + 
+			url;
+	}
+}
diff --git a/projects/js-toolkit/packages/liferay-cli/src/new/facet-angular/templates/src/index.ts.ejs b/projects/js-toolkit/packages/liferay-cli/src/new/facet-angular/templates/src/index.ts.ejs
@@ -1,11 +1,13 @@
 import './polyfills';
 
+import { UrlResolver } from '@angular/compiler';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppComponent } from './app/app.component';
+import { AppDynamicLoader } from './app/app.dynamic.loader';
 import { AppModule } from './app/app.module';
-import { DynamicLoader } from './app/dynamic.loader';
-import LiferayParams from './types/LiferayParams'
+import { AppUrlResolver } from './app/app.url.resolver';
+import { LiferayParams } from './types/liferay.params';
 
 /**
  * This is the actual method that initializes the portlet. It is invoked by the 
@@ -14,15 +16,29 @@ import LiferayParams from './types/LiferayParams'
  * @param params an object with values of interest to the portlet
  */
 export default function(params: LiferayParams) {
+	AppUrlResolver.params = params;
+
 	platformBrowserDynamic()
-		.bootstrapModule(AppModule)
+		.bootstrapModule(
+			AppModule, 
+			{
+				providers:[
+					// Inject custom AppUrlResolver to resolve static resources
+					{
+						deps: [],
+						provide: UrlResolver, 
+						useClass: AppUrlResolver,
+					},
+				],
+			})
 		.then((injector: any) => {
 			// Load the bootstrap component dinamically so that we can attach it
 			// to the portlet's DOM, which is different for each portlet
 			// instance and, thus, cannot be determined until the page is
 			// rendered (during runtime).
-			const dynamicLoader = new DynamicLoader(injector);
+			const dynamicLoader = new AppDynamicLoader(injector);
 
 			dynamicLoader.loadComponent(AppComponent, params);
-		});
+		})
+		.catch(err => console.error(err));
 }
diff --git a/projects/js-toolkit/packages/liferay-cli/src/new/facet-angular/templates/src/types/base.url.map.ts.ejs b/projects/js-toolkit/packages/liferay-cli/src/new/facet-angular/templates/src/types/base.url.map.ts.ejs
@@ -0,0 +1,6 @@
+/**
+ * Map from `baseUrl`s to server URLs
+ */
+export interface BaseURLMap {
+	[baseUrl: string]: string;
+}
diff --git a/projects/js-toolkit/packages/liferay-cli/src/new/facet-angular/templates/src/types/liferay.params.ts.ejs b/projects/js-toolkit/packages/liferay-cli/src/new/facet-angular/templates/src/types/liferay.params.ts.ejs
@@ -4,13 +4,13 @@
  * See https://tinyurl.com/js-ext-portlet-entry-point for the most recent 
  * information on the structure of this type.
  */
-export default interface LiferayParams {
-	portletElementId: string;
-	contextPath: string;
-	portletNamespace: string;
+export interface LiferayParams {
 	configuration: {
 		system: any,
 		portletInstance: any
 	}
+	contextPath: string;
+	portletElementId: string;
+	portletNamespace: string;
 }
 
diff --git a/projects/js-toolkit/packages/liferay-cli/src/new/facet-angular/templates/tsconfig.json.ejs b/projects/js-toolkit/packages/liferay-cli/src/new/facet-angular/templates/tsconfig.json.ejs
@@ -1,16 +1,29 @@
 {
+	"angularCompilerOptions": {
+		"enableI18nLegacyMessageIdFormat": false,
+		"strictInjectionParameters": true,
+		"strictInputAccessModifiers": true,
+		"strictTemplates": true
+	},
+	"compileOnSave": false,
 	"compilerOptions": {
-		"emitDecoratorMetadata": true,
+		"baseUrl": "./",
+		"declaration": false,
+		"downlevelIteration": true,
 		"experimentalDecorators": true,
-		"inlineSources": true,
-		"lib": ["es2015", "dom"],
+		"forceConsistentCasingInFileNames": true,
+		"importHelpers": true,
+		"lib": [
+			"es2015",
+			"dom"
+		],
 		"module": "commonjs",
 		"moduleResolution": "node",
-		"noImplicitAny": true,
-		"noStrictGenericChecks": true,
-		"outDir": "build",
+		"noFallthroughCasesInSwitch": true,
+		"noImplicitReturns": true,
+		"outDir": "./build",
 		"sourceMap": true,
-		"suppressImplicitAnyIndexErrors": true,
+		"strict": true,
 		"target": "es5",
 		"typeRoots": ["./node_modules/@types/"]
 	},
