diff --git a/BUILD.gn b/BUILD.gn
index 96890290ebf750d48d7b7feb01a6b5c5e0418e38..f24bea569d9285dfe663c87d0dc7d5f5f08a9493 100644
--- a/BUILD.gn
+++ b/BUILD.gn
@@ -141,7 +141,6 @@ ets_loader_sources = [
   "compiler/package.json",
   "compiler/tsconfig.json",
   "compiler/webpack.config.js",
-  ets_loader_component_config_file,
 ]
 
 ohos_copy("ets_loader") {
@@ -155,6 +154,15 @@ ohos_copy("ets_loader") {
   module_install_name = ""
 }
 
+ohos_copy("ets_loader_component_config") {
+  deps = [ ":build_ets_loader_library" ]
+  sources = [ ets_loader_component_config_file ]
+
+  outputs = [ target_out_dir + "/$target_name/{{source_file_part}}" ]
+  module_source_dir = target_out_dir + "/$target_name"
+  module_install_name = ""
+}
+
 ohos_copy("ets_loader_library") {
   deps = [ ":build_ets_loader_library" ]
   sources = [ ets_loader_lib_dir ]
diff --git a/compiler/build_declarations_file.js b/compiler/build_declarations_file.js
index 3b016b6364c1156db00f9cf6294c343c4d89e383..3e2e53dfc22ea753598acb577fc0eec925d9f485 100644
--- a/compiler/build_declarations_file.js
+++ b/compiler/build_declarations_file.js
@@ -43,10 +43,14 @@ function generateTargetFile(filePath, output) {
   * limitations under the License.
   */`;
   files.forEach((item) => {
-    const content = fs.readFileSync(item, 'utf8');
+    let content = fs.readFileSync(item, 'utf8');
     const fileName = path.resolve(output, path.basename(item));
-    const newContent = license + '\n\n' + processsFile(content, fileName);
-    fs.writeFile(fileName, newContent, err => {
+    if (item === globalTsFile) {
+      content = license + '\n\n' + processsFile(content, fileName, true);
+    } else {
+      content = license + '\n\n' + processsFile(content, fileName, false);
+    }
+    fs.writeFile(fileName, content, err => {
       if (err) {
         console.error(err);
         return;
@@ -76,28 +80,34 @@ function mkDir(filePath) {
   fs.mkdirSync(filePath);
 }
 
-function processsFile(content, fileName) {
+function processsFile(content, fileName, isGlobal) {
   let sourceFile = ts.createSourceFile(fileName, content, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
   const newStatements = [];
   if (sourceFile.statements && sourceFile.statements.length) {
-    sourceFile.statements.forEach((node) => {
-      if (!ts.isImportDeclaration(node)) {
-        if (node.modifiers && node.modifiers.length && node.modifiers[0].kind === ts.SyntaxKind.ExportKeyword) {
-          node.modifiers.splice(0, 1);
-        }
-        if (isVariable(node)) {
-          const name = node.declarationList.declarations[0].name.getText();
-          const type = node.declarationList.declarations[0].type.getText();
-          if (name.indexOf(type) !== -1) {
-            const declarationNode = ts.factory.updateVariableDeclaration(node.declarationList.declarations[0],
-              ts.factory.createIdentifier(type), node.declarationList.declarations[0].exclamationToken,
-              node.declarationList.declarations[0].type, node.declarationList.declarations[0].initializer);
-            node.declarationList = ts.factory.updateVariableDeclarationList(node.declarationList, [declarationNode]);
+    if (isGlobal) {
+      sourceFile.statements.forEach((node) => {
+        if (!ts.isImportDeclaration(node)) {
+          if (node.modifiers && node.modifiers.length && node.modifiers[0].kind === ts.SyntaxKind.ExportKeyword) {
+            node.modifiers.splice(0, 1);
           }
+          if (isVariable(node)) {
+            const name = node.declarationList.declarations[0].name.getText();
+            const type = node.declarationList.declarations[0].type.getText();
+            if (name.indexOf(type) !== -1) {
+              const declarationNode = ts.factory.updateVariableDeclaration(node.declarationList.declarations[0],
+                ts.factory.createIdentifier(type), node.declarationList.declarations[0].exclamationToken,
+                node.declarationList.declarations[0].type, node.declarationList.declarations[0].initializer);
+              node.declarationList = ts.factory.updateVariableDeclarationList(node.declarationList, [declarationNode]);
+            }
+          }
+          newStatements.push(node);
         }
-        newStatements.push(node);
-      }
-    });
+      });
+    } else {
+      sourceFile.statements.forEach((node) => {
+        processComponent(node, newStatements);
+      });
+    }
   }
   sourceFile = ts.factory.updateSourceFile(sourceFile, newStatements);
   const printer = ts.createPrinter({ removeComments: true, newLine: ts.NewLineKind.LineFeed });
@@ -105,6 +115,41 @@ function processsFile(content, fileName) {
   return result;
 }
 
+function processComponent(node, newStatements) {
+  let extendNode = null;
+  if (isInterface(node)) {
+    const componentName = node.name.getText().replace(/Interface$/, '');
+    const result = validateComponentMembers(node, componentName);
+    if (result.isComponentName) {
+      const heritageClause = ts.factory.createHeritageClause(ts.SyntaxKind.ExtendsKeyword,
+        [ts.factory.createExpressionWithTypeArguments(result.extendNode, undefined)]);
+      extendNode = null;
+      node = ts.factory.updateInterfaceDeclaration(node, node.decorators, node.modifiers,
+        node.name, node.typeParameters, [heritageClause], node.members);
+    }
+  }
+  newStatements.push(node);
+}
+
+function validateComponentMembers(node, componentName) {
+  let extendNode = null;
+  let isComponentName = false;
+  if (node.members) {
+    for (let i = 0; i < node.members.length; i++) {
+      const callSignNode = node.members[i];
+      if (isSignNode(callSignNode)) {
+        const callSignName = callSignNode.type.typeName.getText().replace(/Attribute$/, '');
+        if (componentName === callSignName) {
+          extendNode = callSignNode.type.typeName;
+          isComponentName = true;
+          break;
+        }
+      }
+    }
+  }
+  return { isComponentName, extendNode }
+}
+
 function isVariable(node) {
   if (ts.isVariableStatement(node) && node.declarationList && node.declarationList.declarations &&
     node.declarationList.declarations.length && ts.isVariableDeclaration(node.declarationList.declarations[0]) &&
@@ -114,6 +159,17 @@ function isVariable(node) {
   return false;
 }
 
+function isInterface(node) {
+  return ts.isInterfaceDeclaration(node) && node.name && ts.isIdentifier(node.name) &&
+    /Interface$/.test(node.name.getText());
+}
+
+function isSignNode(node) {
+  return (ts.isCallSignatureDeclaration(node) || ts.isConstructSignatureDeclaration(node)) &&
+    node.type && ts.isTypeReferenceNode(node.type) && node.type.typeName && ts.isIdentifier(node.type.typeName) &&
+    /Attribute$/.test(node.type.typeName.getText());
+}
+
 generateComponentConfig(process.argv[4]);
 function generateComponentConfig(dir) {
   const configFile = path.resolve(dir, 'component_map.js');
diff --git a/compiler/src/compile_info.ts b/compiler/src/compile_info.ts
index b2062a1f8fa3785217d17befcdd1078aa9d2b7c0..805cbd928878f04590f85ecf36ae3f9e6f17fdc0 100644
--- a/compiler/src/compile_info.ts
+++ b/compiler/src/compile_info.ts
@@ -256,7 +256,7 @@ export class ResultStates {
     const componentNameReg: RegExp = /'typeof\s*(\$?[_a-zA-Z0-9]+)' is not callable/;
     const stateInfoReg: RegExp = /Property\s*'(\$[_a-zA-Z0-9]+)' does not exist on type/;
     const extendInfoReg: RegExp =
-      /Property\s*'([_a-zA-Z0-9]+)' does not exist on type\s*'([_a-zA-Z0-9]+)'\./;
+      /Property\s*'([_a-zA-Z0-9]+)' does not exist on type\s*'([_a-zA-Z0-9]+)(Attribute|Interface)'\./;
     if (this.matchMessage(message, props, propInfoReg) ||
       this.matchMessage(message, [...componentCollection.customComponents], componentNameReg) ||
       this.matchMessage(message, props, stateInfoReg) ||